How to Code Accessible Links

Your website should be accessible to all Internet users notwithstanding the browser they use. An accessible link imparts as much information to as many users as possible. Thus, the reader can preview the link before make a decision whether to follow it or not. Here you can find useful information that helps you to make links more accessible.

Tabbing

You should arrange links in logical tabbing order that allows the users who can’t use pointing devices to ‘tab’ through links. With the tabindex attribute you can define this order. However, in case the HTML is linear, a logical tabbing order will automatically fall into place.

Accesskeys

Accesskeys assign a keyboard shortcut to a link that allows the site users who do not use pointing devices to navigate easily. As a rule, the user should press ‘Alt’ or ‘Ctrl’ + the accesskey.

You don’t need to put accesskeys on all links, but to apply them to primary navigation links can be a good thing.

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

However, usually users can’t find out accesskey (not everyone will look at the source code). JAWS will read such accesskeys out loud, but to do your best with them, you should probably make them more explicit.

You also can use similar to the ‘skip navigation’ link technique that you can find below or just make a separate page that will include the accesskeys. The other method that is becoming rather popular is underlining a corresponding letter in the link.

Link Titles

Add the title attribute that will display a description of where the link will take the user or what happens if the user don’t have Javascript functionality (in case the link is used to execute Javascript)

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

Popups

If you want to use Javascript popups, you can use onkeypress or onclick to make things more accessible. In case the user doesn’t have Javascript, you can include a normal page value of the href attribute of the link and return false from a function that launches the popup to make a normal page download.

<script type=”text/javascript”>
function opennastypopup() {
window.open(“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

You should separate adjacent links by more than spaces in order screen readers can discern them. You can place characters in-between links (such as a pipe – ‘link | link’) or surround it by characters (such as square brackets – ‘[link] [link]’). The other thing you can do is to put navigation links within lists and then style them with CSS as you like (for example, side-by-side using display: in-line).

Skipping Navigation

With consistent navigation you should provide the users with the opportunity to skip the same information on every page. Just place a link before the navigation that skips directly to the content. For example:

<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>

You can use CSS in case you don’t want to display this link in visual browsers. The simplest way is to use display: none, but with some screen readers not reading the link as intended, the ‘Skip navigation’ link must be displayed.

Thus, instead of the above mentioned style, you can set the width and height of the element to zero (width: 0; height: 0; overflow: hidden;). It has the same visual effect and will be read by screen readers.