WCAG 2.4.7 AA: Focused element not visible and has no visible focus indicator (Issue 28)

Summary

Via Vision Australia assessment: August 2024

Impact: medium

Note: DTA have a 90 day remediation period to address the identified issues within the audit, all issues must be resolved to obtain WCAG 2.2 certification for digital.gov.au.

Steps to reproduce

Global issue – Left side navigation Digital Experience | digital.gov.au (https://www.digital.gov.au/policy/digital-experience)

Observed outcome

When navigating via keyboard, collapsing the sub-navigation lists in the side navigation results in the focused element and its focus indicator not being visible. This is due to the content being reduced to a height of 0 in the CSS when the link to expand or collapse the sub-navigation is activated.

Sub-navigation trigger link

When sub-navigation collapsed, focus remains on the now visually hidden trigger link

Code used

HTML

<div class="ct-menu__sub-menu__wrapper ct-menu__sub-menu__wrapper--level-1" data-collapsible-panel="" aria-hidden="true" style="overflow: hidden;">
<ul class="ct-menu ct-menu__sub-menu ct-menu--level-1">
<li class="ct-menu__item ct-menu__item--level-1 ct-menu__item--has-children " data-collapsible="true" data-collapsible-duration="0" aria-expanded="false" data-collapsible-collapsed="">
<a class="ct-link ct-theme-light ct-menu__item__link" href="/policy/digital-experience/digital-service-standard" title="Digital Service Standard" aria-expanded="false" tabindex="-1">
Digital Service Standard
</a>
<a href="#" class="ct-menu__item__link-trigger" data-collapsible-trigger="" aria-expanded="false" title="Expand Digital Service Standard menu" tabindex="-1">
<svg class="ct-icon ct-collapsible__icon" width="24" height="24" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
…
</svg>
</a>
</li>
… 
</ul>
</div>

CSS

[data-collapsible][data-collapsible-collapsed] [data-collapsible-panel] {
height: 0;
overflow: hidden;
}

Why this matters

When a focused element is not visible, or does not have highly visible focus indicator, sighted keyboard users may have difficulty determining what element has keyboard focus. They may have trouble activating controls or interacting with the content.

Expected outcome

When a user activates the link to collapse the sub-navigation, hide the list that it controls the visibility of using the CSS display:none; property.

The triggering link should remain visible and retain keyboard focus. This property should be updated to display:block; when a user reactivates the link to expand the sub-navigation.

The tabindex attribute can be removed from the links. When content is hidden via the CSS display:none; property it will be hidden from all users and not appear in the keyboard focus order.

Code example

<ul>
<li>
<a href="/policy/digital-experience">
Digital Experience Policy
</a>
<a href="#" aria-expanded="false" title="Digital Experience Policy menu">
<svg class="ct-icon ct-collapsible__icon" width="24" height="24" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
...
</svg>
</a>
<div style="display:none;">
<ul>
<li>
<a href="/policy/digital-experience/digital-service-standard">
Digital Service Standard
</a>
… 
</li>
... 
</ul>
</div>
</li>
</ul>

Related issues

For other issues related to this component, please refer to:

• Issue 10 – Current page shown with presentation alone • Issue 22 – Sub-navigation links not keyboard accessible • Issue 23 – Illogical focus order when skip link activated • Issue 24 – Hidden navigation elements in keyboard focus order • Issue 33 – Element with aria-hidden attribute contains focusable descendants • Issue 36 – Link has invalid state

civictheme / uikit