WCAG 1.4.4 AA: Loss of carousel content when text resized (Issue 16)

[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 text is resized to 200%, the content and controls of carousel slides becomes truncated.

Text and button truncated, Slide 1

Heading text truncated, Slide 2

Code used

<div class="ct-slider__container" data-slider="">
<h3 class="ct-heading ct-theme-light ct-slider__title">
Featured initiatives
</h3>
<div class="ct-slider__slides" data-slider-panel="" style="height: 380px;">
<div class="ct-slider__slides__inner" data-slider-rail="" style="width: 1440px; height: 380px; left: 0%;">
<div class="ct-slide ct-theme-light ct-slide--image-left " data-slider-slide="" style="width: 720px; left: 0px; height: 380px;" data-slider-slide-hidden="true">
<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 class="ct-slide__wrapper">
<div class="ct-slide__inner">
<h2 class="ct-heading ct-theme-light ct-slide__title">
AI in government policy
</h2>
... 
</div>
</div>
... 
</div>
</div>
</div>
</div>

Why this matters

Users with low vision who need to enlarge text may not have full access to the content of the carousel.

Expected outcome

Preferably, consider the need for a carousel component. Carousels can present multiple barriers for people with disabilities and increase cognitive load. As the amount of content in this carousel is very small, it could be presented in another way, such as Call to Action (CTA) cards or as a list.

Alternatively, ensure that there is no loss of slide content when text is resized to 200%.

Related issues

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

• Issue 6 – Carousel not contained within landmark region
• Issue 18 – Carousel functionality lost when reflowed
• Issue 25 – Visually hidden carousel elements in mobile focus order
• Issue 26 – Focus lost when carousel controls are disabled

[sonamchaturvedi28]

Test Env: DEV
Test Status: PASS
Test Result:

• Carousel content is not truncated when text resized