WCAG 2.4.3 A: Visually hidden carousel elements in mobile focus order (Issue 25)

[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 the site is viewed on a mobile device, visually hidden elements in the carousel are in the screen reader focus order. They have been hidden via CSS using off-screen positioning.

The below image shows the "Explore AI in government policy" button with screen reader focus, yet the element is visually hidden.

Code used

HTML

<div class="ct-slider__slides__inner" data-slider-rail="" style="width: 1792px; height: 428px; left: -100%;">
<div class="ct-slide ct-theme-light ct-slide--image-left " data-slider-slide="" style="width: 896px; left: 0px; height: 428px;">
<div class="ct-slide__image">
<img class="ct-image ct-theme-light " src="/sites/default/files/images/2024-08/ai-policy-cover_square.jpg" alt="An image of the front cover of the Australian Government's policy for the responsible use of AI in government.">
</div>
…
</div>
</div>

CSS

element.style {
width: 1792px;
height: 428px;
left: -100%;
}

Why this matters

As the elements with focus are not visible, screen reader users may lose track of their location or experience difficulty determining where they are.

Additionally, sighted screen reader users may become confused when their screen reader announces content that is not visible.

Expected outcome

Ensure that when content is visually hidden that it is accessibly hidden from all users. This can be achieved with the CSS display:none; property on the element that contains the content.

Update this property to display:block; when the content should be visible.

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 26 – Focus lost when carousel controls are disabled