processing / processing-website

Repository for the processing.org website
https://processing.org
GNU General Public License v2.0
64 stars 95 forks source link

Screen reader friendly top-bar links #425

Closed SableRaf closed 1 year ago

SableRaf commented 1 year ago

Lighthouse has identified that the links in the top bar on the Processing website do not have discernible, unique, and focusable link text.

Fixing this will make the website more accessible to users who rely on screen readers to navigate the web.

Proposed solution

Adding <title> and <desc> elements to the SVGs.

Source: https://stackoverflow.com/a/62831018/2126791

Lighthouse report

Here is a screenshot of the Lighthouse report:

image

kushalnl7 commented 1 year ago

Hello @SableRaf , can you please assign this to me?

SableRaf commented 1 year ago

Sure @kushalnl7! Thanks for your contribution :)

kushalnl7 commented 1 year ago

I have raise a PR - #429 for this issue. Please review it.

SableRaf commented 1 year ago

Thanks @kushalnl7 ✨ While reviewing your PR, I found there is a span element with Topbar-module--name--4+Tmy class that does get picked up by screen readers so the title element is redundant. Very sorry for that!

My tests also showed that the dropdown menus are not fully optimized for screen readers so this was still useful! I will create a new issue regarding the dropdowns and maybe you'll be interested to look into that? Thanks again for your efforts!