WCAG 2.4.3 A: Focus lost when carousel controls are disabled (Issue 26)

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

Observed outcome

When activating the "Previous" and "Next" buttons for the carousel, the buttons are given a disabled state when a user is at the start or end of the slides. When activating the buttons via keyboard, focus is lost to the body when a button is given the disabled state while focused.

Additionally, a generic <span> element that contains the slide number announcement has been added to the focus order. This element has no functionality.

Code used

<div class="ct-slider__controls">
<div class="ct-slider__controls__inner">
<button class="ct-button ct-theme-light ct-button--secondary ct-button--button ct-button--regular ct-slider__controls__previous" data-component-name="button" data-slider-previous="" data-button="true" disabled="">
<svg class="ct-icon ct-button__icon" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
…
</svg>
Previous 
</button>
<button class="ct-button ct-theme-light ct-button--secondary ct-button--button ct-button--regular ct-slider__controls__next" data-component-name="button" data-slider-next="" data-button="true">
Next
<svg class="ct-icon ct-button__icon" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
..
</svg>
</button>
</div>
<span class="ct-tag ct-theme-light ct-tag--primary ct-slider__controls__progress-indicator" aria-live="polite" data-slider-progress="" tabindex="0">
Slide 1 of 2
</span>
</div>

Why this matters

When an element that is currently focused has the disabled attribute added, it will be removed from the keyboard focus order, resulting in a loss of focus.

When this occurs, screen reader users and those navigating via keyboard may struggle to determine where their focus is or the result of interacting with the button.

This may also slow users down and make it difficult to interact with the component. When non interactive elements are in the sequential focus order, it adds an unnecessary tab stop and users may believe that functionality is broken.

Expected outcome

Remove the disabled attribute from the buttons. Allow users to cycle through the slides indefinitely using both the "Previous" and "Next" buttons. The progress indicator ("Slide 1 of 2") provides sufficient information visually and programmatically (through its aria-live attribute) to users on their position within the slides.

Remove the tabindex attribute from the that contains the progress indicator to remove it from the keyboard focus order.

Related issues

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

• Issue 6 – Carousel not contained within landmark region
• Issue 16 – Loss of carousel content when text resized
• Issue 18 – Carousel functionality lost when reflowed
• Issue 25 – Visually hidden carousel elements in mobile focus order