Bug - Accessibility - Selected component styling isn’t distinguishable from keyboard focus styling

[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

[3] Selected component styling isn’t distinguishable from keyboard focus styling
Applies: Selected navigation item in main navigation on all content pages with level 2 navigation.
Type: WCAG failure – 2.4.7 Focus Visible
Platform: Desktop and mobile
Severity: Low

The visual style that identifies a main navigation item as selected is the same style used when a keyboard user tabs through the main navigation items. Thus, a keyboard user does not see any change when the currently selected item receives keyboard focus.

A visible focus indicator helps keyboard users visually identify which component has keyboard focus.

Recommendation

Ensure that all components that are keyboard focusable are highlighted so that users can clearly identify that a component has keyboard focus, separate from selected state.

A possible solution is to change the :focus state for level 2 navigation to reflect the mouse :hover state, which adds a coloured bar to the right of the navigation item.