Standard 4:
Navigation and Links
- STANDARD 4.1 Web pages will be designed to enable users to skip repetitive navigation links.
Comment: For a sighted user, scanning a page to see if there are meaningful links is a relatively quick process. Someone who is blind and using a screen reader and a keyboard only, must listen to all of the content on a page to determine if the information they are looking for is contained on the current page. If the same or similar navigation appears on every page, especially if it appears at the top of the page, it is very time-consuming for the screen reader user or user with mobility impairments to listen to or tab through the navigation on each page to get to the main content. This process can be made significantly more efficient for anyone navigating a web page with the keyboard only by providing a "Skip to Main Content" link.
The "Skip to Main Content" link should appear at or near the top of the page so that it is the first item encountered by the screen reader or by the Tab key. The link is simply an anchor which directs the focus to the main body of text of the page, skipping over navigational buttons, etc.
- HTML Elements Affected:
<a> - Code example: (extracted from accessibility demonstration site created by AccessIT, (http://www.washington.edu/accessit/AU/ins.html)
<html>Skip to main content
<body>
<!-- this page begins with a "skip to main content" link -->
<a href="#main" class="skipnav"></a>About AU
<img src="../images/aulogo.gif" alt="Accessible University" class="logo">
<!-- The following are the horizontal menu buttons, which appear in two rows.
Their appearance is defined in the <style> section above -->
<div style="margin-top:0px"> <!-- beginning of row 1 -->
<a href="z.html" class="horiz_menu_item"></a>Instruction
<a href="ins.html" class="horiz_menu_item"></a>Student Services
<a href="z.html" class="horiz_menu_item"></a>AU's Back Office
<a href="z.html" class="horiz_menu_item"></a>Admissions
</div> <!-- end of row 1 -->
<!-- row 2 includes style "clear:left" so that
its contents are forced to a new row -->
<div style="clear:left">
<a href="admissions.html" class="horiz_menu_item"></a>Records and Policy
<a href="z.html" class="horiz_menu_item"></a>Visitor Information
<a href="z.html" class="horiz_menu_item"></a>Campus Calendar
</div> <!-- end of row 2 -->
<!--The following is the left margin menu-->
<div class="vertical_menu">
<a href="calendar.html" class="menubutton"></a>Continuing Ed
<a href="z.html" class="menubutton"></a>Financial Aid
<a href="z.html" class="menubutton"></a>AU Libraries
<a href="z.html" class="menubutton"></a>AU News
<a href="z.html" class="menubutton"></a>Support AU
<a href="z.html" class="menubutton"></a>Academic Degree Programs
</div>
<!-- This is the main content of the page.
It begins with a "<a name='main'>" tag, which is the target of the
"skip navigation" link that appears at the top of the document. -->
<div class="main_content">
<a name="main">
<h1></h1>Biology
</a>
<ul>
<li><a href="z.html"></a></li>Chemistry
<li><a href="z.html"></a></li>Computer Science
<li><a href="z.html">
& Engineering</a></li>Economics
<li><a href="z.html"></a></li>Physics
<li><a href="phys.html"></a></li>Spanish
<li><a href="spa101.html"></a></li>
</ul>
</div> <!-- end main content -->
</body>
</html>
- STANDARD 4.2 All text links will indicate the destination or purpose.
Comment: A person using a screen reader can use the TAB key to move through active links on the web page. As the screen reader goes through each link, it reads aloud the text that is associated with that link. A link that is associated with generic text such as "Click here" is not going to have any meaning to someone who cannot see the surrounding text or context in which the link is used. A more meaningful link would be, for example, "Athletic Schedule".
HTML Elements Affected: N/A. This is more a page design issue than a strict HTML code issue.
Code Examples:
Inappropriate link association:
<p><a href="http:// www.anycollege.edu/sports/events.html">Click here</a>for a list of Athletic Events</p>Appropriate link association:
<p>List of<a href="http://www.anycollege.edu/sports/events.html">Athletic Events</a></p>
- STANDARD 4.3 All state agency web pages will allow the user to return to that state agency's home page.
Comment: This is an issue for visitors with visual or cognitive impairments. Visitors without sight might have difficulty determining where they are on sites with minimal contextual cues, especially if they have followed links to drill down several levels. Ensuring that every agency web page has a link to the agency's home page provides an easy way to return to the point where they started, and it helps identify the source of the information being browsed.
- HTML Elements Affected: N/A. This is primarily a page design issue.
- Code Examples:
<html>{Don't forget to use an approved document type declaration -- this is for example purposes only!}
<head>Example of Link to Return to Agency Home Page
<title></title>
</head>- Return to Agency Home Page - </A></P>
<body>
<p style="text-align:center; "><a href="../../index.html">
<h1 style="text-align:center; ">MOTOR VEHICLE REGULATIONS</h1>
<p>Blah blah blah blah-be-de-blah...</p>
</body>
</html>
- STANDARD 4.4 Web pages will be designed to be device independent; for example, allow navigation with or without a mouse.
Comment: People who are blind or have various types of mobility impairments do not use a mouse. Therefore all functionality on the webpage must be accessible using the keyboard only. You can test the functionality by navigating the web page using the TAB key.
For additional information, see the WebAIM article: Keyboard Accessibility Techniques (http://www.webaim.org/techniques/keyboard/). In addition to more information about how people with different types of disabilities access the web without the use of a mouse, this article describes a workaround for Javascript DHTML menus.
HTML Elements Affected: N/A. This is more a page design issue than a coding issue.
Code Examples: N/A.