navigation

Accessible navigation requires wrapping your navigation in a <nav> element with a unique aria-label, establishing clear landmarks for assistive technologies. This framework enforces consistent ARIA roles across primary navigation, breadcrumbs, and mobile menus.

Avoid role='menu' for website navigation and implement a disclosure-based dropdown pattern instead. The menu role is designed for application-like interfaces, whereas disclosure patterns provide proper keyboard support for standard navigation submenus.

Add skip links as the first focusable elements in your DOM, allowing keyboard users to bypass repetitive navigation and jump directly to main content. This framework provides patterns for implementing and managing skip link focus behavior.

During SPA route changes, announce the new page title and move focus to a target element so screen readers detect the navigation context shift. This framework provides specific guidance for managing focus and route announcements in single-page applications.

Apply aria-current to indicate the active page within breadcrumbs and pagination by setting its value to 'page' or 'location'. This framework ensures proper aria-current handling across all navigation patterns to help assistive technologies identify the user's current position.