Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Main menu accessibility #508

Open
fschroiff opened this issue Jan 27, 2025 · 0 comments
Open

Main menu accessibility #508

fschroiff opened this issue Jan 27, 2025 · 0 comments

Comments

@fschroiff
Copy link

Describe the bug
Slack discussion

The main menu implements a creative solution for keyboard accessibility. It is not very discoverable though and inaccessible for screen reader users.

To Reproduce
Steps to reproduce the behavior:

  1. Go to fronteers.nl on desktop
  2. Tab to the main menu
  3. Using left and right arrow keys you can jump between main menu items
  4. Using up and down arrow keys you can go into the sub-menus

Expected behavior
Good examples for accessible keyboard nav with drop downs:
https://a11y-collective.github.io/demos/en/advanced-accessible-components/components/navigation/navigation.html
https://www.eur.nl/

  • everything accessible by tab
  • the "open dropdown" action is triggered by activating a button
  • you can tab through the open submenu
  • tabbing out of the submenu closes it (tab & shift-tab)
  • esc also closes the open submenu
  • the submenu trigger has an aria-label of "Submenu of [xyz]" and an aria-expanded attribute
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant