Accessible Links

13 Feb

his page deals with a number of ways that links can be made more accessible.

HTML Dog, The Book HTML Dog book cover

HTML Dog is hosted by Titan Internet


Users who do not or cannot use pointing devices can ‘tab’ through links, and as such, links should be in a logical tabbing order. The tabindex attribute allows you to define this order although if the HTML is linear, as it should be, a logical tabbing order should automatically fall into place.


Accesskeys allow easier navigation by assigning a keyboard shortcut to a link (which will usually gain focus when the user presses ‘Alt’ or ‘Ctrl’ + the accesskey). For users who do not use pointing devices, this is a much quicker and easier way to navigate than tabbing through links.

It isn’t necessary to put accesskeys on all links, but it is a good idea to apply them to primary navigation links.

 <a href="somepage.html" accesskey="s">Some page</a> 

The trouble with accesskeys is that there is often no way the user can find out what they are (unless they look at the source code). JAWS, the most popular screen reader out there will read these accesskeys out loud, but to take full advantage of them, you will probably want to make them more explicit.

You could apply a method similar to the ‘skip navigation’ link technique (see below), or opt for a separate page explaining the accessibility-related functionality of your site, including the accesskeys. A method that is growing in popularity is to underline a corresponding letter in the link, similar to the method used in the menus of most Windows applications.

See the article in A List Apart for more information.

Link titles

It is a good idea to add the title attribute, which will pop up a description of where the link will take the user, so improving navigation.

If the link is used to execute Javascript, it is also beneficial for explaining what should (but won’t) happen for users that do not have Javascript functionality.

 <a href="#" onclick="opennastypopup()" onkeypress="opennastypopup()" title="Open a nasty Javascript pop-up window">Monster</a> 


Talking of Javascript popups, if you will insist on using them, or more likely someone is telling you to use them, you can make things much more accessible by using onkeypress as well as onclick. Also, if you include a normal page in the value of the href attribute of the link and return false from a function that launches the popup, if the user does not have Javascript, a normal page will load anyway. For example:

 <script type="text/javascript"> function opennastypopup() {"monster.html", "", "toolbar=no,height=100,width=200"); return false; } </script> ... <a href="monster.html" onclick="return opennastypopup()" onkeypress="return opennastypopup()">Monster</a> 

Adjacent links

Adjacent links should be separated by more than spaces, so that they can be discerned by screen readers.

This can be done by placing characters in-between links (such as a pipe – ‘link | link‘) or surrounding it by characters (such as square brackets – ‘[link] [link]‘). It is also a good idea to put navigation links within lists. These can then be styled with CSS to be displayed however you choose, even side-by-side (using display: in-line).

Skipping navigation

You should give users of screen readers an opportunity to skip the navigation and go straight to the content. This is because if your navigation is consistent (as it should be), a user does not need to go through the same information on every page, especially if there is a lot of it. You can skip the navigation by placing a link before it that skips directly to the content.

It might look something like this:

 <div id="header"> <h1>The Heading</h1> <a href="#content" accesskey="n">Skip navigation</a> </div> <div id="navigation"> <!--loads of navigation stuff --> </div> <div id="content"> <!--lovely content --> </div> 

Obviously, you do not want this link to be displayed in visual browsers, so you can use CSS to render it invisible.

This is a CSS tip, but is specific to ‘Skipping navigation’. It involves the method to use to render the link invisible.

The most obvious way would be to use display: none, but as some screen readers will pick up on this and not read the link, as intended, the ‘Skip navigation’ link must be displayed.

It still doesn’t have to be visible though – there’s no point in showing it to visually able users. So instead of having a style containing display: none, you can set the width and height of the element to zero (width: 0; height: 0; overflow: hidden;), which has the same visual effect but will be read by screen readers.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: