Navigation and Orientation Best Practices

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

title and h1 elements

Use to provide a unique title for each web resource in a web site.

h2, h3, h4, h5 and h6 elements

Headers are used to indicate major/minor topics in a web resource.

ul, ol and li elements

Use to indicate navigation bars when used in conjunction with the h2 element.

Use to indicate ordered and unordered lists of items (you can use the CSS list-style property to change the formatting of bullets and numbering).

dl, dt and dd elements

Use to indicate lists of related items that have multiple descriptors, like the multiple definitions of a word in a dictionary or the time, location, and date of a meeting.

label element, label:for attribute, input:id attribute and textarea:id attribute

Use to provide an association between form controls and their text labels.

fieldset and legend elements

Use to provide a label that describes the relationship between a group of form controls.

th element, td:id attribute, th:headers attribute and table:summary attribute

Use to associate header cells (th) with a data cell (td) and provide information about the contents of a data table.

lan and xml:lang attributes

Use markup to indicate changes in language so speech technologies can automatically change pronunciation to the specified language