Navigation and Orientation

Navigation and Orientation is the least understood aspect of web accessibility for many web developers, but is the most important for providing people with disabilities equal access to electronic web materials. The ability of people with disabilities to navigate and orient to information on a web resource is not dependent on the graphical complexity, but on the underlying markup used to create the structure of the website. Therefore a page made up of only text content can be less accessible than a highly graphical website, if the graphical website contains structural elements and the text site uses only paragraph elements.

HTML Elements for Navigation and Orientation

Markup

Summary of Markup Associated with the Navigation and Orientation Best Practices
Markup Spec Best Practice
Sub-Category
Description
[accesskey] HTML4 Access Keys
  • Use the accesskey attribute to create keyboard short cuts to main content, search, main navigation bar and frequently used form controls
  • Accesskey characters should be unique on every web page
[alt] HTML4 Links
  • Any time an img or area element is used to create a link, the alt attribute content should not describe the image, but instead describe the target of the link.
[lang] HTML4 Language
  • The default language must be defined using the lang attribute on the html element.
  • The lang attribute can be used on almost all html elements to define the intended language of the text content of the element, and is used by assistive technologies to change the voice synthesis language.
  • Two-character character codes from a language value registry are used as the value of lang attribute.
[onclick] HTML4 onClick Event
  • onclick attribute is used to add interaction behaviors to web pages
  • onclick should only be used on elements that can receive input focus
[onmousedown] HTML4 onMouseDown Event
  • onmousedown event handlers are often used to create “drag and drop” user interface elements. The equivalent functionality provided by the “drag and drop” user interface must also be provided through a keyboard interface.
[onmousemove] HTML4 onMouseDown Event
  • onmousemove event handlers are often used to create “drag and drop” user interface elements. The equivalent functionality provided by the “drag and drop” user interface must also be provided through a keyboard interface.
[onmouseout] HTML4 onMouseOver Event
  • onmouseout event handler needs to have a corresponding onblur event handler
  • Elements that include a onmouseout event handler must be focusable
  • onmouseout event handlers that are for purely stylistic effects should us CSS :hover technqiues instead
[onmouseover] HTML4 onMouseOver Event
  • onmouseover event handler needs to have a corresponding onfocus event handler
  • Elements that include a onmouseover event handler must be focusable
  • onmouseover event handlers that are for purely stylistic effects should us CSS :hover technqiues instead
[onmouseup] HTML4 onMouseDown Event
  • onmouseup event event handlers are often used to create “drag and drop” user interface elements. The equivalent functionality provided by the “drag and drop” user interface must also be provided through a keyboard interface.
[xml:lang] xhtml Language
  • If an xhtml DOCTYPE is used the for the page, the xml:lang attribute should be defined to specify the default language, although at this point in time assistive technology does not use this information to change the voice synthesis language.
  • Two-character character codes from a language value registry are used as the value of xml:lang attribute.
a HTML4 Navigation Bar
  • The link text content should clearly indicate the target of the link
a HTML4 Links
  • It is critical that the text associated with the link clearly indicate the target of the link. Uninformative link text like “click here” or “more” should not be used.
    * The same link texts should not point to different web resources and different link texts should not point to the same web resource.
a[tabindex=-1] HTML4 Links
  • For Internet Explorer to move focus to internal links, the destination of the link needs to have a tabnindex value of -1
area HTML4 Navigation Bar
  • If area elements are used to create menu bars there needs to be redundent text links (a element) with the link text indicating the target of the link.
area HTML4 Links
  • Images that are samlled than 16×16 pixels are difficult for people to select with a mouse or other pointing device.
caption HTML4 Data Table
  • Use the caption element to provide a title for the data table
dd HTML4 Lists
  • A deinition item in a definition list
dl HTML4 Lists
  • The dl element can be used to create lists of definitions.
  • The dt element is used to itemize each term to be defined. One or more dd elements follow each dt element and provide definitions for the term.
dt HTML4 Lists
  • A term item in a definition list
embed HTML4 Media Objects
  • embed element is not part of the W3C HTML 4 specification, but is commonly supported in browsers
  • embed elements that support video with audio must have synchronized text captions
  • embed elements that support video must have descriptive audio
  • embed elements that support audio must have text transcripts
fieldset/legend HTML4 Form Controls
  • The content of the legend element is appended to label@s that are contained in the associated @fieldset element and is used to create unique labels for groups of form control.
frame[title] HTML4 Frame
  • title attribute should describe the purpose and contents of the frame
  • Hidden frames can be titled as “hidden 1”, “hidden 2”, “hidden 3,” etc.
h1 HTML4 Unique Title
  • h1 elements are used to describe sub page information and in some cases web site information
h2-h6 HTML4 Subheadings
  • h2-h6 elements provide information on the major and minor groups of information on a web page.
  • The headings should be used structurally and be properly nested.
  • Developers should think of headings as providing an outline or table of contens for the information on each web page.
h2-h6 HTML4 Navigation Bar
  • Heading content should indicate the relationship between the links in the navigation bar.
  • Menu bar heading should immediately preceed the list element container element
  • h2 is preferred heading element to label a navgation bar
  • h3-h6 elements can also be used for complex pages or navigation bars.
  • The headings should be used structurally and be properly nested with the web page and the navigation bar.
iframe[title] HTML4 Frame
  • title attribute should describe the purpose and contents of the iframe
img HTML4 Links
  • Images that are samlled than 16×16 pixels are difficult for people to select with a mouse or other pointing device.
img HTML4 Lists
  • Images should not be used to create the visual appearance of a list
  • Use CSS to create custom numbering or bullets for ordered and unordered lists
img[alt] HTML4 Unique Title

Using images to covery text content makes it difficult for people with visual impairments to restyle text content to their own needs, therefore images should not be used to style text content, use CSS instead.

input[title] HTML4 Form Controls
  • The title attribute can be used as an alternative to using the label element on form controls.
  • The use of the title attribute as a label is not considered a best practice, and should only be used when the off screen label element cannot be used.
input[type=button] HTML4 Form Controls
input[type=image] HTML4 Form Controls
  • The content of the alt attribute is used as the label for form controls of type image (i.e. input[type=“image’])
input[type=submit | reset] HTML4 Form Controls
input[type=text|password|radio|checkbox|file] HTML4 Form Controls
  • Every input element of ”type=text | password | radio | checkbox | file must have a label using the ref attribute labeling referencing technique.
  • When user input is validated, use client side scripting to filter characters to limit input to only valid characters to reduce the chance
label HTML4 Form Controls
  • The content of the label element is used to identify the purpose of the form control.
li HTML4 Lists
  • The li elements can be used with ol and ul markup to create ordered and unordered lists of information.
list-style CSS2.1 Lists
  • CSS can be used to create custom numbering or bullets for ordered and unordered lists
map HTML4 Navigation Bar
  • The map element can be used to create menu bar containers for navigation links, but it is difficult to style and not any better that using ul and ol elements.
object HTML4 Media Objects
  • object elements that support video with audio must have synchronized text captions
  • object elements that support video must have descriptive audio
  • object elements that support audio must have text transcripts
ol HTML4 Lists
  • The ol and li elements can be used to create ordered lists of information.
  • The default numbering of items in an ordered list uses decimal numbers starting from one (1).
  • The numbering style and current list number can be changed using the CSS list-style-type property. Possible values include decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian or none.
ol[value] HTML4 Lists
  • Defines the starting value for an ordered list
postion[absolute] CSS2.1 Linearization

The CSS position propert can be used in combination with the tr and td elements to layout blocks of content for a graphical rendering. The use of table markup for layout should be avoided in accessible design. Instead, CSS float and clear properties should be used for positioning blocks of content. If table markup is used for graphical layout, the markup should be restricted to the use of the tr and td elements. Other table elements including th element and summary attribute should not be used.

select HTML4 Form Controls
  • Every select element must have a label using the ref attribute labeling referencing technique.
select[onchange] HTML4 onChange Event
  • onchange event handler must not be used on select elements since the firing of the event commonly occurs when focus changes while viewing the options, this often results in people be redirected to other pages without their control.
table HTML4 Linearization

The table element can be used in combination with the tr and td elements to layout blocks of content for a graphical rendering. The use of table markup for layout should be avoided in accessible design. Instead, CSS float and clear properties should be used for positioning blocks of content. If table markup is used for graphical layout, the markup should be restricted to the use of the tr and td elements. Other table elements including th element and summary attribute should not be used.

table HTML4 Data Table
  • Use the table element to create tabular data tables
table[summary] HTML4 Data Table
  • Use the summary attribute to provide an overview of the data table
td HTML4 Data Table
  • Use the td element for table cells that are used for data
td[headers] HTML4 Data Table
  • Use the headers attribute to indicate header cells associated with a data cell in a complex data table
textarea HTML4 Form Controls
  • Every textarea element must have a label using the ref attribute labeling referencing technique.
th HTML4 Data Table
  • Use the th element for table cells that are used as headings within the data table
th[id] HTML4 Data Table
  • Use the id attribute to uniquely identify the headings in complex data tables
th[scope] HTML4 Data Table
  • Use the scope attribute to idenitfy a header as a row or column header
title HTML4 Unique Title

title elements are used to describe both web site and sub page information

ul HTML4 Lists
  • The ul and li elements can be used to create unordered lists of information.
  • The default rendering of an unordered list uses a solid black circle as the bullet for each item; this default can be modified to a variety of shapes including discs, circles and squares using the CSS list-style property.
  • Custom bullets can be defined using the CSS background-image property or the CSS list-style-image property.
ul, ol and li HTML4 Navigation Bar
  • Use ul, ol and li element to create containers for the navigation links