Home » Web » Standards » CSS » Accessibility links with css

« Mac Classic OS windows with css! | Main | Upgrade to The Gallery »

Accessibility links with css

Lots of sites use short catchy 'action' terms to entice people into further sections of thier sites. The dreaded 'click here' is the all time classic but 'more', 'read more' and other variations also abound. The alternative is to highlight the actual text that the link comes from - though it is not always clear that there is a link there or that you should follow a link for more info.
It is even worse for screen reader software when confronted by a list of links all saying 'click here' without any explanation of what's on the end of the link.

I have developed, following a suggestion from my work colleague Celia (who got miffed because I didn't mention her in the first draft of this piece! :P ), a simple technique that I hope will allow more usability and accessibility. The following code visually highlights the word 'more' in the sentence but actually all of it is the link, which is apparent when you mouse over it. Screen readers, such as Jaws, pick the whole link up.

The style

a { color: #000000; text-decoration: none}
a:hover { color: #FF0000; text-decoration: underline}
.highlight { color: #FF0000; text-decoration: underline}

The html

<a href="#" title="Read more about accessibility">Read <span class="highlight">more</span> about accessibility</a>.


Demo page

Posted by Simon at May 14, 2002 10:20 AM

Social Bookmarks:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • co.mments
  • del.icio.us
  • digg
  • Furl
  • Ma.gnolia
  • RawSugar
  • Reddit
  • Spurl
  • TailRank
  • YahooMyWeb