Accessible Navigation

Use the <nav> element with an aria-label to identify navigation regions. Use semantic list structure (<ul> and <li>) for menu items. This provides built-in semantics that screen readers understand. The aria-current="page" attribute indicates the current page in navigation.

When you need custom navigation that doesn't use semantic HTML, use role="navigation" with aria-label to identify the navigation region. Use role="list" and role="listitem" for menu items. Ensure keyboard navigation is implemented manually. This approach should only be used when semantic HTML navigation is not feasible.

Breadcrumbs provide navigation context and help users understand their location. Use <nav aria-label="Breadcrumb"> with an ordered list (<ol>). The last item represents the current page and should not be a link. Use aria-current="page" on the current page item. Separators between items should be hidden from screen readers using aria-hidden="true".

Skip links allow keyboard users to bypass repetitive navigation and jump directly to main content. They should be the first focusable element on the page, visible when focused, and hidden otherwise. Use position: absolute with negative positioning to hide them visually, then move them into view on focus. The target should have a matching id and receive focus when the skip link is activated.

Mega menus are large dropdown menus with multiple columns of links. Use proper ARIA attributes: aria-expanded on the trigger button, aria-controls to link trigger to menu, and aria-haspopup="true". The menu should be keyboard accessible with Arrow keys for navigation and Escape to close. Focus management is critical - trap focus within the menu when open.

Tabs use the ARIA tabs pattern. Each tab panel should have a corresponding tab button. Use role="tablist", role="tab", and role="tabpanel". The active tab should have aria-selected="true" and others should have aria-selected="false". Use aria-controls to link tabs to panels. Keyboard navigation: Arrow keys move between tabs, Enter/Space activates, Home/End jump to first/last tab.