WCAG 4.1.2 A: Link has invalid state (Issue 36)

[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

Digital Experience | digital.gov.au (https://www.digital.gov.au/policy/digital-experience)

Observed outcome

Links within the left side navigation that direct to a page, rather than act as a trigger to reveal content, have been given the aria-expanded attribute.

Code used

<ul>
..
<li class="ct-menu__item ct-menu__item--level-1 ct-menu__item--has-children " data-collapsible="true" data-collapsible-duration="0" data-collapsible-collapsed="" aria-expanded="false">
<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>

Why this matters

When the aria-expanded attribute is present on an element, it acts to inform screen reader users that the element controls the expanding and collapsing of additional content.

When this attribute is used on an element that does not provide this functionality, it may interfere with a user's ability to understand components and how to interact with them.

Expected outcome

Remove the aria-expanded attribute from all elements that are links to pages, and do not act as triggers.

Code example

<ul>
..
<li class="ct-menu__item ct-menu__item--level-1 ct-menu__item--has-children " data-collapsible="true" data-collapsible-duration="0" data-collapsible-collapsed="">
<a class="ct-link ct-theme-light ct-menu__item__link" href="/policy/digital-experience/digital-service-standard">
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>

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 – Visually hidden navigation elements in keyboard focus order
• Issue 28 – Focused element not visible and has no visible focus indicator
• Issue 33 – Element with aria-hidden attribute contains focusable descendants