[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.
Using CSS display:none hides information visually as well as from screen readers, and may be a better alternative than aria-hidden="true".
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>
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.
display:none
hides information visually as well as from screen readers, and may be a better alternative thanaria-hidden="true"
.tabindex="-1"
to all navigation links that are not in view (i.e. when they inheritaria- hidden="true"
). Remove this attribute when the menu is opened, and the navigation items are visible.Sample code for option 2