Bug - Accessibility - Components are still keyboard accessible when not visible

[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

[14] Components are still keyboard accessible when not visible Applies: Navigation items Type: WCAG failure – 4.1.2 Name, Role, Value Platform: Mobile Severity: Low

When the menu is collapsed, the navigation items are still keyboard focusable and can be tabbed to by keyboard users. aria-hidden="true" hides content from screen readers, but it doesn't stop a component from receiving keyboard focus – users can still tab to it. This issue doesn’t affect TalkBack or VoiceOver users, but occurs for people using a Bluetooth keyboard with a mobile device.

Recommendation Ensure that information that is not supposed to be available to screen reader users is not read out and can’t be tabbed to.

1. Using CSS display:none hides information visually as well as from screen readers, and may be a better alternative than aria-hidden="true".
2. Alternatively, add tabindex="-1" to all navigation links that are not in view (i.e. when they inherit aria- hidden="true"). Remove this attribute when the menu is opened, and the navigation items are visible.

Sample code for option 2

<li><a href="/what-we-do/" tabindex="-1">What we do</a></li>