E-mail List Archives

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


From: priti Rohra
Date: Dec 18, 2012 10:33PM

Hi Birkir,

You can find ARIA implementation of the above issue at:

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
This will ensure that it it is available to all screen reader users.

Hope this helps...

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

On 12/19/12, Birkir R. Gunnarsson < <EMAIL 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
> > > >