processing/processing-website

Improve top bar menu navigation for keyboard and screen reader users

Opened this issue · 6 comments

SableRaf commented

The top bar of the Processing website's dropdowns are not properly accessible for keyboard and screen reader users.

Current behavior

  • Tabbing through the top bar menu gives limited information about the nature and state of dropdown buttons.

Desired behavior

  • When tabbing through the menu, screen reader should announce "[button name] menu button collapsed submenu."
  • When pressing enter, screen reader should announce "expanded" and actually expand the submenu.

This can be achieved using aria-expanded and aria-controls.

Example

A good example of an accessible menu with dropdowns can be found here: https://www.audioeye.com/consultants/

References

Further information about dropdown accessibility can be found here: https://accessuse.eu/en/drop-down-menus.html

SableRaf commented

@kushalnl7 you may be interested in this issue :)

kushalnl7 commented

Yes, I will look into this!

  • ❤️1
SableRaf commented

Great! Thanks @kushalnl7 ✨

FYI: I have used the NVDA screen reader in my tests. It is Free and Open Source and you can find it here: https://www.nvaccess.org/download/

OsirisMedici commented

Hello Maintainers, I am interested in assisting with the current issue at hand.

I was wondering if anyone is already working on it, or if it is okay for me to start working on it.
Please let me know how I can be of help.

SableRaf commented

Hello @abhishekhvr and thanks for your offer to help! Let's see if @kushalnl7 is still interested. Otherwise I'm happy to assign this to you.

  • ❤️1
OsirisMedici commented

@SableRaf Can you assign this issue to me Please?

  • 👍1