Technique g20x2:Section panels that scroll horizontally are designed to fit within a width of 320 CSS pixels on a vertically scrolling page

About this Technique

This technique is not referenced from any Understanding document.

This technique applies to all technologies.

Description

The objective of this technique is to ensure that users can zoom in on text within a horizontally scrolling section, while not requiring horizontal scrolling to read the content of each individual panel. Although the entire section requires horizontal scrolling to navigate between panels, each panel is designed to fit within a fixed width of 320 CSS pixels. This ensures that when a 320 CSS pixel wide viewport is used, and the card is in the viewport, each card will remain fully visible without the need for additional horizontal scrolling to read its content.

Examples

Example 1: A product carousel

The homepage of an online retail website includes several informational sections, some of which feature carousels showcasing highlighted products. These carousels require horizontal scrolling and have a computed height greater than 256 CSS pixels. Each panel is 320 CSS pixels wide, allowing users to see the full width of the card without horizontal scrolling. Consequently, users only need to scroll vertically to view the entire card, ensuring compliance with success criterion 1.4.10 Reflow for that section.

Working example: Carousel panels that scroll horizontally are designed to fit within a width of 320 CSS pixels on a vertically scrolling page.

Tests

Procedure

Check that the layout includes sections of content that scroll horizontally within a vertically scrolling page.
Check that each horizontally scrolling section is divided into distinct panels.
Open the webpage in a user agent that supports 400% zoom, setting the viewport dimensions to 1280 CSS pixels in width.
Activate the zoom function to enlarge the view by 400%.
Check that the content of each individual panel within the horizontally scrolling sections is fully readable without the need for additional horizontal scrolling.

Note

The native browser scrollbar is not included in the viewport dimensions. Therefore, when setting the view to 1280 CSS pixels wide for a vertically scrolling page, make sure to exclude the scrollbar width.

Expected Results

All checks above are true.