WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: the "Read More" links vs elipsis

for

From: Jeevan Reddy
Date: Dec 6, 2011 11:45PM

Hi Birkir,
i do agree with Jaradh's suggestion which is the universal solution
for Read more links..
you can do it automatically by appending title of the article to read
more via the sthcripting and screen off that with CSS.

The other approach is by using ARIA-labelledby, which will work in modern
browsers like IE 8+, FF 3.6+ etc..

Consider the following Example, when the read more link get focus, screen
readers say the read more+title of the article. it'll work in linklist mode
also..
Example: <a href="thehindu/cricket" onclick="details() ><h3
*id="cricket"*>India
lost the Third ODI against West Indies</h3></a>
the victory oscilated between the two nations, Rohit Sharma's invincible
battle didn't reach india to victory...
<a href="thehindu/cricket" onclick="details()
ARIA-labelledby="cricket">read more</a>

Hope this helps..
On Wed, Dec 7, 2011 at 5:28 AM, Jared Smith < <EMAIL REMOVED> > wrote:

> All of these options work, though none are optimal. While you prefer
> options 2 or 3 as a screen reader user, option 1 (having the "Read
> more" link at the end of the summary) is more standard and probably
> more friendly for sighted users. A good approach is to make the "Read
> More" link so that it makes sense outside of its context, perhaps by
> using off-screen text so that sighted users see "Read more", but
> screen reader users hear "Article Title - Read More". This would
> provide two links with the same initial text, though this is less
> burdensome than several "Read more" links.
>
> Another options is to use a combination of the approaches - having a
> visual "Read More" link that is not a true link (and thus omitted from
> the tab order and links list), but that uses JavaScript to trigger the
> page change. This would, of course, require JavaScript, but without
> JavaScript you could have the presentation be as Option 2 (no link,
> user must backtrack to activate the link).
>
> Option 3 (dynamic "Read more" option) would also require JavaScript
> and would have limited applicability. It would also require that focus
> be controlled so that the user's place within the article is not lost
> when the link is activated and the rest of the story appears.
>
> Of these, I think the first approach of using off-screen text so that
> all links make sense is the easiest to implement and most friendly.
>
> Jared Smith
> WebAIM.org
>