aria-hidden="true"
wouldn't be necessary because:
- on desktop the link is already hidden in CSS (by
display: none
orvisibility: 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.