obso1337.org

Accessibility is something I have been becoming more and more interested in. It seems to be a natural progression from usability. When designing for the web, there are the obvious things you can do like including “alt” tags in your images to identify them, providing text equivalents of documents which require a plugin and evaluating color schemes for those with color blindness.

When thinking of the handicap and the web, the first two groups who come to mind are blind and deaf people. We know about screen readers (like JAWS and IBMs reader) and try to develop content that will make sense to them. Audio can be captioned.

We try our best to provide accessibility to the deaf and blind. But what about the other groups?

I came across this problem at work. If you have ever used a screen reader, you know that it doesnt have the selective attention a user reading a screen does. Basically it reads everything. This is a good thing of course, but sometimes the repetition of similar data throughout a site would like to be skipped over (such as a common set of navigation). The solution to this is easy, or so I thought. Lets use a “Skip Navigation” anchor. Sometimes you want this link to be available to all users, but common practice is to hide is someway so it stays out of the design.

Here was my initial idea:

<a href="#skipnav" style="display:none;position:absolute;">Skip Navigation</a>

<ul><li><a href="#">link name</a></li></ul>

<a name="skipnav"></a>

After thinking about it,display:none wouldnt work in JAWS so I adjusted my code to use visibility:hidden. Since the element was absolute, it wouldnt offset any other elements. This allows anyone using a text browser, mobile device or older browser (we disable stylesheets for older browsers so there is no chance of “missing” information) to see and use this functionality.

My boss then mentioned the thing I didnt consider: What if the person wasnt blind or deaf, but handicap in another way?

Interesting, I had never considered it. There are certainly people who can see, but cannot use a mouse. There are certainly computers running a GUI who may not be using a mouse. Looking over my solution, I realised there was no way for one of these users who are using the CSS to tab through the page and discover the “skip nav” hotspot. How was everyone else doing it?

Hopping over to a few of my sites, I quickly found out that many of them did not consider this option either. A List Apart also uses the “hidden” idea and it is impossible to tab to the hotspot. Some sites included the “skip nav” in the design so this was a non-issue, but I didnt want it visible to our typical user. I found a few examples of people using a 1×1 transparent image, but I find this to be a crude hack and undesirable use of an image.

With the image idea still stuck in my head, I came up with something less crude, however still pretty much a hack:

<a href="#skipnav" title="Skip Navigation" style="position:absolute;">&nbsp;</a>

<ul><li><a href="#">link name</a></li></ul>

<a name="skipnav"></a>

I am more accepting of the white space than of a useless image. The screen reader will read the title of the link and get the description of its action. Someone tabbing through will be able to identify the action of the link by a descriptive reference. It would work the same way if a transparent image was used, but to me this doesnt feel as ugly.

There is however an issue with linyx and links. They do not display anchor titles and the link is difficult to identify and use. How big of a deal is it that a user using lynks/links cannot skip through the navigation? Relatively small. I hate having unresolvable problems.

Does anyone have any other suggestions?

seele :: Feb.11.2005 :: General, Usability, Work :: 2 Comments »

Trackback this post |