Accessible+Web+Navigation

= Accessible Web Navigation = toc Following an introduction to best practices in web navigation, those who manage a website may want specific guidance on developing site navigation which conforms to W3C's guidelines for accessibility. This article demonstrates common applications of accessibility principles to web navigation.

Proper semantic markup
Users who are blind cannot use visual cues to identify and focus on what is considered a page's "main" content versus primary or secondary navigation structures, or blocks of supplementary content. However, today's screen readers can skip through page headers to give users a quick outline of a page. This feature only works when content is properly formatted using  styles. The web accessibility toolbar can help page authors determine whether they have properly marked up their titles.



Navigation menus can also be labeled with a heading which is hidden through CSS but provides a substitute for those who cannot see the standard visual cues. Avoid using the CSS comand display:none, however, as this will hide the text both from sight and from screen readers.

Provide a way to skip to main content
Users who are blind rely on screen readers to read a page's content to them starting at the top, line by line, link by link. Users who do not use a mouse similarly must tab through every link, starting at the top of the page, before they are able to interact with the main content. This is why Section 508 requires that a method be provided to skip repetitive navigation links. There are many ways to do this and Jim Thatcher describes several techniques, as well as the disadvantages and advantages of each, in his web accessibility tutorial.

Seperate semantics from style
Another rule of thumb for navigation is to keep the HTML as simple as possible (such as a list or table of links) and styling entirely through CSS. This is especially important if images of text are used, as the navigation label for each link should remain clear to those who cannot see the images. Chris Coyier reviews several CSS image replacement techniques.

An Example
NASA.gov's complex, many-layered navigation scheme is a useful case study to see some best practices (skip navigation links and clean HTML) and also some shortcomings (erratic use of headings, no text to replace icon buttons). Analyzing it and other websites using the Web Accessibility Toolbar and Mozilla's Firebug is an excellent way to learn about creating accessible navigation.

**References**

 * 1) Coyier, C. (2008, March 24). Nine Techniques for CSS Image Replacement | CSS-Tricks. //CSS Tricks//. Retrieved November 22, 2011, from @http://css-tricks.com/630-css-image-replacement/
 * 2) Thatcher, J. (2011, June 3). Web Accessibility - Navigation. //JimThatcher.com//. Retrieved November 22, 2011, from @http://jimthatcher.com/webcourse4.htm
 * 3) United States Government. (2010, June). Section 508. Retrieved November 22, 2011, from http://www.section508.gov/index.cfm?fuseAction=stdsdoc#Web
 * 4) W3C. (2011, December). Web Content Accessibility Guidelines (WCAG) 2.0. Retrieved November 22, 2011, from @http://www.w3.org/TR/WCAG20/