Create content-present-reflow-sc9kkf

_rules/content-present-reflow-sc9kkf

@@ -0,0 +1,257 @@
+---
+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 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 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
+
+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 remains fully available after reflow.
+
+```html
+<div style="max-width: 100%;">
+  <p>
+    All text content remains visible and accessible when the viewport is reduced.
+  </p>
+</div>
+```
+
+#### Passed Example 2
+
+Navigation collapses into a menu but remains accessible. Content is not removed, only not immeditately visible behind an accessible control.
+
+```html
+<button aria-expanded="false">Menu</button>
+<nav hidden>
+  <ul>
+    <li>Home</li>
+    <li>About</li>
+    <li>Contact</li>
+  </ul>
+</nav>
+```
+
+#### Passed Example 3
+
+Content is visually hidden on the first view but remains available programmatically and visual in a sub page.
+
+```html
+<p class="visually-hidden">
+  Additional instructions available to screen reader users.
+</p>
+```
+
+#### Passed Example 4
+
+Content is moved in the layout but still present.
+
+```html
+<style>
+  .sidebar {
+    order: 2;
+  }
+</style>
+<div class="sidebar">
+  <p>Sidebar content is still available, just repositioned.</p>
+</div>
+```
+
+#### Passed Example 5
+
+Images resize but are still visible.
+
+```html
+<img src="example.jpg" style="max-width: 100%;">
+```
+
+#### Passed Example 6
+
+Form fields collapse in an accordian but remain accessible when expended.
+
+```html
+<form>
+  <label for="name">Name</label>
+  <input id="name" type="text">
+</form>
+```
+
+#### Passed Example 7
+
+Content requiring two-dimensional layout (covered under reflow exceptions).
+
+```html
+<table>
+  <tr><th>Column</th><th>Column</th></tr>
+</table>
+```
+
+### Failed
+
+#### Failed Example 1
+
+Static content removed at smaller viewport.
+
+```html
+<style>
+  @media (max-width: 400px) {
+    .important-content {
+      display: none;
+    }
+  }
+</style>
+<div class="important-content">
+  This content disappears on smaller screens.
+</div>
+```
+
+#### Failed Example 2
+
+Navigation items removed instead of adapted.
+
+```html
+<style>
+  @media (max-width: 400px) {
+    nav li:nth-child(n+3) {
+      display: none;
+    }
+  }
+</style>
+<nav>
+  <ul>
+    <li>Home</li>
+    <li>About</li>
+    <li>Services</li>
+    <li>Contact</li>
+  </ul>
+</nav>
+```
+
+#### Failed Example 3
+
+Content visually clipped and inaccessible.
+
+```html
+<div style="height: 50px; overflow: hidden;">
+  <p>
+    Important content is hidden and cannot be accessed or revealed.
+  </p>
+</div>
+```
+
+#### Failed Example 4
+
+Content moved off-screen and not reachable when it should be visible.
+
+```html
+<div style="position: absolute; left: -9999px;">
+  Hidden content that cannot be accessed by users.
+</div>
+```
+
+#### Failed Example 5
+
+Interactive element missing at smaller viewport.
+
+```html
+<style>
+  @media (max-width: 400px) {
+    button {
+      display: none;
+    }
+  }
+</style>
+<button>Submit</button>
+```
+
+#### Failed Example 6
+
+Image removed without alternative.
+
+```html
+<style>
+  @media (max-width: 400px) {
+    img {
+      display: none;
+    }
+  }
+</style>
+<img src="important-diagram.png" alt="Important diagram">
+```
+
+#### Failed Example 7
+
+Collapsed content has no mechanism to access it.
+
+```html
+<div style="display: none;">
+  <p>This content is permanently hidden.</p>
+</div>
+```
+
+### Inapplicable
+
+#### Inapplicable Example 1
+
+Content explicitly hidden from all users.
+
+```html
+<div hidden>
+  Hidden content not intended for display.
+</div>
+```
+
+#### Inapplicable Example 2
+
+Content outside the user viewport by design (e.g. off-canvas patterns before interaction).
+
+```html
+<div aria-hidden="true" class="offscreen-menu">
+  Menu content appears only when activated.
+</div>
+```