[10] State of component is not available to screen readers
Applies: Menu button (mobile) for global navigation in the header and menu button for main navigation on all content pages with level 2 navigation.
Type: WCAG failure – 4.1.2 Name, Role Value
Platform: Mobile
Severity: Medium
The menu button is currently marked up as a link. Sighted users can determine if the menu is open using the arrow, but this information is not conveyed to screen reader users.
Recommendation
Add the aria-expanded attribute to the <a> (link) element. Update the aria-expanded value to reflect the current state.
When the section is collapsed and content is hidden, set aria-expanded to false. When the section is expanded and the content is visible, set aria-expanded to true.
Although it is valid to use aria-expanded on an <a> (link) element, we strongly recommend replacing the link with a <button>. Generally, a link takes a user away from their current context to a new resource or page, whereas a button triggers an action or toggles something on an interface.
It is best practice to use native HTML, so it’s not recommended that native semantics are overridden by adding role="button" to an <a> element.
Sample code snippet
HTML for when the menu button is collapsed:
<button aria-expanded="false">Menu</button>
This issue was identified as part of the accessibility testing performed on the DTA website Jan 2017: https://drive.google.com/open?id=0B3SXZ9dr83v0Y2cwV21HdUZ1STQ
[10] State of component is not available to screen readers
Applies: Menu button (mobile) for global navigation in the header and menu button for main navigation on all content pages with level 2 navigation. Type: WCAG failure – 4.1.2 Name, Role Value Platform: Mobile Severity: Medium
The menu button is currently marked up as a link. Sighted users can determine if the menu is open using the arrow, but this information is not conveyed to screen reader users.
Recommendation
Add the aria-expanded attribute to the
<a>
(link) element. Update thearia-expanded
value to reflect the current state.When the section is collapsed and content is hidden, set aria-expanded to false. When the section is expanded and the content is visible, set aria-expanded to true.
Although it is valid to use aria-expanded on an
<a>
(link) element, we strongly recommend replacing the link with a<button>
. Generally, a link takes a user away from their current context to a new resource or page, whereas a button triggers an action or toggles something on an interface.It is best practice to use native HTML, so it’s not recommended that native semantics are overridden by adding role="button" to an
<a>
element.Sample code snippet
HTML for when the menu button is collapsed:
<button aria-expanded="false">Menu</button>