WCAG 4.1.2 A: Link does not convey expanded state (Issue 35)

[CJE001]

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 – Main navigation
digital.gov.au beta | digital.gov.au (https://www.digital.gov.au)

Observed outcome

When the "Explore" link in the main navigation is triggered, a sub-navigation list is expanded. While this expanded state is visually apparent, it is not conveyed to assistive technologies when it is first triggered.

The aria-expanded attribute is dynamically added after the element has been triggered.

This issue occurs on all pages when the navigation link is in its default state (i.e. a user has not yet interacted with the link).

Code used

Default state

<a class="ct-link ct-theme-light ct-menu__item__link" href="" title="Explore" data-collapsible-trigger="">
Explore
<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">
</path>
</svg>
</a>

Expanded state

<a class="ct-link ct-theme-light ct-menu__item__link" href="" title="Explore" data-collapsible-trigger="" aria-expanded="true">
Explore
<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>

Why this matters

Screen reader users may not realise that the link has triggered additional content when they first interact with it, and may not understand what state it is in.

They may struggle to successfully interact with the component.

Expected outcome

Ensure that the state of the link is available to assistive technologies at all times. To achieve this, the aria-expanded attribute should be present on the element on page load:

• The value should be "false" when the link is in its default state of collapsed and dynamically updated to "true" when expanded.
• Preferably, add the aria-controls attribute to the link. Match its value to the id attribute of the element that contains the expandable content.

Ideally, reimplement the trigger as a semantic element. When screen reader users encounter a button, they expect it to trigger functionality (rather than navigate somewhere, as is the expectation of a link), making its purpose clearer.

Code example

<nav aria-label="main">
<ul>
<li>
<button type="button" aria-expanded="false" aria-controls="about_menu">
Explore
</button>
<ul id="about_menu" style="display: none;">
<li>
<a href="…">
…
</a>
</li>
… 
</ul>
</li>
</ul>
</nav>

[alan-cole]

The collapsible library should set the default aria-expanded depending on the collapsible state.

https://github.com/civictheme/uikit/blob/main/components/00-base/collapsible/collapsible.js#L106

[richardgaunt]

#415 fixes this issue