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