Overview
People with perfect vision can quickly glance at the layout of a web page or document and typically find the content they’re looking for based on visual cues. If they’re able to use a mouse, they can easily click on a link or other control anywhere on the visible page. However, other users, including screen reader users, people using screen magnification, and people who navigate by keyboard, are unable to find and jump to content with similar ease unless the page is coded properly. There are a variety of methods for making websites and digital documents easy for users to navigate.
Navigation on Webpages
Page regions
Explicitly identifying common regions of a web page (e.g., banner, navigation, main content, sidebar, footer) helps screen reader users to easily jump directly to those regions, and contributes to users’ understanding of the overall structure of the page.
Good structure
Headings and subheadings should provide an outline of page content, so users can understand how the page is structured, and can easily navigate between sections. Similarly, any content that might be described as a list of something should be coded using HTML list elements. Overall, using HTML semantic elements (i.e., the appropriate HTML tag to communicate what an element is) helps to make websites more predictable and easy to navigate, especially for assistive technology users and keyboard users.
“Skip to main content” links
A “skip to main content” link is a same-page link that targets the id of an HTML element containing the main content. This enables screen reader users, keyboard users, and screen magnification users to bypass navigation links and jump directly to the main content of the page. The benefits for screen reader users are minimal if the other techniques described on this page are used. However, these links are still helpful for keyboard users and screen magnification users, since browsers don’t natively support jumping to ARIA landmarks or headings in the same way that screen readers do.
A common practice is to position the “Skip to main content” link in the top left corner of the page but visibly hide it by positioning it off-screen using CSS, then make it visible on :focus so it appears immediately after users press the Tab key. The following CSS code could be used to accomplish this:
#skip a
{
position:absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
#skip a:focus
{
position: static;
width: auto;
height: auto;
}
Navigation in Documents
Headings
Headings and subheadings play a key role in navigation and should form an outline of the page content. This enables screen reader users to understand how the page is organized, and to quickly navigate to content of interest. Most screen readers have features that enable users to jump quickly between headings with a single key-stroke.
Bookmarks in PDF
PDF files should have bookmarks for lengthy documents. These enable all users to efficiently jump to a particular chapter or major section. Before adding bookmarks to a PDF, be sure the document is tagged and has a good heading structure, as described above.
After you have a tagged PDF with good structure, select Bookmarks from the Navigation Pane in Adobe Acrobat Pro. Then select “New Bookmarks from Structure…”. A dialog will appear showing the various structural elements that are used in the document. Select H1, H2, and additional levels of headings if desired. When deciding on an appropriate level of detail within your Bookmarks, try to balance the need for navigation with the need for simplicity. Keep in mind the more bookmarks you have, the longer it will take for screen readers to read through them.
