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.
Techniques
If a web page is created using good semantic structure, especially page regions and headings, this helps screen reader users to quickly navigate to specific sections of content.
However, sighted users don’t typically benefit directly from page regions and headings unless they have installed browser extensions that provide this functionality. For sighted users who are navigating by keyboard, web pages should include the following feature.
“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 keyboard users to bypass navigation links and jump directly to the main content of the page.
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;
}
If a digital document is created using good heading structure, this helps screen reader users to quickly navigate to specific sections of content. In addition, PDF files include Bookmarks, which can facilitate navigate for all users.
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. For more details about tagged PDF, see Checking PDFs for accessibility page.
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.
WCAG 2.1 success criteria
The issues described on this page, and associated Techniques pages, map to the following success criteria in the W3C’s Web Content Accessibility Guidelines (WCAG) 2.1:
- 2.4.1 Bypass Blocks (Level A)