home \| site index \| campus email
search

Web Accessibility - Priority 3

Web Accessibility: Priority 3

Web Accessibility: Navigation

Create Logical Tab Order

Use <TABINDEX> to define the logical order in which elements will receive focus when individuals use the keyboard to navigate the Web page.

For example:


            
            <FORM action="submit" method="post">
               
               <INPUT tabindex="2" type="text" name="lastname">

               <INPUT tabindex="1" type="text" name="firstname">

               <INPUT tabindex="3" type="submit" name="submit">


            </FORM>

Here, individuals using the keyboard to navigate will input their first name before their last name.

These elements support the TABINDEX attribute:

<A>
<AREA>
<BUTTON>
<INPUT>
<OBJECT>
<SELECT>
<TEXTAREA>

Provide Keyboard Shortcuts

Provide keyboard shortcuts so that users may combine keystrokes to navigate links or form controls on a page.

For example:


            
            <A accesskey="C" href="contents.html">Table of Contents</A>

Visually indicate an ACCESSKEY by underlining, bolding, or capitalizing the letter defined as the ACCESSKEY.

These elements support the ACCESSKEY attribute:

<A>
<AREA>
<BUTTON>
<INPUT>
<LABEL>
<LEGEND>
<TEXTAREA>

However, the ACCESSKEY is not widely used because of the following limitations:

Browsers have their own keyboard shortcuts; for example, Netscape assigns Alt+H to Help. Considering the number of browsers (Netscape, Internet Explorer, Lynx, Opera, pwWebSpeak, etc.), each with their own keyboard shortcuts, the list of shared, unassigned keyboard combinations is extremely limiting. The numbers 0-9 are probably the only safe ACCESSKEY combinations to use.

Web site developers feel there is no visually sensible way to inform visitors of keystrokes shortcuts.

The ACCESSKEY may work in an Intranet setting, i.e., within one organization where the platform and browser type are the same throughout.

Include Navigation Bars

Provide consistent navigation bars to assist users in moving about the site.

Skip Related Links

As navigation bars are generally at the top of the page, individuals using screen readers must listen to the navigation links before getting to the main content. Similarly, people using the keyboard must tab through the links to get to the main content. This can be time-consuming and repetitive.

Grouping related links into a unit (e.g., a navigation bar) enables a skip feature to be implemented by one of these methods:

Placing hypertext links at the beginning of related links (e.g., navigation bars) to enable users to "skip to main content" or "skip navigational links."

Using <MAP> to group links and identify the group with TITLE.

For example:


                  
                  <BODY>

                  



                  <MAP title="Navigation Bar" name="navbar">
                     
                     [<A href="#home">Bypass navigation bar</A>]

                     [<A href="p3navigation.asp">Home</A>]

                     [<A href="p3navigation.asp">Career Info</A>]

                     [<A href="p3navigation.asp">Jobs</A>]

                     [<A href="p3navigation.asp">Site map</A>]

                     
                  
                  <MAP>

                  



                  <h1><A name="home">Welcome to Career Corner!</A></h1>

                  



                  <!--main content of page-->

                  



                  </BODY>

produces the following:

[Bypass navigation bar] [Home] [Career Info] [Jobs] [Site map]

Provide Information about Document Collections

If the document (Web page) is part of a collection, provide information that identifies this document’s location within the collection. This can be achieved by:

Including a table of contents, site index, or site map.

Using page counters (e.g., page x of y) to indicate the position in relation to the whole set.

Using <LINK> with REL or REV to indicate the URL of the next and previous pages for extra navigation information.

For example, the <HEAD> of this chapter may include:


                     <LINK rel="Contents" href="toc.html">


                     <LINK rel="Question 12" href="q12.html">


                     <LINK rel="Question 14" href="q14.html">


                     <LINK rel="Glossary" href="glossary.html">


                     <LINK rel="Index" href="index.html">

The text-based browser Lynx will build a small menu of links at the top of the page that reads like this:

# Contents Question 12 Question 14 Glossary Index

Send feedback on this site to the web team