Site

Bug 64: Navigation — Mobile Menu Not Keyboard Accessible

WCAG 2.1.1 (Keyboard) | Hamburger menu only functional with mouse, no keyboard support.

Bug: Button Not Accessible

If the hamburger menu is implemented as <div> or <span> with onClick, keyboard users can't activate it with Enter or Space.

Bug: Menu State Not Announced
<!-- BUG: No indication of menu state --> <button class="hamburger">☰</button> <nav>...</nav> <!-- FIXED: HAL enhances with ARIA --> <button aria-expanded="false" aria-controls="mobile-nav">☰</button> <nav id="mobile-nav">...</nav>
Bug: Focus Trap Not Implemented

When mobile menu opens as modal overlay, focus should be trapped within the menu. Without focus management, keyboard users can tab outside the open menu.

Bug: No Close Button Keyboard Support

Mobile menus should close with ESC key for better keyboard navigation experience.

How HAL Fixes This: HAL ensures hamburger menu button is a proper <button> element with aria-expanded, aria-controls, and aria-label. HAL adds keyboard event handlers for Enter, Space (to toggle), and ESC (to close). HAL implements focus trap when menu is open, ensuring keyboard focus stays within the menu.