search

civictheme / uikit

UI atomic component-based library with Storybook integration
https://uikit.civictheme.io/
GNU General Public License v2.0
5 stars 5 forks source link

WCAG 2.1.1 A: Sub-navigation links not keyboard accessible (Issue 22) #370

Open CJE001 opened 1 month ago

CJE001 commented 1 month ago

Summary

Via Vision Australia assessment: August 2024

Impact: high

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 Service Standard services | digital.gov.au (https://www.digital.gov.au/policy/digital-experience/digital-service-standard/services)

Observed outcome

When a user navigates directly to a page and the side navigation is in an expanded state by default (i.e. the user has not triggered the expansion), links in the "Digital Service Policy" sub-navigation list cannot be focused or activated via keyboard alone. They have all been given a negative tabindex value (tabindex="-1").

Picture25

Code used

<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 ct-menu__item--active-trail " data-collapsible="true" data-collapsible-duration="0" aria-expanded="true">
<a class="ct-link ct-theme-light ct-menu__item__link" href="/policy/digital-experience/digital-service-standard" title="Digital Service Standard" aria-expanded="true" tabindex="-1">
Digital Service Standard
</a>
<a href="#" class="ct-menu__item__link-trigger" data-collapsible-trigger="" aria-expanded="true" 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>
<div class="ct-menu__sub-menu__wrapper ct-menu__sub-menu__wrapper--level-2" data-collapsible-panel="" aria-hidden="true">
<ul class="ct-menu ct-menu__sub-menu ct-menu--level-2">
<li class="ct-menu__item ct-menu__item--level-2 ct-menu__item--active-trail ">
<a class="ct-link ct-theme-light ct-menu__item__link" href="/policy/digital-experience/digital-service-standard/services" title="Services covered by the Digital Service Standard" tabindex="-1">
Services covered by the Digital Service Standard
</a>
</li>
... 
</ul>
... 
</div>
</li>
... 
</ul>

Why this matters

Assigning tabindex"-1" to a focusable element removes it from the keyboard focus order. Users who navigate via keyboard alone will not be able to focus or activate the links in the side navigation.

Expected outcome

Remove the tabindex attribute from the links in the navigation.

This attribute appears to be present in the code to remove the links from the focus order when the sub-navigation lists are in a collapsed state. It is recommended to use CSS to do this instead, as outlined in Issue 24.

Related issues

• Issue 5 – Navigation not marked up • Issue 24 – Hidden navigation elements in keyboard focus order • Issue 33 – Element with aria-hidden attribute contains focusable descendants

CJE001 commented 1 month ago

Guideline 2.1: Keyboard Accessible "Make all functionality available from a keyboard."

2.1.1 Keyboard WCAG 2.0 Level A

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints. Users with hand tremors or low vision may find using a mouse difficult or even impossible. Therefore, it is important that all functionalities on a web page can be reached and operated through a keyboard or a pointing device that acts as a keyboard emulator.