If you've not read - or have forgotten about - the page on accessibility, please return there and read it again. That page contains all the basic justification for making your site more accessible to those with problems in this area. This page supplements that one by describing some techniques which are of specific help in navigation.

Actually a lot of this can be boiled down to the following:

USE REAL LINKS!!

Image maps, form-based menus and other non-standard links are kind of nice, and a well-used image map (that is, one that adds to the information being presented rather than just being a gimmick) can sometimes be extremely useful. But if you use these you must have alternative ways of reaching the content, via a standard link - that is, an <A> tag. (Images within <A> tags can count as "standard links" if they have decent ALT attributes though even here we are on the edge of bad practice.)

This sounds like nit-picking or Drew being crypto-fascist again. Neither is true (beyond the fact that I'm always a bit c-f). As "Dive Into Accessibility" reports, 11% of Web users don't use JavaScript for one reason or another. Those flashy Java or JavaScript menus which increasingly pop up (an apt term) on sites? Useless to these 11%. They simply cannot see the link. And if you want an even more mercernary reason for using real links: Google can't follow them, which means it can't give your page a high ranking, which means fewer people will find it. Always have some alternative means of reaching the content.

Here are a couple more tips for making your site easier to use for those who can't use a mouse. It is common practice to put menu bars on the left of the screen. (Why, I don't know: but it seems to be the standard.) This is fair enough most of the time. It also works OK when your tables are linearised (see the page on text-only browsers). But if you have quite a few of these links, users of non-visual browsers like Jaws will have to listen as they are all read out before they get to the more interesting content. This can get a bit tedious, particularly if the same dozen or so navigation links appear on every page.

An acceptable trick (there are more robust solutions but they involve absolute positioning with style sheets, which this site does not cover) is to place a "hidden" link at the very top of the page, via which these users can skip over the navigation. If you look at the source code of every page on this site you will see the following near the top:


<BODY>
    <A HREF="#startcontent" TITLE="Click to skip over navigation" ACCESSKEY="2">
    <IMG SRC="skiplink.gif" alt=" " BORDER=0></A>
<A name="top"></A>

and so on...

The very first thing on each and every page of this site is therefore an invisible image (it's 1 x 1 pixel filled with only a transparent background). This acts as a link to "Skip to content". (Note the TITLE attribute; I have not mentioned it on this site, but it acts as a sort of ALT for links and proves useful here.) The destination of this anchor link is shown here:


<TD WIDTH="65%" CLASS="mainbar">
    <A name="startcontent"></A>
    <BR>
    <H2>Navigation and accessibility</H2>

In other words it's after all the page heading and left-hand menu, but right before the heading which begins the main content. Therefore, the non-visual browser user can get straight to the meat of the page.

(Note that I first tried this with ordinary text that was hidden from visual browsers via the style sheet, but this didn't work in JAWS as that software lays over existing browsers like IE rather than being a browser in its own right. If text is hidden from the browser, it's hidden from the screenreader. Use an invisible image like this.)

There's another attribute which can help such users move around the page quickly. It's called ACCESSKEY. If you include it in a link or (in some special cases) another attribute, then the value it contains can be pressed along with ALT to "jump" straight to that link. All occurrences of the "spider" logo on this site, for instance, are coded like this:


<A HREF="index.html" ACCESSKEY="1">
    <IMG SRC="cobweb2.jpg" alt="Click here to return to this site's
        front page" BORDER=0>
</A>

So pressing ALT+1 will automatically focus the browser on that link, and Return then activates it. Try it! (It won't scroll the page back up if you're down here, but it will work regardless.)

Of course you need to actually tell people this feature is available. Non-visual browsers and Lynx will do it automatically, but for everyday browsers you will need to explain this in some kind of "user's guide". Most small, personal sites won't feel the need to have such a guide, however. But it's worth bearing in mind that ALT+1 meaning "return to home page" is becoming a kind of "industry standard", so if you're going to use ACCESSKEY, use that one at least. Another standard is that ALT+2 usually serves for the "skip to content" link; as you can see from the first block of code above.

Incidentally the other ACCESSKEY defined on this site is S, and if you press ALT+S you will be taken straight to the site search (at the bottom of the left-hand column of every page). Here the ACCESSKEY attribute appears in the <label> tag.

I know all this seems like a lot of extra work but that's the point about disability isn't it? If we treat disability as the disabled person's problem, then we get ridiculous situations whereby, say, 75% of Leeds University's lecture theatres are inaccessible to people in wheelchairs (crazy!). Or we can treat disability as something caused by society's failure to allow for the fact that at some point in our lives, many of us suffer from mobility or related problems. One day you might break your arm and find it very difficult to use a mouse - and then find some of your favourite web sites are suddenly very hard to use. Some slight forethought (and you can add these sorts of things to page templates so you only have to code them once) can make your site so much easier to use for everyone.

Back to the top

Back to the menu for lesson 10

Material on this site is © Drew Whitworth, 2005 Permission will usually be given to reproduce material from this site for non-commercial purposes, if credit is given. For enquiries, e-mail Drew at andrew [dot] whitworth [at] manchester [dot] ac [dot] uk.