4

I'm looking into how accessible some websites are using WebAIM's WAVE tool. Many websites nowadays use the burger menu symbol to indicate the menu (YouTube and Gmail for example) and often I see the Aria attribute being used to say 'open-menu' or something of that sort. However, when I test it with NVDA and hover over them, the screen reader doesn't return anything.

For example here: https://www.rijksmuseum.nl/en

On the left is the burger symbol, a magnifying glass (for search) and text-links. NVDA only reads out the latter text-links when hovered over, but not the former two non-text symbols. The two symbols (burger and magnifying glass) don't change colour or give any indication that they're clickable when hovered over besides the mouse pointer changing.

Is the Aria label supposed to be function (or not function) this way or is this just bad code/design? Or am I just completely misunderstanding how a screen reader is supposed to function?

Improve this question
1
  • Screen readers are mostly used with keyboard navigation so hover is not really relevant. The mentioned hamburger and search icons are read perfectly well when tabbing through them. And they get a thick border to indicate they are focused. For mouse users it could be more problematic but I doubt it.
    – jazZRo
    Nov 23, 2020 at 17:18

1 Answer 1

Reset to default
1

Lately, I've been involved in designing for accessibility and I believe this is important.

Often when we build any website for accessibility, it is important to take care of things like you mentioned above - the icons and their CTA meanings.

I recall this at this point.

Ideally, it's a 'must' to have screen reader to read out these cases and in such cases I think one way the developers can adopt doing is following below steps:

  1. Hide the icon in aria using aria-hidden
  2. Now use aria-label and enter phrases like 'Click here to see menu' or something.

This can avoid the rise of accessibility issues. Afterall it is something must have to address the general public forum for usage.

So, answering your question.

  1. Yes, Aria is supposed read out in case of hamburger menus. Sp. you cannot term it as a bad design since there is a fix from dev.
  2. You have misunderstood (In case you thought it is a bad design) or you have complete liberty to saw the website should have been built better.

Stay safe!!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.