Guide to Building an Accessible Website Menu (WCAG 2.2)

Accessible navigation is the backbone of a usable website. An inaccessible menu can prevent users with disabilities from accessing any other part of your site. This guide provides a step-by-step approach to creating a responsive navigation menu that is perceivable, operable, understandable, and robust for all users.

1. Design and Visuals (Perceivable)

Before writing any code, the visual design must be accessible.

Color Contrast (WCAG 1.4.3, 1.4.11)

  • Text vs background contrast ratio ≥ 4.5:1 (normal text) or ≥ 3:1 (large text)
  • Focus indicators (e.g., outline, underline, background change) must meet 3:1 contrast ratio
  • Don’t rely on color alone → use icons, underline, or bold for active/selected states

Touch Targets (WCAG 2.5.5)

  • Interactive elements (menu items, hamburger icon) must have ≥ 24px by 24px touch area for mobile version

Responsive Behavior (WCAG 1.4.10)

  • Desktop: Horizontal menubar with dropdowns
  • Mobile: Collapsible hamburger menu
  • Menus must reflow correctly at zoom up to 400%

2. Keyboard Usability (Operable)

All menu functionality must be operable with a keyboard alone. Users must be able to perform every action a mouse user can.

Standard Interaction Pattern

  • Tab / Shift + Tab: Moves between top-level items and into submenu links
  • Enter or Space: Opens submenu or activates link
  • Arrow Keys (Up, Down, Left, Right): Navigate between items, this is a best practice for complex menus
  • Escape: Closes the currently open submenu and returns focus to the button that opened it

Key Principles

  • No Keyboard Traps (WCAG 2.1.2): A user must be able to navigate into and out of the menu using only the keyboard. They should never get "stuck." The one exception is for open modal dialogs (like a full-screen mobile menu), where focus should be trapped intentionally until the user closes it.
  • Logical Focus Order (WCAG 2.4.3): The focus should move through the menu items in a logical and predictable order.

3. Screen Reader & Assistive Technology (Understandable & Robust)

Correct HTML and ARIA attributes are essential for screen reader users to understand the menu's structure and state.

Semantic HTML

  • <nav>: Defines the container as a primary navigation block.
  • <ul>: An unordered list to group the menu items
  • <li>: A list item for each individual menu link

ARIA Roles, Properties, and States

  • role="menubar": container for menu
  • role="menuitem": each actionable item
  • role="menu": submenu container
  • role="navigation": identify menu region
  • aria-hidden="true": To hide content for screen reader and Assistive Technology
  • aria-haspopup="true": Placed on the <button> that controls a dropdown. It tells screen readers, "This button opens a menu."
  • aria-expanded="true/false": Also on the <button>. This communicates the state of the submenu—false for closed, true for open. JavaScript is required to toggle this value.
  • aria-controls="ID_of_submenu": Placed on the <button>, it programmatically links the button to the <ul> submenu it controls. This helps assistive technology understand the relationship.
  • aria-label="Mobile Menu": Placed on the hamburger <button>. Since the button often has no visible text, this provides its accessible name