From 49bcb665a45a49aadd198f252f9aba794727bb9a Mon Sep 17 00:00:00 2001 From: Wilco Fiers Date: Mon, 31 Aug 2026 12:13:29 +0200 Subject: [PATCH 1/2] Create content-present-reflow-sc9kkf Split from #2429. Original work by Helen Burge. Co-authored-by: HelenBurge <41951878+HelenBurge@users.noreply.github.com> --- _rules/content-present-reflow-sc9kkf | 285 +++++++++++++++++++++++++++ 1 file changed, 285 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..5f0d9ea131 --- /dev/null +++ b/_rules/content-present-reflow-sc9kkf @@ -0,0 +1,285 @@ +--- +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 + previous_authors: + - +--- + +## 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 7d42c7aa2ed78a1edf4d632e5161115057ec29d6 Mon Sep 17 00:00:00 2001 From: HelenBurge <41951878+HelenBurge@users.noreply.github.com> Date: Thu, 3 Sep 2026 14:02:39 +0100 Subject: [PATCH 2/2] Update content-present-reflow-sc9kkf Applied feedback from https://github.com/act-rules/act-rules.github.io/pull/2429/changes#r3924801295 --- _rules/content-present-reflow-sc9kkf | 58 +++++++--------------------- 1 file changed, 15 insertions(+), 43 deletions(-) diff --git a/_rules/content-present-reflow-sc9kkf b/_rules/content-present-reflow-sc9kkf index 5f0d9ea131..209f527394 100644 --- a/_rules/content-present-reflow-sc9kkf +++ b/_rules/content-present-reflow-sc9kkf @@ -23,14 +23,16 @@ acknowledgments: ## 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. +This rule applies to any non-excepted element containing visible content or functional components, requiring text to reflow when the viewport is set to a width of 320 CSS pixels for horizontal languages or a height of 256 CSS pixels for vertical languages; to align applicability more closely with these reflow requirements, it can be refined to target only visible content with a height of at least 320 CSS pixels on pages with vertical scrolling, or a height of at least 256 CSS pixels on pages with horizontal scrolling. ## 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. + +Retains all content and functionality when viewed with a height of at least 320 CSS pixels on pages with vertical scrolling, or a height of at least 256 CSS pixels on pages with horizontal scrolling: +- Does not cut-off, remove, or make content unavailable as a result of viewport constraints, zoom, or responsive behaviour; and +- Ensures that any content that is visually cut-off at this viewport size is still programmatically available and accessible to users, even if not immediately visible; and +- Allows a scroll because the content cannot change to the size of the screen without losing meaning. ## Background @@ -50,7 +52,7 @@ There are no accessibility support issues known. #### Passed Example 1 -Content reflows but remains fully available. +Content remains fully available after reflow. ```html
@@ -62,7 +64,7 @@ Content reflows but remains fully available. #### Passed Example 2 -Navigation collapses into a menu but remains accessible. Content is not removed, only hidden behind an accessible control. +Navigation collapses into a menu but remains accessible. Content is not removed, only not immeditately visible behind an accessible control. ```html @@ -77,7 +79,7 @@ Navigation collapses into a menu but remains accessible. Content is not removed, #### Passed Example 3 -Content is visually hidden but remains available programmatically. +Content is visually hidden on the first view but remains available programmatically and visual in a sub page. ```html -``` - -#### Passed Example 6 - Images resize but are still visible. ```html ``` -#### Passed Example 7 +#### Passed Example 6 -Form fields collapse but remain accessible. +Form fields collapse in an accordian but remain accessible when expended. ```html
@@ -130,7 +121,7 @@ Form fields collapse but remain accessible.
``` -#### Passed Example 8 +#### Passed Example 7 Content requiring two-dimensional layout (covered under reflow exceptions). @@ -144,7 +135,7 @@ Content requiring two-dimensional layout (covered under reflow exceptions). #### Failed Example 1 -Content removed at smaller viewport. +Static content removed at smaller viewport. ```html