Skip to main content

Accessibility UI Guidelines: Navigation

Navigation

3.3 Navigation Menus

Navigation menus are essential components of a website, providing users with a way to explore and interact with the site’s content. Ensuring that navigation menus are accessible is critical to creating an inclusive experience for all users, including those with disabilities or relying on assistive technologies.

3.3.1 Semantic Markup

Use semantic HTML elements to structure navigation menus. The <nav> element should wrap the menu, and <ul> and <li> should be used for the list structure.

<!-- Accessible Navigation Menu -->
<nav aria-label="Main Navigation">
    <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

3.3.2 Keyboard Accessibility

Ensure that navigation menus are fully navigable using the keyboard. Users should be able to tab through menu items and activate them using the Enter or Space keys.

<!-- Example of a Keyboard Accessible Menu -->
<nav aria-label="Main Navigation">
    <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

3.3.3 ARIA Roles and Attributes

Use ARIA roles and attributes to enhance the accessibility of menus, especially for complex or custom implementations. For example, use role="menu" and role="menuitem" for custom dropdown menus.

<!-- Example of ARIA Roles in a Dropdown Menu -->
<nav aria-label="Main Navigation">
    <ul role="menu">
        <li role="menuitem"><a href="/home">Home</a></li>
        <li role="menuitem"><a href="/about">About</a></li>
        <li role="menuitem"><a href="/services">Services</a></li>
        <li role="menuitem"><a href="/contact">Contact</a></li>
    </ul>
</nav>

3.3.4 Responsive Design

Ensure that navigation menus are responsive and adapt to different screen sizes. For mobile devices, consider using hamburger menus or collapsible menus with accessible controls.

<!-- Example of a Responsive Menu -->
<nav aria-label="Main Navigation">
    <button id="menuToggle" aria-expanded="false" aria-controls="menu">Menu</button>
    <ul id="menu" hidden>
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>


// Toggle the menu visibility on button click
const menuToggle = document.getElementById('menuToggle');
const menu = document.getElementById('menu');

menuToggle.addEventListener('click', () => {
    const expanded = menuToggle.getAttribute('aria-expanded') === 'true';
    menuToggle.setAttribute('aria-expanded', !expanded);
    menu.hidden = expanded;
});

3.3.5 Dropdown Menus

Implement dropdown menus with proper ARIA roles and keyboard navigation support. Ensure that dropdowns are accessible to screen readers and can be operated using the keyboard.

<!-- Dropdown Menu Example -->
<nav aria-label="Main Navigation">
    <ul>
        <li>
            <button aria-expanded="false" aria-controls="servicesMenu">Services</button>
            <ul id="servicesMenu" hidden>
                <li><a href="/web-design">Web Design</a></li>
                <li><a href="/seo">SEO</a></li>
                <li><a href="/marketing">Marketing</a></li>
            </ul>
        </li>
    </ul>
</nav>


// Toggle dropdown visibility
const dropdownButton = document.querySelector('button[aria-controls="servicesMenu"]');
const dropdownMenu = document.getElementById('servicesMenu');

dropdownButton.addEventListener('click', () => {
    const expanded = dropdownButton.getAttribute('aria-expanded') === 'true';
    dropdownButton.setAttribute('aria-expanded', !expanded);
    dropdownMenu.hidden = expanded;
});

3.3.6 Visible Focus Indicators

Provide visible focus indicators for menu items to help keyboard users identify their current position within the menu.

/* Focus Styles for Menu Items */
nav a:focus {
    outline: 2px solid #005fcc;
    background-color: #e0f0ff;
}

3.3.7 Testing Navigation Menus for Accessibility

Test navigation menus with assistive technologies and automated tools to ensure they are accessible. Verify that focus management, keyboard navigation, and ARIA attributes work as intended.

// Test Checklist
// - Verify all menu items are keyboard accessible.
// - Check screen reader announcements for menu items and dropdowns.
// - Ensure visible focus indicators are clear and consistent.
// - Validate responsive behavior for mobile menus.

Best Practices for Navigation Menus

  • Use Semantic HTML: Implement navigation menus with <nav>, <ul>, and <li> for clear structure.
  • Ensure Keyboard Accessibility: Make all menu items and dropdowns operable using only a keyboard.
  • Provide ARIA Attributes When Necessary: Use ARIA roles and attributes to enhance the accessibility of custom navigation menus.
  • Design for Responsiveness: Ensure menus adapt to different screen sizes and provide accessible controls for mobile navigation.
  • Include Visible Focus Indicators: Highlight the currently focused menu item for better usability.
  • Test Thoroughly: Regularly test navigation menus with assistive technologies and automated tools to identify and fix any issues.