- The layout of elements on a website should be consistent on every page.
- Provide descriptive, unique page titles.
- Use properly nested headings to structure your document.
- Provide a skip-to-content link at the top of the page.
- Write meaningful link text.
- Use ARIA landmarks where no equivalent HTML element is available.
- Menus should be accessible and consistent throughout the website.
- Provide a sitemap.
Users employ a variety of methods to navigate a website. People with assistive devices use the page title, "Skip to main content" links, heading lists and shortcuts, lists of all the links on a page, HTML5 and ARIA landmarks, menus and sitemaps to give them information about the page and help them navigate it.
Navigating an unfamiliar website can be challenging for anyone, but it is especially difficult when the layout changes from one page to the next. For users with impairments, inconsistent page layouts can make navigating a site frustrating and even impossible. Users on screen readers benefit greatly when the layout of a website remains the same on every page--with the header, menus, search box, sidebar, footer and other important elements in the same position on each page.
Provide descriptive, unique page titles. The <title> element is placed inside the <head> of the page. Although it is not displayed on the page, it is the document title and is displayed above the browser address bar or in tabs, in favorites, and by search engines. In most cases the <title> is the same as the page's <H1> element. (For instance, Drupal uses the page <H1> to auto-populate the <title>.)
As the first thing screen readers read, page titles should be brief, clear and informative. Page titles should identify the page content and distinguish it from other pages to minimize confusion and prevent users from getting lost on the site.
Headings are about logical structure, not visual effects. Consider these two lists. In the first, the six items appear to be cities:
In the second, the six items appear to be two states with two cities under them:
HTML headings convey meaning, but only if the text is properly marked up:
- don't use bold in place of a heading (it may look like a heading, but it has no meaning)
- don’t skip a level (e.g., don't use an H3 after an H1)
- don't use headings based solely on their visual appearance (instead, use CSS to alter the look of headings)
Screen readers can generate browsable lists of headings, providing users who are blind with a mental picture of the structure of a page and helping them find content more quickly. Additionally, automated search and analysis engines use heading information to construct an index of a page's contents. For sighted users headings are also important--large blocks of text without headings appear dense and daunting, and many users will simply skip over them.
Example of using headings to organize content and make text more approachable.
There are six levels of headings in HTML: H1-H6. Every page should have one (and only one) H1. Section headings (H2-H6) are used to organize content and should be hierarchical--that is, H2 headings are the second most important heading, while H3 headings are subsets of H2 headings, etc.
An example of properly nested headings:
<h1>Title of the Page</h1>
A skip-to-content link allows users of assistive technology to bypass all site navigation and proceed directly to the page content. Place a skip link so it's one of the first elements a screen reader or keyboard-only user comes to on the page. The link text ("Skip to main content" or something similar) should clearly indicate where the link takes the user. The link target should be the beginning of the page's main content.
If you don't like the look of the skip link, hide it with CSS.
Meaningful link text
Screen readers are able to create lists of the links found on a page. Write descriptive text links that will make sense when taken out of context. See more in the guidelines on links.
Document landmark roles
Document landmark roles are an ARIA specification that alert a screen reader user to the major geographic regions on a webpage. See more information on the WAI-ARIA page.
Make sure the current page’s menu item is clearly indicated, as is the link that has focus. Screen reader and keyboard users or people with some cognitive or neurological limitations benefit by knowing which link has focus.
Ensure that links are large enough to tap on. Users with fine motor difficulties and those using touch screens need large buttons or links that are easy to click.
Provide a sitemap. A sitemap outlines the contents and organization of a site. As an overview of the entire site, it helps users understand what content is available on a site and can function as an alternative for complicated or difficult to use navigation menus.
How to test
Visit pages from every section of the site. Are common elements and features in the same location on every page? Check every feature and element that occurs on most pages: header, "skip to main content" link, search box, primary navigation menu, secondary navigation menu, sidebars, footers and other elements.
Ensure the page title is brief, clear, informative and unique.
- Firefox Web Developer and Chrome Web Developer
- Information > View Document Outline
- Outline > Show Element Tag Names, then Outline > Outline Headings
- Chrome WAVE extension
- WAVE marks all headings with their heading level.
- Internet Explorer Web Accessibility Toolbar
- Structure > Heading Structure
- Structure > Headings
Skip to main content links
Tab to the "Skip to main content" link. Check that it has focus, then press the Enter key to ensure it "jumps" to the main content.
Meaningful link text
Tab through the page and ensure that the destination of every link is clear from its link text, even if the link was removed from the content. (See more on accessible links.)
Document landmark roles
To come. (See more on ARIA landmark roles.)
- Ensure the menu is keyboard accessible:
- Tab through the menu using the tab, shift+tab and right and left arrow keys.
- Ensure that submenus open on focus (by pressing the tab, enter or down arrow keys or the spacebar) and that submenus close and focus is restored to the parent menu when focus leaves the submenu (by pressing the escape, up or tab key).
- Test that submenus can be navigated using tab, shift+tab, or up and down arrow keys.
- Check that links are large enough to be easily clicked.
- Ensure that the current page’s menu item is indicated and that each link has focus as you tab through.
- Check that the site contains a sitemap and a link to the sitemap exists on every page listed in the sitemap.
- On the sitemap, check that each link leads its target page.
Relevant W3C WAI documents
- WCAG 2.1 Guideline 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
- How to Meet WCAG 2.1 Guideline 1.3.1
- WCAG 2.1 Guideline 1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
- How to Meet WCAG 2.1 Guideline 1.3.2
- WCAG 2.1 Guideline 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
- How to Meet WCAG 2.1 Guideline 2.4.1
- WCAG 2.1 Guideline 2.4.2 Page Titled: Web pages have titles that describe topic or purpose.
- How to Meet WCAG 2.1 Guideline 2.4.2
- WCAG 2.1 Guideline 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
- How to Meet WCAG 2.1 Guideline 2.4.4
- WCAG 2.1 Guideline 2.4.5 Multiple Ways: More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.
- How to Meet WCAG 2.1 Guideline 2.4.5
- WCAG 2.1 Guideline 2.4.6 Headings and Labels: Headings and labels describe topic or purpose.
- How to Meet WCAG 2.1 Guideline 2.4.6
- WCAG 2.1 Guideline 3.2.3 Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.
- How to Meet WCAG 2.1 Guideline 3.2.3
- WCAG 2.1 Guideline 3.2.4 Consistent Identification: Components that have the same functionality within a set of Web pages are identified consistently.
- How to Meet WCAG 2.1 Guideline 3.2.4