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>.
Next short: Upgrade to The Gallery
Previous short: Mac Classic OS windows with css!
