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

+``` 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");
+}
+
+``` 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
+
+```