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. +
++ All content reflows into a single column. +
+| Name | Value |
|---|---|
| Example | Data |
+ ThisIsAnExtremelyLongWordThatWrapsCorrectlyInsteadOfForcingScrolling. +
+``` + +#### Passed Example 7 + +Large data table requiring two-dimensional layout. + +```html +| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Data | Data | Data |
+ This paragraph does not wrap and requires horizontal scrolling. +
++ ThisTextDoesNotWrapAndForcesTheUserToScrollHorizontallyToRead. +
+``` + +#### Failed Example 3 + +Overflow causes horizontal scroll in reading direction. + +```html ++ Users must scroll horizontally to read this text. +
++ This text is خارج the viewport and requires horizontal scrolling. +
++ This content requires both horizontal and vertical scrolling. +
++ The paragraph itself requires horizontal scrolling to read. +
+
+function example() {
+ console.log("This line may require horizontal scrolling");
+}
+
+```