How We Improved the Accessibility of Our Single Page App Menu

Building an accessible main menu for a React PWA using React Router presented unexpected challenges. This article details our journey toward creating a keyboard- and mouse-friendly menu, focusing on overcoming common accessibility pitfalls in single-page applications (SPAs).

Our goal was a menu navigable via keyboard and mouse, allowing users to tab through top-level and sub-menu items (revealed on hover/focus), with clear focus indicators.

Initial attempts using CSS visibility to show/hide sub-menus failed for keyboard users, as focused elements with visibility: hidden remain invisible. We switched to manipulating the position property:

.menu-item {
  position: relative;
}

.sub-menu {
  position: absolute;
  left: -100000px; /* Off-screen positioning */
}

.menu-item:hover .sub-menu,
.menu-item:focus .sub-menu,
.menu-item:focus-within .sub-menu {
  left: 0;
}

This improved keyboard navigation, but introduced a new problem: the menu remained open after selection (click or tab). This was because the selected item retained focus, and SPAs don't trigger a full page reload to clear focus. Additionally, the "Jump to Content" link became inaccessible via keyboard after menu interaction.

Our first attempt to solve this involved using document.activeElement.blur() within the onClick handler of React Router's Link component:

const clearFocus = () => {
  document.activeElement.blur();
};

While this closed the menu after clicks, it didn't resolve the keyboard navigation issue or maintain the expected "Jump to Content" link behavior.

To address this, we programmatically forced focus to an invisible, non-interactive anchor element placed above the "Jump to Content" link in the DOM:

const App = () => {
  const focusResetRef = React.useRef();
  // ... other code ...
  return (
    
      <a aria-hidden="true" href="https://www.php.cn/link/7c127e0c66f06e58c7c7310a7c6fa488" ref="{focusResetRef}" tabindex="-1" style="{{" position: top:>Focus Reset</a>
      <a classname="jump-to-content-a11y-styles" href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">Jump To Content</a>
      <menu onselectmenuitem="{handleResetFocus}"></menu>
      {/* ... rest of app */}
    &gt;
  );
};

This ensured that after menu selection, the next tab stop was the "Jump to Content" link. The aria-hidden, tabIndex, and styling ensured the element remained invisible and non-interactive except for programmatic focus.

To further enhance the user experience, particularly for mega menus, we added a clearHover state and a timeout to immediately clear the hover state after selection, ensuring the menu closes consistently regardless of input method.

Our final implementation uses a React Context for easier management across components. While we lack real-world user data yet, our solution provides a consistent and accessible experience for both keyboard and mouse users in our SPA, mimicking the behavior of a full page reload. We welcome feedback on this approach.

The above is the detailed content of How We Improved the Accessibility of Our Single Page App Menu. For more information, please follow other related articles on the PHP Chinese website!