Sign In / Sign Out
Navigation for Entire University
- ASU Home
- My ASU
- Colleges and Schools
- Map and Locations
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:
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.
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 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.
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.
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.
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.)
To come. (See more on ARIA landmark roles.)