Web Link Accessibility

Accessible Web Links

Creating links properly is absolutely vital to an accessible website for many reasons. As seems to be the case more often than not, screen readers are the most sensitive to mistakes in this area. Why is this? Well it has to with two reasons. The first is how screen readers navigate a website. The second is how screen readers will read the code for your link.

Link Lists

Often users of screen readers will navigate using a “link list”. In this list, a screen reader will gather all the links it can find on the webpage and read them to its user in a list. This means that the links will be taken completely out of context. Imagine getting the following list:

•  http://a5.sphotos.ak.fbcdn.net/hphotos-ak-ash4/224795_10150238835712495_569982494_8398069_7765361_n.jpg
•  Peacock peeking out from behind a roof
• This photo 

Which link will take you to the image of pink flowers? You really wouldn’t be able to tell without clicking on the links to find out.

Now which one is the image of a peacock? It’s an easy choice, right? That’s because of accessible link naming. You must always keep in mind the possibility of your links being taken out of context and put in a list like this one.

Naming

You must also think of how screen readers will articulate the code for a link to their users, link list or not. I will give you two examples of the link to this blog. The first will be inaccessible and the second accessible.

Inaccessible link naming

See my blog for more posts on accessibility: www.blogger.com/blogger.g?blogID=4884317545276596318.
(Code: <a href=”www.blogger.com/blogger.g?blogID=4884317545276596318”> www.blogger.com/blogger.g?blogID=4884317545276596318 </a>)

As you can see, this is nothing but a confusing, unsightly mess. All you have to do is give the link a proper name between the <a> tags and your link will be much more accessible. Taken out of context, like in a list of links, this will be completely unintelligible.

Accessible link naming

See my accessibility blog for more posts on accessibility.
(Code: <a href=”www.blogger.com/blogger.g?blogID=4884317545276596318”>my accessibility blog </a>)

You should easily be able to tell why this is the superior method. A screen reader breezes through the words, letting its user know that there is a link and what it links to. Taken out of context, the user would still understand that the link will take them to a blog about accessibility.

Opening Links in a new window

Sometimes you may want to set your link to open in a new window. Generally, this is not advised but I do understand that there are times when this could be unavoidable. If you must open a link in a new window you must warn the user. Put a message within the <a> tags that reads something to the effect of “opens in a new window”.

Inaccessible link opening in a new window

See my accessibility blog for more posts on accessibility.
See my accessibility blog for more posts on accessibility (link opens in a new window)

Accessible link opening in a new window

See my accessibility blog (opens in new window) for more posts on accessibility.

I will talk in a later post about how you can hide this warning from visual users while still being seen by screen readers.

Other reasons to create accessible links

Most of the time when you code with accessibility in mind, the quality of your website improves for other audiences as well. When you have properly named links, it improves search engine optimization (SEO), which means that search engines will rank your website higher than if your links were inaccessible. You will also find that your webpage will simply look better. Like I previously mentioned, it is much better to have your links properly named than to have messy URLs strewn about.

Extra Considerations

Keep in mind a few extra considerations if you decide to change the style of your link.

1. Remember that the color you choose for your links should be able to be clearly seen by the colorblind or those with poor vision.
2. It should always be visually obvious that something is a link. Don’t make your user guess and don’t try to trick them.