From f89d5d30dc801d0393d048b5d9b774d68e821804 Mon Sep 17 00:00:00 2001 From: HelenBurge <41951878+HelenBurge@users.noreply.github.com> Date: Mon, 13 Jul 2026 12:15:21 +0100 Subject: [PATCH 1/7] Create content-present-reflow-sc9kkf First draft of the content reflow test --- _rules/content-present-reflow-sc9kkf | 283 +++++++++++++++++++++++++++ 1 file changed, 283 insertions(+) create mode 100644 _rules/content-present-reflow-sc9kkf diff --git a/_rules/content-present-reflow-sc9kkf b/_rules/content-present-reflow-sc9kkf new file mode 100644 index 0000000000..dc07c23473 --- /dev/null +++ b/_rules/content-present-reflow-sc9kkf @@ -0,0 +1,283 @@ +--- +id: sc9kkf +name: Content is not missing at 320 CSS pixels +rules_format: 1.1 +rule_type: atomic +description: | + This rule checks content is not missing when the viewport is set to 320 CSS pixels in the orientation of the text. +accessibility_requirements: + wcag21:1.4.10: # Reflow (AA) + forConformance: true + failed: not satisfied + passed: further testing needed + inapplicable: further testing needed +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Helen Burge +--- + +## Applicability + +This rule applies to any element containing visible content or functional components. It is rendered when the viewport is set to 320 CSS pixels in the orientation of the text. + +## Expectation (1) + +Each target element: +Retains all content and functionality when viewed at 320 CSS pixels; and +Does not hide, remove, or make content unavailable as a result of viewport constraints, zoom, or responsive behaviour; and +Ensures that any content that is visually hidden at this viewport size is still programmatically available and accessible to users. + +## Background + +This rule supports WCAG 2.1 Success Criterion 1.4.10 Reflow, which requires that content be presented without loss of information or functionality at a width equivalent to 320 CSS pixels. When content is missing at smaller viewport sizes, users may lose access to essential information or controls, even if the layout appears functional. Responsive design should reposition or adapt content, not remove it entirely, unless an equivalent mechanism provides access. + +### Assumptions + +There are no assumptions. + +### Accessibility Support + +There are no accessibility support issues known. + +## Examples + +### Passed + +#### Passed Example 1 + +Content reflows but remains fully available. + +```html +
+

+ All text content remains visible and accessible when the viewport is reduced. +

+
+``` + +#### Passed Example 2 + +Navigation collapses into a menu but remains accessible. Content is not removed, only hidden behind an accessible control. + +```html + + +``` + +#### Passed Example 3 + +Content is visually hidden but remains available programmatically. + +```html + +``` + +#### Passed Example 4 + +Content is moved in the layout but still present. + +```html + +
+

Sidebar content is still available, just repositioned.

+
+``` + +#### Passed Example 5 + +Accordion reveals content without removing it. + +```html + + +``` + +#### Passed Example 6 + +Images resize but are still visible. + +```html + +``` + +#### Passed Example 7 + +Form fields collapse but remain accessible. + +```html +
+ + +
+``` + +#### Passed Example 8 + +Content requiring two-dimensional layout (covered under reflow exceptions). + +```html + + +
ColumnColumn
+``` + +### Failed + +#### Failed Example 1 + +Content removed at smaller viewport. + +```html + +
+ This content disappears on smaller screens. +
+``` + +#### Failed Example 2 + +Navigation items removed instead of adapted. + +```html + + +``` + +#### Failed Example 3 + +Content visually clipped and inaccessible. + +```html +
+

+ Important content is hidden and cannot be accessed or revealed. +

+
+``` + +#### Failed Example 4 + +Content moved off-screen and not reachable. + +```html +
+ Hidden content that cannot be accessed by users. +
+``` + +#### Failed Example 5 + +Interactive element missing at smaller viewport. + +```html + + +``` + +#### Failed Example 6 + +Image removed without alternative. + +```html + +Important diagram +``` + +#### Failed Example 7 + +Collapsed content has no mechanism to access it. + +```html +
+

This content is permanently hidden.

+
+``` + +### Inapplicable + +#### Inapplicable Example 1 + +Decorative content. + +```html +
+ Decorative content only. +
+``` + +#### Inapplicable Example 2 + +Content explicitly hidden from all users. + +```html + +``` + +#### Inapplicable Example 3 + +Content outside the user viewport by design (e.g. off-canvas patterns before interaction). + +```html + +``` + +#### Inapplicable Example 4 + +Content that is replaced by an equivalent alternative. The full content is replaced with an equivalent that preserves meaning. + +```html +

Short summary version

+

Full detailed version

+``` From 7aa38a5a3c51cd2489040b962f448709694495c4 Mon Sep 17 00:00:00 2001 From: HelenBurge <41951878+HelenBurge@users.noreply.github.com> Date: Mon, 13 Jul 2026 14:12:14 +0100 Subject: [PATCH 2/7] Update content-present-reflow-sc9kkf --- _rules/content-present-reflow-sc9kkf | 2 ++ 1 file changed, 2 insertions(+) diff --git a/_rules/content-present-reflow-sc9kkf b/_rules/content-present-reflow-sc9kkf index dc07c23473..9bb4e0fca0 100644 --- a/_rules/content-present-reflow-sc9kkf +++ b/_rules/content-present-reflow-sc9kkf @@ -17,6 +17,8 @@ input_aspects: acknowledgments: authors: - Helen Burge + previous_authors: + - --- ## Applicability From dd72c255f8b5f2b311ec589beeb8d974a065be4c Mon Sep 17 00:00:00 2001 From: HelenBurge <41951878+HelenBurge@users.noreply.github.com> Date: Mon, 13 Jul 2026 14:21:21 +0100 Subject: [PATCH 3/7] Update content-present-reflow-sc9kkf --- _rules/content-present-reflow-sc9kkf | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_rules/content-present-reflow-sc9kkf b/_rules/content-present-reflow-sc9kkf index 9bb4e0fca0..5f0d9ea131 100644 --- a/_rules/content-present-reflow-sc9kkf +++ b/_rules/content-present-reflow-sc9kkf @@ -29,8 +29,8 @@ This rule applies to any element containing visible content or functional compon Each target element: Retains all content and functionality when viewed at 320 CSS pixels; and -Does not hide, remove, or make content unavailable as a result of viewport constraints, zoom, or responsive behaviour; and -Ensures that any content that is visually hidden at this viewport size is still programmatically available and accessible to users. +- Does not hide, remove, or make content unavailable as a result of viewport constraints, zoom, or responsive behaviour; and +- Ensures that any content that is visually hidden at this viewport size is still programmatically available and accessible to users. ## Background From c59515145b533078f960054fb530bda030acc8ba Mon Sep 17 00:00:00 2001 From: HelenBurge <41951878+HelenBurge@users.noreply.github.com> Date: Mon, 13 Jul 2026 14:36:18 +0100 Subject: [PATCH 4/7] Create orientation-scroll-reflow-acsmtl --- orientation-scroll-reflow-acsmtl | 267 +++++++++++++++++++++++++++++++ 1 file changed, 267 insertions(+) create mode 100644 orientation-scroll-reflow-acsmtl diff --git a/orientation-scroll-reflow-acsmtl b/orientation-scroll-reflow-acsmtl new file mode 100644 index 0000000000..68986a8c39 --- /dev/null +++ b/orientation-scroll-reflow-acsmtl @@ -0,0 +1,267 @@ +--- +id: acsmtl +name: Orientation scrolls do not exist at 320 CSS pixels without a content exception +rules_format: 1.1 +rule_type: atomic +description: | + This rule checks content does not require a scroll in the orientation of the text when the viewport is set to 320 CSS pixels. +accessibility_requirements: + wcag21:1.4.10: # Reflow (AA) + forConformance: true + failed: not satisfied + passed: further testing needed + inapplicable: further testing needed +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Helen Burge + previous_authors: + - +--- + +## Applicability + +This rule applies to any element containing visible content that is rendered when the viewport is set to 320 CSS pixels in the orientation of the text. The user can scroll in the orientation of the text (for example, horizontal scrolling in left-to-right text). + +## Expectation (1) + +Each target element: +- Does not require scrolling in the direction of reading to access content when viewed at 320 CSS pixels; or +- Scrolls only where the content meets a valid exception, where a two-dimensional layout is required for meaning or functionality. + +## Background + +This rule supports WCAG 2.1 Success Criterion 1.4.10 Reflow, which requires that content can be presented without loss of information or functionality and without requiring scrolling in two dimensions at a width equivalent to 320 CSS pixels. For horizontally written languages, users should be able to scroll vertically only, without needing horizontal scrolling to read text. Exceptions exist for content that inherently requires a two-dimensional layout, such as maps, data tables, or code blocks. + +### Assumptions + +There are no assumptions. + +### Accessibility Support + +There are no accessibility support issues known. + +## Examples + +### Passed + +#### Passed Example 1 + +Text content reflows and only vertical scrolling is required. + +```html +
+

+ This paragraph wraps correctly within the viewport and can be read + using vertical scrolling only. +

+
+``` + +#### Passed Example 2 + +Flexible layout prevents horizontal scrolling. + +```html + +
+

+ All content reflows into a single column. +

+
+``` + +#### Passed Example 3 + +Navigation collapses into a menu at smaller viewport sizes. Meaning no horizontal scrolling is required in the reading direction. + +```html + + +``` + +#### Passed Example 4 + +Scrollable exception isolated to a data table. Meaning scrolling is limited to an exception (table requiring two-dimensional layout). + +```html +
+ + + +
NameValue
ExampleData
+
+``` + +#### Passed Example 5 + +The carousel scrolls horizontally, but each panel fits the viewport. Each panel is readable without requiring scrolling within the panel itself. + +```html +
+
Panel 1
+
Panel 2
+
+``` + +#### Passed Example 6 + +Long text wraps without forcing horizontal scroll. + +```html +

+ ThisIsAnExtremelyLongWordThatWrapsCorrectlyInsteadOfForcingScrolling. +

+``` + +#### Passed Example 7 + +Large data table requiring two-dimensional layout. + +```html + + + +
Column 1Column 2Column 3
DataDataData
+``` + +#### Passed Example 8 + +Map or graphical content. + +```html +
+ +
+``` + +#### Passed Example 9 + +Video player with controls. + +```html + +``` + +#### Passed Example 10 + +Canvas or game interface requiring two-dimensional interaction. + +```html + +``` + +### Failed + +#### Failed Example 1 + +The page requires horizontal scrolling to read text. + +```html +
+

+ This paragraph does not wrap and requires horizontal scrolling. +

+
+``` + +#### Failed Example 2 + +Unbreakable text forces scrolling. + +```html +

+ ThisTextDoesNotWrapAndForcesTheUserToScrollHorizontallyToRead. +

+``` + +#### Failed Example 3 + +Overflow causes horizontal scroll in reading direction. + +```html +
+

+ Users must scroll horizontally to read this text. +

+
+``` + +#### Failed Example 4 + +Navigation requires horizontal scrolling. Primary navigation requires scrolling in the reading direction. + +```html + +``` + +#### Failed Example 5 + +Content partially off-screen and requires scrolling to reveal. + +```html +
+

+ This text is خارج the viewport and requires horizontal scrolling. +

+
+``` + +#### Failed Example 6 + +Multiple scroll directions required on page. + +```html +
+

+ This content requires both horizontal and vertical scrolling. +

+
+``` + +#### Failed Example 7 + +Text inside the container requires sideways scrolling. Exceptions are incorrectly applied to text content. + +```html +
+

+ The paragraph itself requires horizontal scrolling to read. +

+
+``` + +### Inapplicable + +#### Inapplicable Example 1 + +Preformatted code requiring horizontal scrolling. + +```html +
+function example() {
+    console.log("This line may require horizontal scrolling");
+}
+
+``` From 0a6d52277ff296f7fabc8d74381b510c8aa64696 Mon Sep 17 00:00:00 2001 From: HelenBurge <41951878+HelenBurge@users.noreply.github.com> Date: Mon, 13 Jul 2026 14:39:12 +0100 Subject: [PATCH 5/7] Create orientation-scroll-reflow-acsmtl --- _rules/orientation-scroll-reflow-acsmtl | 267 ++++++++++++++++++++++++ 1 file changed, 267 insertions(+) create mode 100644 _rules/orientation-scroll-reflow-acsmtl diff --git a/_rules/orientation-scroll-reflow-acsmtl b/_rules/orientation-scroll-reflow-acsmtl new file mode 100644 index 0000000000..68986a8c39 --- /dev/null +++ b/_rules/orientation-scroll-reflow-acsmtl @@ -0,0 +1,267 @@ +--- +id: acsmtl +name: Orientation scrolls do not exist at 320 CSS pixels without a content exception +rules_format: 1.1 +rule_type: atomic +description: | + This rule checks content does not require a scroll in the orientation of the text when the viewport is set to 320 CSS pixels. +accessibility_requirements: + wcag21:1.4.10: # Reflow (AA) + forConformance: true + failed: not satisfied + passed: further testing needed + inapplicable: further testing needed +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Helen Burge + previous_authors: + - +--- + +## Applicability + +This rule applies to any element containing visible content that is rendered when the viewport is set to 320 CSS pixels in the orientation of the text. The user can scroll in the orientation of the text (for example, horizontal scrolling in left-to-right text). + +## Expectation (1) + +Each target element: +- Does not require scrolling in the direction of reading to access content when viewed at 320 CSS pixels; or +- Scrolls only where the content meets a valid exception, where a two-dimensional layout is required for meaning or functionality. + +## Background + +This rule supports WCAG 2.1 Success Criterion 1.4.10 Reflow, which requires that content can be presented without loss of information or functionality and without requiring scrolling in two dimensions at a width equivalent to 320 CSS pixels. For horizontally written languages, users should be able to scroll vertically only, without needing horizontal scrolling to read text. Exceptions exist for content that inherently requires a two-dimensional layout, such as maps, data tables, or code blocks. + +### Assumptions + +There are no assumptions. + +### Accessibility Support + +There are no accessibility support issues known. + +## Examples + +### Passed + +#### Passed Example 1 + +Text content reflows and only vertical scrolling is required. + +```html +
+

+ This paragraph wraps correctly within the viewport and can be read + using vertical scrolling only. +

+
+``` + +#### Passed Example 2 + +Flexible layout prevents horizontal scrolling. + +```html + +
+

+ All content reflows into a single column. +

+
+``` + +#### Passed Example 3 + +Navigation collapses into a menu at smaller viewport sizes. Meaning no horizontal scrolling is required in the reading direction. + +```html + + +``` + +#### Passed Example 4 + +Scrollable exception isolated to a data table. Meaning scrolling is limited to an exception (table requiring two-dimensional layout). + +```html +
+ + + +
NameValue
ExampleData
+
+``` + +#### Passed Example 5 + +The carousel scrolls horizontally, but each panel fits the viewport. Each panel is readable without requiring scrolling within the panel itself. + +```html +
+
Panel 1
+
Panel 2
+
+``` + +#### Passed Example 6 + +Long text wraps without forcing horizontal scroll. + +```html +

+ ThisIsAnExtremelyLongWordThatWrapsCorrectlyInsteadOfForcingScrolling. +

+``` + +#### Passed Example 7 + +Large data table requiring two-dimensional layout. + +```html + + + +
Column 1Column 2Column 3
DataDataData
+``` + +#### Passed Example 8 + +Map or graphical content. + +```html +
+ +
+``` + +#### Passed Example 9 + +Video player with controls. + +```html + +``` + +#### Passed Example 10 + +Canvas or game interface requiring two-dimensional interaction. + +```html + +``` + +### Failed + +#### Failed Example 1 + +The page requires horizontal scrolling to read text. + +```html +
+

+ This paragraph does not wrap and requires horizontal scrolling. +

+
+``` + +#### Failed Example 2 + +Unbreakable text forces scrolling. + +```html +

+ ThisTextDoesNotWrapAndForcesTheUserToScrollHorizontallyToRead. +

+``` + +#### Failed Example 3 + +Overflow causes horizontal scroll in reading direction. + +```html +
+

+ Users must scroll horizontally to read this text. +

+
+``` + +#### Failed Example 4 + +Navigation requires horizontal scrolling. Primary navigation requires scrolling in the reading direction. + +```html + +``` + +#### Failed Example 5 + +Content partially off-screen and requires scrolling to reveal. + +```html +
+

+ This text is خارج the viewport and requires horizontal scrolling. +

+
+``` + +#### Failed Example 6 + +Multiple scroll directions required on page. + +```html +
+

+ This content requires both horizontal and vertical scrolling. +

+
+``` + +#### Failed Example 7 + +Text inside the container requires sideways scrolling. Exceptions are incorrectly applied to text content. + +```html +
+

+ The paragraph itself requires horizontal scrolling to read. +

+
+``` + +### Inapplicable + +#### Inapplicable Example 1 + +Preformatted code requiring horizontal scrolling. + +```html +
+function example() {
+    console.log("This line may require horizontal scrolling");
+}
+
+``` From 416667896f51ff7aceea1bdb7ee3fbbe59014719 Mon Sep 17 00:00:00 2001 From: HelenBurge <41951878+HelenBurge@users.noreply.github.com> Date: Mon, 13 Jul 2026 14:57:44 +0100 Subject: [PATCH 6/7] Create text-cutoff-reflow-lf4ym8 --- _rules/text-cutoff-reflow-lf4ym8 | 339 +++++++++++++++++++++++++++++++ 1 file changed, 339 insertions(+) create mode 100644 _rules/text-cutoff-reflow-lf4ym8 diff --git a/_rules/text-cutoff-reflow-lf4ym8 b/_rules/text-cutoff-reflow-lf4ym8 new file mode 100644 index 0000000000..b93a8be223 --- /dev/null +++ b/_rules/text-cutoff-reflow-lf4ym8 @@ -0,0 +1,339 @@ +--- +id: lf4ym8 +name: Text is not cutoff at 320 CSS pixels +rules_format: 1.1 +rule_type: atomic +description: | + This rule checks content does not require a scroll in the orientation of the text when the viewport is set to 320 CSS pixels. +accessibility_requirements: + wcag21:1.4.10: # Reflow (AA) + forConformance: true + failed: not satisfied + passed: further testing needed + inapplicable: further testing needed +input_aspects: + - DOM Tree + - CSS Styling +acknowledgments: + authors: + - Helen Burge + previous_authors: + - +--- + +## Applicability + +This rule applies to any element containing visible text that is rendered at 320 CSS pixels in the orientation of the text. + +## Expectation (1) + +Each target element: +- Has all text fully visible within the viewport, without being clipped, truncated, or hidden off-screen when viewed at 320 CSS pixels; and +- Does not require scrolling in the direction of reading to reveal portions of text; and +- Preserves all information and functionality associated with the text content. + +## Background + +This rule supports WCAG 2.1 Success Criterion 1.4.10 Reflow, which requires that content can be presented without loss of information or functionality and without requiring scrolling in two dimensions at a width equivalent to 320 CSS pixels. + +### Assumptions + +There are no assumptions. + +### Accessibility Support + +There are no accessibility support issues known. + +## Examples + +### Passed + +#### Passed Example 1 + +Text wraps correctly and remains fully visible at 320 CSS pixels. + +```html +
+

+ This paragraph reflows and wraps within the viewport, + ensuring all text is visible without horizontal scrolling. +

+
+``` + +#### Passed Example 2 + +Responsive layout prevents text cutoff at small viewport sizes. + +```html + +
+

+ Content adapts to the viewport and remains fully readable at 320 CSS pixels. +

+
+``` + +#### Passed Example 3 + +Long words wrap instead of overflowing. + +```html +

+ ThisIsAnExtremelyLongWordThatWouldOtherwiseOverflowButNowWrapsCorrectlyWithinTheViewport. +

+``` + +#### Passed Example 4 + +Content inside a flexible grid reflows to a single column. + +```html + +
+

All text remains visible and reflows correctly.

+
+``` + +#### Passed Example 5 + +Inline text elements wrap naturally. + +```html +

+ This is a sentence with inline elements that wrap correctly + when the viewport is reduced. +

+``` + +#### Passed Example 6 + +Scrollable container used only for non-text, while text remains fully visible. + +```html +
+

+ The text content is fully visible and not clipped, even though other + components on the page may scroll. +

+
+``` + +#### Passed Example 7 + +Map with labels. Map content requires spatial positioning that cannot be linearised. + +```html +
+Passed Example 8 +Scrollable code viewer with syntax highlighting. Code formatting and alignment require horizontal structure for readability. +
+

+const veryLongVariableName = "example";
+
+
+``` + +#### Passed Example 9 + +Timeline or calendar grid. Temporal relationships depend on a grid-based layout. + +```html +
+
Mon
+
Tue
+
Wed
+
+``` + +#### Passed Example 10 + +Comic or visual narrative layout. Sequential meaning depends on spatial positioning. + +```html +Comic strip +``` + +#### Passed Example 11 + +Whiteboard or drawing canvas. User-generated spatial content cannot be meaningfully reflowed. + +```html + +``` + +### Failed + +#### Failed Example 1 + +Text is cut off due to a fixed-width container. + +```html +
+

+ This text extends beyond the viewport and is not fully visible. +

+
+``` + +#### Failed Example 2 + +Text is truncated and not fully readable. + +```html +

+ This is a long line of text that will be cut off. +

+``` + +#### Failed Example 3 + +Overflow causes text to extend outside the viewport. + +```html +
+

+ This text spills خارج the viewport and requires horizontal scrolling to read fully. +

+
+``` + +#### Failed Example 4 + +Absolute positioning causes text to be partially off-screen. + +```html +
+

+ Part of this text is pushed خارج the viewport and not visible. +

+
+``` + +#### Failed Example 5 + +Long unbreakable text does not wrap. + +```html +

+ SupercalifragilisticexpialidociousSupercalifragilisticexpialidocious +

+``` + +#### Failed Example 6 + +Clipping hides text content. + +```html +
+

+ This paragraph contains multiple lines of text but only part of it is visible. +

+
+``` + +#### Failed Example 7 + +Text overlaps and hides other text when reflowing. + +```html +
+

First line of text

+

Second line overlaps and obscures the first

+
+``` + +#### Failed Example 8 + +Text requires horizontal scrolling to be fully read. + +```html +
+

+ This text requires horizontal scrolling to read fully, which fails the requirement. +

+
+``` + +### Inapplicable + +#### Inapplicable Example 1 + +Preformatted content requiring two-dimensional layout. + +```html +
+function example() {
+	console.log("Horizontal scrolling may be required");
+}
+
+``` + +#### Inapplicable Example 2 + +Element does not present visible text to the user. + +```html + +``` + +#### Inapplicable Example 3 + +Mathematical formula requiring spatial layout. The meaning depends on spatial formatting that may not fully reflow without loss of meaning. + +```html +
+ E = mc2 +
+``` + +#### Inapplicable Example 4 + +Complex diagram or infographic with embedded text. The text is part of an image that relies on a two-dimensional layout. + +```html +System architecture diagram +``` + +#### Inapplicable Example 5 + +Large chart or graph. Charts require spatial relationships that cannot be preserved through text reflow. + +```html + +``` + +#### Inapplicable Example 6 + +Side-by-side comparison layout where structure conveys meaning. The meaning relies on a two-dimensional comparison layout. + +```html +
+
Before
+
After
+
+``` + +#### Inapplicable Example 7 + +Interactive editor with toolbar and content area. The interface may require maintaining layout relationships between controls and content. + +```html +
+
Bold | Italic | Underline
+
Editable text here
+
+``` From 8de47f2b9a6da918f9229fe1dc1208c9bf0de642 Mon Sep 17 00:00:00 2001 From: HelenBurge <41951878+HelenBurge@users.noreply.github.com> Date: Mon, 13 Jul 2026 14:58:21 +0100 Subject: [PATCH 7/7] Delete orientation-scroll-reflow-acsmtl --- orientation-scroll-reflow-acsmtl | 267 ------------------------------- 1 file changed, 267 deletions(-) delete mode 100644 orientation-scroll-reflow-acsmtl diff --git a/orientation-scroll-reflow-acsmtl b/orientation-scroll-reflow-acsmtl deleted file mode 100644 index 68986a8c39..0000000000 --- a/orientation-scroll-reflow-acsmtl +++ /dev/null @@ -1,267 +0,0 @@ ---- -id: acsmtl -name: Orientation scrolls do not exist at 320 CSS pixels without a content exception -rules_format: 1.1 -rule_type: atomic -description: | - This rule checks content does not require a scroll in the orientation of the text when the viewport is set to 320 CSS pixels. -accessibility_requirements: - wcag21:1.4.10: # Reflow (AA) - forConformance: true - failed: not satisfied - passed: further testing needed - inapplicable: further testing needed -input_aspects: - - DOM Tree - - CSS Styling -acknowledgments: - authors: - - Helen Burge - previous_authors: - - ---- - -## Applicability - -This rule applies to any element containing visible content that is rendered when the viewport is set to 320 CSS pixels in the orientation of the text. The user can scroll in the orientation of the text (for example, horizontal scrolling in left-to-right text). - -## Expectation (1) - -Each target element: -- Does not require scrolling in the direction of reading to access content when viewed at 320 CSS pixels; or -- Scrolls only where the content meets a valid exception, where a two-dimensional layout is required for meaning or functionality. - -## Background - -This rule supports WCAG 2.1 Success Criterion 1.4.10 Reflow, which requires that content can be presented without loss of information or functionality and without requiring scrolling in two dimensions at a width equivalent to 320 CSS pixels. For horizontally written languages, users should be able to scroll vertically only, without needing horizontal scrolling to read text. Exceptions exist for content that inherently requires a two-dimensional layout, such as maps, data tables, or code blocks. - -### Assumptions - -There are no assumptions. - -### Accessibility Support - -There are no accessibility support issues known. - -## Examples - -### Passed - -#### Passed Example 1 - -Text content reflows and only vertical scrolling is required. - -```html -
-

- This paragraph wraps correctly within the viewport and can be read - using vertical scrolling only. -

-
-``` - -#### Passed Example 2 - -Flexible layout prevents horizontal scrolling. - -```html - -
-

- All content reflows into a single column. -

-
-``` - -#### Passed Example 3 - -Navigation collapses into a menu at smaller viewport sizes. Meaning no horizontal scrolling is required in the reading direction. - -```html - - -``` - -#### Passed Example 4 - -Scrollable exception isolated to a data table. Meaning scrolling is limited to an exception (table requiring two-dimensional layout). - -```html -
- - - -
NameValue
ExampleData
-
-``` - -#### Passed Example 5 - -The carousel scrolls horizontally, but each panel fits the viewport. Each panel is readable without requiring scrolling within the panel itself. - -```html -
-
Panel 1
-
Panel 2
-
-``` - -#### Passed Example 6 - -Long text wraps without forcing horizontal scroll. - -```html -

- ThisIsAnExtremelyLongWordThatWrapsCorrectlyInsteadOfForcingScrolling. -

-``` - -#### Passed Example 7 - -Large data table requiring two-dimensional layout. - -```html - - - -
Column 1Column 2Column 3
DataDataData
-``` - -#### Passed Example 8 - -Map or graphical content. - -```html -
- -
-``` - -#### Passed Example 9 - -Video player with controls. - -```html - -``` - -#### Passed Example 10 - -Canvas or game interface requiring two-dimensional interaction. - -```html - -``` - -### Failed - -#### Failed Example 1 - -The page requires horizontal scrolling to read text. - -```html -
-

- This paragraph does not wrap and requires horizontal scrolling. -

-
-``` - -#### Failed Example 2 - -Unbreakable text forces scrolling. - -```html -

- ThisTextDoesNotWrapAndForcesTheUserToScrollHorizontallyToRead. -

-``` - -#### Failed Example 3 - -Overflow causes horizontal scroll in reading direction. - -```html -
-

- Users must scroll horizontally to read this text. -

-
-``` - -#### Failed Example 4 - -Navigation requires horizontal scrolling. Primary navigation requires scrolling in the reading direction. - -```html - -``` - -#### Failed Example 5 - -Content partially off-screen and requires scrolling to reveal. - -```html -
-

- This text is خارج the viewport and requires horizontal scrolling. -

-
-``` - -#### Failed Example 6 - -Multiple scroll directions required on page. - -```html -
-

- This content requires both horizontal and vertical scrolling. -

-
-``` - -#### Failed Example 7 - -Text inside the container requires sideways scrolling. Exceptions are incorrectly applied to text content. - -```html -
-

- The paragraph itself requires horizontal scrolling to read. -

-
-``` - -### Inapplicable - -#### Inapplicable Example 1 - -Preformatted code requiring horizontal scrolling. - -```html -
-function example() {
-    console.log("This line may require horizontal scrolling");
-}
-
-```