Accessible navigation

Basics

Page layouts should be consistent across a site or course.
Make sure menus are accessible and predictable.
Provide descriptive, unique page titles.
Make sure websites have a sitemap.
Use properly nested headings to structure your document.
Write meaningful link text.
Use same-page links for lengthy pages.

In-depth

People employ a wide variety of methods to navigate sites and courses. Help your users orient themselves by sticking to consistent layouts and navigation menus; unique and descriptive page titles; and sitemaps on websites.

In addition, people find that "Skip to main content" links, meaningful link text, and same-page links help them navigate a page more quickly. Finally, with a single keystroke, screen reader users are able to generate lists of all the headings, links, and HTML5 landmark regions on a page to quickly navigate to the information they need--as long as we create them properly.

Consistent layouts

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.

Accessible, predictable menus

Menus should be consistent (and consistently located) across all pages of a site or menu. Curate your navigation links carefully, grouping similar items, removing unnecessary items, and renaming confusing items.

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.

Clear, unique page titles

Provide descriptive, unique page titles. In most cases, page titles are used to auto-populate an invisible <title> element, which is displayed in tabs, in bookmarks and favorites, and by search engines.

Page title displayed in browser tab

Page titles are the first thing screen readers announce, so make them brief, clear and informative. They should identify the page content and distinguish it from other pages to minimize confusion and prevent users from getting lost on a site or course. (See WCAG 2.4.2 Page Titled for more.)

Use headings for logical structure

Headings organize and structure the content on a page. For sighted users, headings break up dense walls of text into smaller, more manageable chunks.

Screen readers can generate 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. Even automated search and analysis engines need headings--to construct an index of a page's contents.

See more in the guide on headings.

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 guide on links.

Same-page links

Same-page links allow for quick and easy navigation of long pages. An alternative is to chunk content into shorter pages..

Create same page links with these two steps:

Add an anchor to each heading on the page, for example:
<h2><a id="geography" name="geography" ></a>Geography</h2>
Content...
<h2><a id="history" name="history"></a>History</h2>
Content...
<h3><a id="early-history" name= "early-history" ></a>Early History</h3>
Content...
Create anchor links (usually in a list near the top of the page):
<a href="#geography">Geography</a>
<a href="#history">History</a>
<a href="#early-history">Early History</a>

"Return to top" links

To add "Return to top" links throughout long pages:

Place an empty (will be hidden) top anchor at the very top of the page:
<p><a id="top" name="top" ></a></p>
Add a "Return to Top" link at the end of each section (before the next heading):
<p><a href="#top">Top</a></p>

Course structure and navigation

In Canvas, create a home page with clear instructions for students on where to go and what to do next.
Keep page layouts simple and clean.
Use predictible navigation menus throughout the course to help students orient themselves and direct them to the most important information and next steps. In Canvas, prune unnecessary sidebar navigation links and order them by importance.
Break the course into modules by topic or class session, and keep content organized by module. Give modules unique, descriptive names (e.g., “Week 3: Algorithms” rather than “3”) so they're easier for students (and you) to locate.

Accessible, predictable menus

Menus should be visible to users with screen readers and should function using the keyboard only. Fly-out and drop-down menus must be activated on keyboard focus and should remain open until focus has left the submenu. (See the Javascript guidelines for more information.) Users with fine motor difficulties and those using touch screens need menus that don't disappear immediately after the mouse has left the submenu.

For mobile devices, make sure 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.

Skip-to-content links

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.

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.

Sitemaps

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.

Clear, unique page titles

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>.)

Page title displayed in browser tab

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.

How to test

Consistency

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.

Page title

Ensure the page title is brief, clear, informative and unique.

Headings

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.)

Accessible menus

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.

Sitemap

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