Ãå±±½ûµØ

Make navigation predictable and easy to use

Navigation helps people understand where they are, move around a site, and find what they need. For many users with disabilities, including people who use screen readers or keyboard-only navigation, poorly designed menus and page layouts can make a site hard or impossible to use.

Under the CSU Accessible Technology Initiative (ATI) and the ADA Title II web and mobile accessibility rule, Ãå±±½ûµØ web content must conform to WCAG 2.1 Level AA, which includes requirements for navigation and ways to bypass repeated content.

Quick checklist

• Provide a working “Skip to main content” link on every page.
• Keep navigation consistent across pages (same items, in the same order).
• Ensure menus and navigation items are keyboard accessible with a visible focus indicator.
• Use clear, descriptive link text for navigation items.
• Provide more than one way to find key content when possible (for example, navigation menu and search).

Skip navigation links

When navigating websites, many users with disabilities rely on keyboard-only navigation and assistive technologies. Without a way to bypass repeated content, they may have to tab through every link in the header and navigation on every page.

A skip navigation link (often called “Skip to main content”) lets users jump directly to the main content area of the page.

• The skip link should be the first focusable element on the page.
• It should become visible when it receives keyboard focus.
• It should move focus to a meaningful location (for example, the main content region or the first meaningful heading on the page).

These measures allow keyboard-only users and assistive technology users to skip repeated sections of content such as banners and navigation menus and move quickly to the information they need.

Consistent navigation and page structure

Consistent navigation helps users learn how your site works and reduces cognitive load.

• Use the same navigation menus in the same relative order on pages within a section of the site.
• Keep important links (for example, “ATI,” “Web Accessibility,” “Instructional Materials”) in predictable locations.
• Use descriptive headings and clear section labels so users can understand the structure of the page (see the Headings page).
• Ensure that the page’s main content region is clearly identified and appears early in the reading order.

Keyboard and menu behavior

Navigation menus must be usable by keyboard as well as by mouse or touch.

• Users should be able to tab to each menu item and open any submenus using the keyboard.
• Focus should move logically through navigation items, matching the visual reading order.
• Hover-only behavior (for example, menus that appear only on mouse hover) should be accompanied by a focus-based behavior for keyboard users.
• There should be a visible focus indicator on each link or button when it has keyboard focus.

For more details on keyboard requirements, see the Keyboard Accessibility page.

In-page navigation and landmarks

On longer pages, consider providing additional navigation tools to help users move through the content:

• An “On this page” outline that links to key sections.
• Clear headings (<h2>, <h3>, etc.) that define major sections and subsections.
• Semantic landmarks such as <nav>, <main>, <header>, <footer>, and <aside> where appropriate, so assistive technologies can identify page regions.

Link text for navigation

Navigation links should make sense on their own, without relying on surrounding text for context.

• Use descriptive link text, such as “Web Accessibility” or “Instructional Materials for Faculty and Staff,” instead of “click here.”
• Keep link text short but specific so that screen reader users can quickly skim through links.
• Make sure links with the same text lead to the same destination.

Related WCAG 2.1 criteria

• 2.4.1 Bypass Blocks (Level A): Provide a mechanism to bypass blocks of content that are repeated on multiple pages.
• 2.4.3 Focus Order (Level A): Focusable components receive focus in an order that preserves meaning and operability.
• 2.4.5 Multiple Ways (Level AA): More than one way is available to locate a web page within a set of pages.
• 2.4.7 Focus Visible (Level AA): Any keyboard-operable user interface has a mode of operation where the keyboard focus indicator is visible.

Before you publish

• Test the page with a keyboard only:
  • Tab through the page to ensure the skip link appears and works.
  • Confirm that all navigation items are reachable and focus order is logical.
• Verify that navigation menus and dropdowns work with both mouse and keyboard, including opening and closing submenus.
• Check that link text in navigation is descriptive and does not rely on context alone.
• Ensure that the same navigation patterns and labels are used consistently across related pages.

Related resources