Screen reader friendly top-bar links

Question

Screen reader friendly top-bar links

Closed this issue 2 years ago · 4 comments

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:

Answer 1 · 2023-02-01T19:09:38.000Z

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

Answer 2 · 2023-02-02T10:57:04.000Z

Sure @kushalnl7! Thanks for your contribution :)

Answer 3 · 2023-02-02T17:46:40.000Z

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

Answer 4 · 2023-02-03T11:54:19.000Z

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!