Accessible site navigation

What this demonstrates

The pattern uses real links inside a nav region. It does not apply desktop application menu roles to ordinary site navigation.

Pattern anatomy

The brand is an ordinary link to the home page. The primary links are grouped inside a nav element with the accessible name “Primary,” which distinguishes this group if a page later gains footer or breadcrumb navigation. Link order in the source matches the visual order, so keyboard and screen-reader users encounter the same sequence.

The example does not add role="menu", menuitem, arrow-key behavior, or a roving tab index. Those patterns belong to application-style menus with a specific interaction contract. A website’s primary navigation is normally a list of links that works with Tab, Shift+Tab, Enter, browser history, and link context menus.

Keyboard notes

Tab follows source order. Enter follows a link. Focus remains visible against the page background. No script is needed for the displayed layout.

Test focus in both directions. Start in the browser chrome, press Tab until the brand and each navigation link receive focus, then use Shift+Tab to return. Focus should never disappear behind the header or rely on color alone.

Adapting the pattern for small screens

Try wrapping the links before introducing a disclosure button. A short set of three or four destinations often fits naturally when the header can grow in height. If the links genuinely need to collapse, use a real button with an accessible name, update aria-expanded, and connect it to the controlled navigation with aria-controls.

When the collapsed panel is closed, its links must not remain visible to assistive technology or reachable by keyboard. When it opens, focus can remain on the disclosure button; the next Tab should move into the first link. Escape support is useful for an overlay treatment, but it does not replace an obvious close control.

Common extension risks

A small-screen toggle must be a button with an accurate expanded state. Hidden links must not remain keyboard reachable.

Other common regressions include replacing anchors with clickable div elements, removing focus outlines, using vague labels such as “More,” and marking every navigation region simply as “Navigation.” Keep the smallest semantic contract that fully describes the interaction.

Verification checklist

• Every destination is a real anchor with a useful href.
• The primary region has a name that remains clear alongside other navigation.
• Link order is logical without CSS and matches the visual layout.
• Focus is visible in light, dark, high-contrast, and zoomed presentations.
• The layout reflows without horizontal scrolling at 320 CSS pixels.
• The current page, if identified, is not communicated by color alone.

License

The example is available for reuse under the project’s published terms.