Site Navigation Bar Keyboard Accessible
Critical - WCAG Level A
What is the issue:
The site navigation bar is not fully operable via keyboard — interactive items are implemented in a way that prevents keyboard focus or activation (for example, using <div> or <span> with onclick handlers, or relying on CSS :hover to reveal submenus). This breaks the WCAG 2.1.1 Keyboard requirement that all functionality must be operable via keyboard alone.
Why it matters:
Keyboard-only users include people who cannot use a mouse (motor disabilities), people who rely on switch devices, and many screen reader users. If navigation cannot receive focus or cannot be opened/activated using keys like Tab, Enter, Space, or Arrow/Escape where expected, these users cannot reach content or complete tasks.
How to fix it:
Use semantic, focusable elements (anchor <a href> for navigation links and <button> for toggles).
Ensure interactive controls are reachable in the tab order (native elements do this by default) and expose state with ARIA (e.g., aria-expanded, aria-controls).
Do not rely only on CSS :hover to expose submenus — provide keyboard-accessible toggles and ensure submenu items are in DOM and focusable (use anchors or tabindex="0" for custom elements). Implement keyboard event handlers to activate controls with Enter and Space, and to support expected navigation keys (Esc to close, Arrow keys for menu navigation if a complex menu pattern is used).
Manage focus appropriately: move focus into opened menus when they appear and return focus when closed.
Best practices:
Prefer native semantics over ARIA, follow WAI-ARIA Authoring Practices for complex menus (menu button, menubar patterns)
Keep logical tab order, maintain visible focus styles
Avoid tabindex > 0
Ensure aria-hidden is not used to hide focusable content
Common mistakes:
Using non-focusable elements (div/span) for actions
Relying solely on hover
Adding onclick without key handlers
Misusing role="menu" without implementing keyboard behavior
Removing focus outlines via CSS.
These lead to inaccessible navigation for keyboard and assistive technology users.