CODEWITHSUNDEEP
htmlaccessibilitywai-aria
John Magnolia
John Magnolia

Reputation: 16803

ARIA mobile menu, correct label

I have a responsive website, once the website reaches mobile width the menu gets hidden and only shown when you click the menu icon. This icon is hidden within the HTML until you reach this break point.

Question: what is the correct label that I should be giving the element?

I was thinking of adding aria-hidden="true" which is correct for desktop browsers but on mobile it's not hidden. 

<a href="#" id="menu-phone" data-menu="mobile" title="Show Menu">
    <span>Menu</span>
    <i class="icon"></i>
</a>

Upvotes: 3

Views: 1772

Answers (1)

FelipeAls
FelipeAls

Reputation: 22171

aria-hidden="true" wouldn't be necessary because:

  • on desktop the link is already hidden in CSS (by display: none or visibility: hidden)
  • on mobile it's shown and must be perceived by screen readers and other ATs

I guess the element a > span is visually hidden (out of the viewport) and only the icon in i is shown on mobile? Then you could have the text "Show menu" in it and no other attributes, whether ARIA or @title would be necessary.
If "Menu" is shown, then yes the link title a[title="Show Menu"] is better for a more explicit link.

Beware: if you're using ARIA role landmarks (and you should), [role="navigation"] should be added to a container of both your navigation visible on desktop and this link that's the only visible part of your navigation on mobile. Otherwise the user will jump to an invisible nothing with no clue of where the navigation is and no clue either that there's a special link/button to show it again.
Same for skip links: it should point to an element placed before both the navigation and this link/button.

Upvotes: 4

Related Questions