Bug - Accessibility - State of component is not available to screen readers

[gordcorp]

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