Accessible “read more” links

Russ Weakley’s Simple, accessible “more” links explains how you can use CSS to make “read more” links more accessible to screen reader users.

This technique is useful for linking to full articles from a list of headings and article excerpts when your client or someone on your team insists on having “Read more” links instead of linking the heading. This way the links will actually provide some information on where they lead.

Posted on September 24, 2005 in Accessibility, CSS, Quicklinks

Comments

  1. It’s a nice technique, but of course it’s more simple to just put the description of the more-link in the title-attribute of the anchor element. Screen readers should be able to handle that.

  2. Like Tom’s idea, although this is an interesting technique for those obsessed with ‘more’ style links ;)

  3. Another option I used in the past is a “more” image with the appropriate alt attribute. No need to hover, and normally you link the heading of the entry anyways.

  4. Spontaneously, I would say it’s a better idea just to link the headline, to avoid the “read more” link in the first place.

    Version 2 is pretty cool, where the rollover text scales with the rest of the page.

  5. I did the same as Russ last November on a website for BT. In the end I removed the ‘more’ links, however, as I understand having several links beginning with the same character isn’t fantastic usability for screen reader users.

  6. Tom: It would be a reasonable assumption, but it’s not actually the case.

    Not all screen readers can access the title attribute by default, and the ones that don’t often can’t be set to read both link and title text.

    Using JAWS (one of the most common) as an example, you can get it to read out the link text, the title text or the longer of the two.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.