Techno WeBlog

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

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=”openpopup()” onkeypress=”openpopup()” title=”Open a Javascript pop-up window”>CodLib</a>

Popups
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 openpopup() {
window.open(“http://www.codlib.com”, “”, “toolbar=no,height=100,width=200″);
return false;
}
</script>
…
<a href=”http://www.codlib.com” onclick=”return openpopup()” onkeypress=”return openpopup()”>CodLib</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).

Filed under: Css, HTML, Tips & Tricks, Web