diff --git a/_rules/content-present-reflow-sc9kkf.md b/_rules/content-present-reflow-sc9kkf.md new file mode 100644 index 0000000000..cc122bd183 --- /dev/null +++ b/_rules/content-present-reflow-sc9kkf.md @@ -0,0 +1,290 @@ +--- +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 + +Starting from a baseline mid-range desktop resolution of 1280 x 1024 pixels, this rule requires content to scale cleanly down to smaller viewports without forcing users to scroll in two dimensions. It applies to any element containing visible content or functional components that excludes components that inherently require a two-dimensional layout to be understood. When scaling down to a width of 320 CSS pixels for horizontal languages (or a height of 256 CSS pixels for vertical languages, equivalent to 400% browser zoom), content must smoothly reflow. + +## Expectation + +For each target element, when the viewport is set to 320 by 256 CSS pixels, the content is not cut off, removed, or obscured by another element, except if one of the following is true: + +- the hidden content can be scrolled into view, or +- an [instrument][] is available to reveal the content. + +## 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. + +The person testing the content is aware of the content's requirements to allow word wrap and specific spacing, for example, a programming language like Python. + +### Assumptions + +There are no assumptions. + +### Accessibility Support + +There are no accessibility support issues known. + +## Examples + +### Passed + +#### Passed Example 1 + +Content remains fully available after reflow. + +```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 not immeditately visible behind an accessible control. + +```html + + +``` + +#### Passed Example 3 + +Content is visually hidden on the first view but remains available programmatically and visual in a sub page. + +```html +

+ Additional instructions available to screen reader users. +

+``` + +#### Passed Example 4 + +Content is moved in the layout but still present. + +```html + + +``` + +#### Passed Example 5 + +Images resize but are still visible. + +```html + +``` + +#### Passed Example 6 + +Form fields collapse in an accordian but remain accessible when expended. + +```html +
+ + +
+``` + +#### Passed Example 7 + +Content requiring two-dimensional layout (covered under reflow exceptions). + +```html + + +
ColumnColumn
+``` + +#### Passed Example 8 + +Python code that allows a scroll as cannot include a word wrap to function. + +```html + + + + Passing Code Reflow + + + + +
def check_data(items):
+    for item in items:
+        if item.status == "active" and item.value > 100:
+            print(f"Valid ID: {item.id} with high value.")
+ +``` + +### Failed + +#### Failed Example 1 + +Static 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 when it should be visible. + +```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 + +Content explicitly hidden from all users. + +```html + +``` + +#### Inapplicable Example 2 + +Content outside the user viewport by design (e.g. off-canvas patterns before interaction). + +```html + +``` + +[instrument]: #instrument 'Definition of instrument'