Improve top bar menu navigation for keyboard and screen reader users

SableRaf commented 1 year ago

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

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

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.

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

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

SableRaf commented 1 year ago

@kushalnl7 you may be interested in this issue :)

kushalnl7 commented 1 year ago

Yes, I will look into this!

SableRaf commented 1 year ago

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 1 year ago

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 1 year ago

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.

OsirisMedici commented 1 year ago

@SableRaf Can you assign this issue to me Please?

processing / processing-website