Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Navigation (primary)

OverviewStyleGuidelinesCodeAccessibilityDemos
ImplementationKeyboard interactionsFocus orderTouch targetsARIA Authoring Practices Guide (APG)Web Content Accessibility GuidelinesImplementationKeyboard interactionsFocus orderTouch targetsARIA Authoring Practices Guide (APG)Web Content Accessibility Guidelines

Implementation

  • If a primary navigation does not use the native <details>/<summary> elements, ensure aria-expanded is applied to the menu trigger element and respects its state
  • If an item in the menu is an icon, ensure the icon has an accessible name

Keyboard interactions

All elements of the primary navigation can be navigated with a keyboard.

A primary nav with each individual focusable element highlighted by a blue focus ring and the words 'tab' next to each.

Primary and utility menus can also be expanded or collapsed using the keyboard.

A primary nav with a dropdown trigger focused with the words 'Enter / Return / Space' next to it.
Key Result
Tab
  • Moves focus to the next interactive element
  • Moves focus inside of a menu
  • Collapses an expanded menu when focus leaves the expanded menu
Shift + Tab
  • Moves focus to the previous interactive element
  • Moves focus outside of a menu
  • Collapses an expanded menu when focus leaves the expanded menu
Enter/Return/Space
  • Expands or collapses primary or utility menus (when primary or utility menus have focus)
Enter/Return
  • Directs users to another page (when a link has focus)
Escape
  • Collapses an expanded menu and returns focus to the menu trigger element

Focus order

A logical focus order helps keyboard users operate our websites. Elements need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly.

A nav with numbers 1-12 showing focus moving from the top left to the bottom right in the correct sequence

Focus will move from the menu trigger element to the first interactive element inside of a menu when expanded.

A nav with the first menu expanded, showing the focus order going into the menu then back out in the correct sequence.

Touch targets

The large menu trigger element and spacing around links make them easy to select.

ARIA Authoring Practices Guide (APG)

Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences.

View APG resources

Web Content Accessibility Guidelines

Understanding documents provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria.

Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify