Support » Accessibility » Aria Label not read by screen reader nvda for hamburger icon on mobile

Aria Label not read by screen reader nvda for hamburger icon on mobile

  • shuangmiles

    (@shuangmiles)


    6 months, 1 week ago

    I coded a hamburger for this site that shows up on mobile I have it like this where I added a role aria-expanded, and a span with screen reader only text

    <button tabindex=”1″ role=”nav” aria-expanded=”false” class=”lg:hidden mobile-nav”>
    <div id=”mobile-nav-toggle” class=”hamburger-icon z-50 relative lg:hidden cursor-pointer”>
    <span class=”sr-only” >Menu Button Double Tap To Toggle.</span>
    <svg xmlns=”http://www.w3.org/2000/svg&#8221; aria-hidden=”true” height=”32″ width=”32″><path d=”M4 10h24a2 2 0 1 0 0-4H4a2 2 0 1 0 0 4zm24 4H4a2 2 0 1 0 0 4h24a2 2 0 1 0 0-4zm0 8H4a2 2 0 1 0 0 4h24a2 2 0 1 0 0-4z”/></svg>
    </div>
    </button>

    No matter what I do the screen reader won’t read the Menu Button Double Tap To Toggle.

    Here is the site if anyone wants to see it.
    https://368396e787.nxcli.io/

    Wondering if anyone had any insight as to why it won’t read it, I’m fairly new to accessibility coding so I’m banging my head against the wall try to understand why it ignores it. It also ignores the google and apple store and blind shell buttons towards the start of the page. I am using nvda to read the site but no luck so far any insight would be appreciated.

Viewing 1 replies (of 1 total)
  • Amber Hinds

    (@alh0319)

    6 months, 1 week ago

    It reads “double tap to toggle, navigation” to me in VoiceOver, but it doesn’t actually function with a return key or spacebar. It also received focus before the logo not after the logo, which is unexpected because it’s visually after the logo on the page.

    The reason that it reads “Double tap to toggle” and not “Menu button double tap to toggle” is because that’s the aria-label. An aria-label will override what it contained in the element, so the sr-only text you added is ignored. 

    <button tabindex="1" role="navigation" aria-label="Double tap to toggle" aria-expanded="false" class="lg:hidden mobile-nav">
<div id="mobile-nav-toggle" class="hamburger-icon z-50 relative lg:hidden cursor-pointer">
<span class="sr-only">Menu button  double tap to toggle</span>
<svg xmlns="http://www.w3.org/2000/svg" height="32" aria-hidden="true" width="32"><path d="M4 10h24a2 2 0 1 0 0-4H4a2 2 0 1 0 0 4zm24 4H4a2 2 0 1 0 0 4h24a2 2 0 1 0 0-4zm0 8H4a2 2 0 1 0 0 4h24a2 2 0 1 0 0-4z"></path></svg>
</div>
</button>

    Adding role=”navigation” no longer makes it a functional button. That needs to be removed.

    This might be a helpful resource for how to add the correct attributes. W3 Navigation Menu Button Example

Viewing 1 replies (of 1 total)
  • The topic ‘Aria Label not read by screen reader nvda for hamburger icon on mobile’ is closed to new replies.

Views