Accessible website navigation pt3

This is part three of a series of three blogs on accessible website navigation:

• The second covers: site maps, links and hot spots.
• The final (this one) covers: search, skip-tos and access keys.

I will look at each technique in turn and consider how they can be used to enhance the accessibility of a site and when they can make things worse.

Search

A facility to search for information on the web site is now very common. It can be a real accessibility boost as it can reduce the keystrokes or commands that are needed to get to the required information. To make it as accessible as possible the search box needs to be easily accessible itself. Just after the main menu and therefore near the top-right hand corner is a likely solution. The search functionality should support ‘and’, ‘or’, ‘adjacent’ and ‘not’ functions so the search text is as precise as possible allowing the user to get to the required page easily.

Headings

Areas of text on a web page can be defined as headings; for example the word ‘headings’ just above is defined as a heading. The most notable effect is that the format changes probably with a change of font or size. However they should also describe the structure of the page with a possible hierarchy of headings. A heading 1 (h1) is normally reserved for a heading for the whole page. Heading 2 and 3 (h2 and h3) should describe the structure of the page. Other headings are available but they are not often used because pages tend not to have such complex structures.

Headings are important for screen-readers as a user can navigate the page by jumping to a heading and then having the page read from there on. A particular use of headings is to highlight the different menus so they will have headings of main menu, sub menu footer menu, etc.

Browser plug-ins can be provided so that a keyboard only user can navigate the page via the headings.

Unfortunately web designers use the headings tags purely for formatting and this can be confusing for users who assume they define the structure of the page as well.

Skip-to

In the section on menus I mentioned the need for keyboard-only and screen reader users to be able to skip over menus and get to the page content. This can be accomplished by skip-to links. Normally these are very near the beginning of the page so when a user tabs from the beginning they will come across a ‘skip-to content’ link hitting enter takes them over the menus and straight to the page content.

Many web designers assume these are only useful for screen-reader users and not to sighted users; on that assumption they make the link invisible: that is it can be read by the screen-reader but is not seen on the screen. However there are sighted keyboard-only users who would benefit from knowing of their existence. This can be arranged by making them visible when they are tabbed into.

The skip to content is the most common form of skip-to tab but other uses do occur for example skip-to sub-menu or even skip-to next article. The number should be small otherwise they become a barrier in their own right.

Access key

Access keys are a combination of keys (ctrl + a letter on my Mac) that will perform a specific function such as ‘go to home page’ or ‘go to search engine’. Again they reduce the number of keystrokes required to navigate to a function. The problem is that unless they are used a lot they will not be remembered. The recommendation is to have a few defined that are likely to be used a lot, for example cntrl+S on my favourite web site takes me to the search engine which I use a lot.

Conclusion

All the navigation techniques I have described can improve accessibility for people with disabilities. I also believe that thinking through the issues of navigation with an accessibility hat on will clarify and simplify the navigation to the benefit of all users.