Accessible navigation

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 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:

1. 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...
2. 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:

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