WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Pasting title of a news story invissibly into its "read more" link

for

Number of posts in this thread: 4 (In chronological order)

From: Birkir R. Gunnarsson
Date: Tue, Dec 18 2012 7:15PM
Subject: Pasting title of a news story invissibly into its "read more" link
No previous message | Next message →

Oh yea wise ones.

I am helping with development on a page with quite a few news stories.
The way it is set up now, unfortunately, is that the news title is a
heading (not a link), followed by 3 to 4 lines of text and then a
"read more" link.
I do not necessarily think this is a WCAG violation, at least not if
we get nit picky, as the context of the "read more" link can be
programatically determined (just look at the preceeding heading, then
press tab to get back to the "read more" link).
However, I remember coming across an implementation where the text of
a headline of a news story was added to the "read more" link, but
invissibly, so that screen readers saw
"read more the title of news story", whilst others just ssaw "read more".
I just can't remember the exact implementation of this.
I would imagine that one could just set an ID on the heading element,
and then use aria-describedby with that ID and past it to the "read
more" link, I presume.
But if someone has implemented a solution, or knows of the solution I
came across, definitely feel free to discuss, suggest or send me a
link on- or off-list.
Similarly, if someone has a strong opinion on whether the set up, as I
described it, satisfies the "programmatically determined" condition,
definitely let me know, though I have seen this topic being discussed
before.
Cheers
-B

From: priti Rohra
Date: Tue, Dec 18 2012 10:33PM
Subject: Re: Pasting title of a news story invissibly into its "read more" link
← Previous message | Next message →

Hi Birkir,

You can find ARIA implementation of the above issue at:
http://www.oaa-accessibility.org/example/44/

However, I would recommend you to go for a native mark-up based
solution as ARIA support is not yet available across all screen
readers. To solve the above issue, present the heading text within a
<span> element within the link text & hide it using CSS (take it
offscreen).
This will ensure that it it is available to all screen reader users.

Hope this helps...

Regards,
Priti Rohra
Accessibility Consultant
blog: http://www.accessibilitychatter.com



On 12/19/12, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> Oh yea wise ones.
>
> I am helping with development on a page with quite a few news stories.
> The way it is set up now, unfortunately, is that the news title is a
> heading (not a link), followed by 3 to 4 lines of text and then a
> "read more" link.
> I do not necessarily think this is a WCAG violation, at least not if
> we get nit picky, as the context of the "read more" link can be
> programatically determined (just look at the preceeding heading, then
> press tab to get back to the "read more" link).
> However, I remember coming across an implementation where the text of
> a headline of a news story was added to the "read more" link, but
> invissibly, so that screen readers saw
> "read more the title of news story", whilst others just ssaw "read more".
> I just can't remember the exact implementation of this.
> I would imagine that one could just set an ID on the heading element,
> and then use aria-describedby with that ID and past it to the "read
> more" link, I presume.
> But if someone has implemented a solution, or knows of the solution I
> came across, definitely feel free to discuss, suggest or send me a
> link on- or off-list.
> Similarly, if someone has a strong opinion on whether the set up, as I
> described it, satisfies the "programmatically determined" condition,
> definitely let me know, though I have seen this topic being discussed
> before.
> Cheers
> -B
> > > >

From: Lucy Greco
Date: Tue, Dec 18 2012 11:52PM
Subject: Re: Pasting title of a news story invissibly into its "read more" link
← Previous message | Next message →

Hello:
This link does not seem to work sorry thanks Lucy

-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of priti Rohra
Sent: Tuesday, December 18, 2012 9:34 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Pasting title of a news story invissibly into its
"read more" link

Hi Birkir,

You can find ARIA implementation of the above issue at:
http://www.oaa-accessibility.org/example/44/

However, I would recommend you to go for a native mark-up based solution as
ARIA support is not yet available across all screen readers. To solve the
above issue, present the heading text within a <span> element within the
link text & hide it using CSS (take it offscreen).
This will ensure that it it is available to all screen reader users.

Hope this helps...

Regards,
Priti Rohra
Accessibility Consultant
blog: http://www.accessibilitychatter.com



On 12/19/12, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
> Oh yea wise ones.
>
> I am helping with development on a page with quite a few news stories.
> The way it is set up now, unfortunately, is that the news title is a
> heading (not a link), followed by 3 to 4 lines of text and then a
> "read more" link.
> I do not necessarily think this is a WCAG violation, at least not if
> we get nit picky, as the context of the "read more" link can be
> programatically determined (just look at the preceeding heading, then
> press tab to get back to the "read more" link).
> However, I remember coming across an implementation where the text of
> a headline of a news story was added to the "read more" link, but
> invissibly, so that screen readers saw "read more the title of news
> story", whilst others just ssaw "read more".
> I just can't remember the exact implementation of this.
> I would imagine that one could just set an ID on the heading element,
> and then use aria-describedby with that ID and past it to the "read
> more" link, I presume.
> But if someone has implemented a solution, or knows of the solution I
> came across, definitely feel free to discuss, suggest or send me a
> link on- or off-list.
> Similarly, if someone has a strong opinion on whether the set up, as I
> described it, satisfies the "programmatically determined" condition,
> definitely let me know, though I have seen this topic being discussed
> before.
> Cheers
> -B
> > > list messages to = EMAIL ADDRESS REMOVED =
>
messages to = EMAIL ADDRESS REMOVED =

From: priti Rohra
Date: Wed, Dec 19 2012 12:32AM
Subject: Re: Pasting title of a news story invissibly into its "read more" link
← Previous message | No next message

Luci, I think the site is down due to some technical reasons.

All the best!
Priti

On 12/19/12, Lucy Greco < = EMAIL ADDRESS REMOVED = > wrote:
> Hello:
> This link does not seem to work sorry thanks Lucy
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED =
> [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of priti Rohra
> Sent: Tuesday, December 18, 2012 9:34 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Pasting title of a news story invissibly into its
> "read more" link
>
> Hi Birkir,
>
> You can find ARIA implementation of the above issue at:
> http://www.oaa-accessibility.org/example/44/
>
> However, I would recommend you to go for a native mark-up based solution as
> ARIA support is not yet available across all screen readers. To solve the
> above issue, present the heading text within a <span> element within the
> link text & hide it using CSS (take it offscreen).
> This will ensure that it it is available to all screen reader users.
>
> Hope this helps...
>
> Regards,
> Priti Rohra
> Accessibility Consultant
> blog: http://www.accessibilitychatter.com
>
>
>
> On 12/19/12, Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = > wrote:
>> Oh yea wise ones.
>>
>> I am helping with development on a page with quite a few news stories.
>> The way it is set up now, unfortunately, is that the news title is a
>> heading (not a link), followed by 3 to 4 lines of text and then a
>> "read more" link.
>> I do not necessarily think this is a WCAG violation, at least not if
>> we get nit picky, as the context of the "read more" link can be
>> programatically determined (just look at the preceeding heading, then
>> press tab to get back to the "read more" link).
>> However, I remember coming across an implementation where the text of
>> a headline of a news story was added to the "read more" link, but
>> invissibly, so that screen readers saw "read more the title of news
>> story", whilst others just ssaw "read more".
>> I just can't remember the exact implementation of this.
>> I would imagine that one could just set an ID on the heading element,
>> and then use aria-describedby with that ID and past it to the "read
>> more" link, I presume.
>> But if someone has implemented a solution, or knows of the solution I
>> came across, definitely feel free to discuss, suggest or send me a
>> link on- or off-list.
>> Similarly, if someone has a strong opinion on whether the set up, as I
>> described it, satisfies the "programmatically determined" condition,
>> definitely let me know, though I have seen this topic being discussed
>> before.
>> Cheers
>> -B
>> >> >> list messages to = EMAIL ADDRESS REMOVED =
>>
> > > messages to = EMAIL ADDRESS REMOVED =
>
> > > >