HTML Aria function not being read by screen reader - Bad design?



  • 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?



  • 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!!



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2