WCAG 1.4.10 AA: Carousel functionality lost when site reflowed (Issue 18)

[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 at an equivalent of 320 x 256 CSS pixels (1280 x 1024 CSS pixels at 400%), content and buttons within the carousel becomes truncated. While those navigating via keyboard can bring the buttons and content into focus, they cannot be accessed by those navigating using a pointer device (such as a mouse, head wand, touch, or eye-tracking software).
Additionally, when viewing the site on a mobile device in landscape orientation, content in the slider is truncated.

Slider links cannot be reached via pointer devices as the section is truncated and does not scroll vertically

Full screen view of slider content when reflowed

Slider content is truncated in mobile landscape orientation

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 content may not have full access to the content and functionality of the slides.

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 content can be zoomed to 400% on a 1280px wide monitor without any loss of content or functionality and without having to rely on horizontal scrolling. This can be achieved by implementing a responsive design that reflows the content according to screen size. It may also be necessary to offer the information in another way when the site is reflowed.

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 25 – Visually hidden carousel elements in mobile focus order
• Issue 26 – Focus lost when carousel controls are disabled

[CJE001]

1.4.10 Reflow WCAG 2.1 Level AA

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

• Vertical scrolling content at a width equivalent to 320 CSS pixels;
• Horizontal scrolling content at a height equivalent to 256 CSS pixels;

Except for parts of the content which require two-dimensional layout for usage or meaning.

Users with low-vision have difficulty reading text if they cannot zoom content and read without needing to scroll in more than one direction. Therefore using reflow allows single column scrolling, enables tracking and does not hide content off-screen.