# Motion, Reflow, and Text Spacing

Reduced motion, orientation, text resize, reflow at 320px, text spacing, timing, flashing, CSS presentation.

## Criteria

| Standard | Criteria                                                                                                                                                                      |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| WCAG 2.2 | 1.3.4 Orientation (AA), 1.4.4 Resize Text (AA), 1.4.10 Reflow (AA), 1.4.12 Text Spacing (AA), 2.2.1 Timing Adjustable (A), 2.2.2 Pause Stop Hide (A), 2.3.1 Three Flashes (A) |
| RGAA 4.1 | 10.1-10.6 CSS presentation, 10.8-10.10 Hidden content/sensory info, 13.1-13.12 Consultation                                                                                   |

### Orientation — WCAG 1.3.4 (AA) / RGAA 13.9

Content must work in both portrait and landscape. Never lock orientation unless essential (e.g., piano app).

### Resize Text — WCAG 1.4.4 (AA) / RGAA 10.4

Text must be resizable to 200% without loss of content or functionality. Use relative units (`rem`, `em`). Avoid fixed heights on text containers. Test at browser zoom 200%.

### Reflow — WCAG 1.4.10 (AA) / RGAA 10.11

No horizontal scrolling at 320px width (vertical content) or 256px height (horizontal content). Exceptions: maps, diagrams, video, data tables. Use mobile-first responsive design.

### Text Spacing — WCAG 1.4.12 (AA) / RGAA 10.12

No content loss when users adjust: line-height 1.5x, paragraph spacing 2x, letter-spacing 0.12x, word-spacing 0.16x font size. Avoid fixed heights and `overflow: hidden` on text containers.

### Timing Adjustable — WCAG 2.2.1 (A) / RGAA 13.1

For time limits: users can turn off, adjust (10x), or extend (20-second warning). Exceptions: real-time events, essential limits, >20 hour limits.

### Pause, Stop, Hide — WCAG 2.2.2 (A) / RGAA 13.7-13.8

Auto-starting moving/blinking/scrolling content lasting >5 seconds must have pause/stop/hide mechanism. Auto-updating content must have control to pause or adjust frequency.

### Three Flashes — WCAG 2.3.1 (A) / RGAA 13.7

Nothing flashes more than 3 times per second, or flash area is below 21,824 pixels.

### RGAA 10.1 — CSS for presentation (Level A)

Are stylesheets used to control information presentation?

#### Test 10.1.1 — No presentation elements in source

Verify absence of presentation elements: `<basefont>`, `<big>`, `<blink>`, `<center>`, `<font>`, `<marquee>`, `<s>`, `<strike>`, `<tt>`. Also verify absence of `<u>` if the doctype is not HTML5.

Methodology:

1. Verify absence of presentation elements `<basefont>`, `<big>`, `<blink>`, `<center>`, `<font>`, `<marquee>`, `<s>`, `<strike>`, `<tt>`.
2. Verify absence of `<u>` only if the document DOCTYPE is not HTML5.
3. If so, the test is validated.

#### Test 10.1.2 — No presentation attributes in source

Verify absence of presentation attributes: `align`, `alink`, `background`, `bgcolor`, `border`, `cellpadding`, `cellspacing`, `char`, `charoff`, `clear`, `color`, `compact`, `frameborder`, `hspace`, `link`, `marginheight`, `marginwidth`, `text`, `valign`, `vlink`, `vspace`, `size` (except on `<select>`), `width` (except on `<img>`, `<object>`, `<embed>`, `<canvas>`, `<svg>`), `height` (except on `<img>`, `<object>`, `<embed>`, `<canvas>`, `<svg>`).

Methodology:

1. Verify absence of the listed presentation attributes.
2. If so, the test is validated.

#### Test 10.1.3 — No spaces used for layout

Spaces must not be used to separate letters in a word, simulate tables, or simulate text columns.

Methodology:

1. Disable CSS styles on the document.
2. Verify absence of spaces used:
   - Between letters of a word;
   - To create margin or alignment effects;
   - To simulate tables or columns.
3. If so, the test is validated.

### RGAA 10.2 — Visible content remains present without CSS (Level A)

Does visible content carrying information remain present when stylesheets are disabled?

#### Test 10.2.1 — Information persists without CSS

Methodology:

1. Disable CSS styles on the document.
2. Compare the unstyled document with the styled document.
3. Verify that visible information-carrying content remains present in the unstyled document.
4. If so, the test is validated.

### RGAA 10.3 — Information remains comprehensible without CSS (Level A)

Does information remain comprehensible when stylesheets are disabled?

#### Test 10.3.1 — Reading order is logical without CSS

Methodology:

1. Disable CSS styles on the document.
2. Verify that the order in which content is implemented does not cause comprehension problems.
3. If so, the test is validated.

### RGAA 10.4 — Text remains readable at 200% zoom (Level AA)

Does text remain readable when character size is increased to at least 200%?

#### Test 10.4.1 — No information loss at 200% zoom

Increasing character size to at least 200% must not cause information loss, via:

- Browser text zoom function;
- Browser graphical zoom function;
- Site-specific text enlargement or zoom component.

Methodology:

1. Verify text remains present and readable when:
   - Browser text zoom is set to 200%;
   - Browser graphical zoom is set to 200%;
   - Custom zoom features provided by the document are used.
2. If so, the test is validated.

#### Test 10.4.2 — All text can be enlarged to 200%

Text enlargement to at least 200% must be possible for all text on the page, via:

- Browser text zoom function;
- Browser graphical zoom function;
- Site-specific text enlargement or zoom component.

Methodology:

1. Verify text is effectively enlarged when:
   - Browser text zoom is set to 200%;
   - Browser graphical zoom is set to 200%;
   - Custom zoom features provided by the document are used.
2. If so, the test is validated.

#### Cas particuliers (10.4)

Exceptions to this criterion — content where the user has no customization possibility:

- Subtitles embedded in video;
- Text in images;
- Text within a `<canvas>` element.

### RGAA 10.5 — CSS color declarations used correctly (Level AA)

Are CSS font color and background color declarations used correctly?

#### Test 10.5.1 — Font color declaration accompanied by background color

Each CSS `color` declaration on an element likely to contain text must be accompanied by a `background-color` declaration (at minimum inherited from a parent).

Methodology:

1. Find text with color styling in the document (excluding default colors like links).
2. Determine the containing element and verify a computed `background-color` value exists.
3. If so, the test is validated.

#### Test 10.5.2 — Background color declaration accompanied by font color

Each CSS `background`/`background-color` declaration on an element likely to contain text must be accompanied by a `color` declaration (at minimum inherited from a parent).

Methodology:

1. Find text with color styling in the document (excluding default colors).
2. Determine the containing element and verify a computed `color` value exists.
3. If so, the test is validated.

#### Test 10.5.3 — Background image accompanied by fallback background color

Each CSS background image (`background`, `background-image`) on an element likely to contain text must be accompanied by a `background-color` declaration (at minimum inherited from a parent).

Methodology:

1. Find text with a background image (`background-image` property).
2. Determine the containing element and verify that if the background image is absent, text remains readable.
3. If so, the test is validated.

### RGAA 10.6 — Link visibility relative to surrounding text (Level A)

Is each link whose nature is not obvious visible relative to surrounding text?

#### Test 10.6.1 — Color-only links have sufficient contrast and non-color indicators

Each text link signaled only by color, whose nature is not obvious, must meet these conditions:

- Link color has a contrast ratio >= 3:1 against surrounding text;
- Link has a non-color visual indication on hover;
- Link has a non-color visual indication on focus.

Methodology:

1. Find link elements (`<a>` or elements with `role="link"`).
2. For each link that could be confused with normal text when signaled only by color, verify the contrast between the link font color and surrounding text font color is at least 3:1.
3. This verification must be done for all link states presented with different colors: unvisited, visited, active, hover, and focus.
4. If so for each link, the test is validated.

### RGAA 10.8 — Hidden content and assistive technologies (Level A)

Should hidden content be ignored by assistive technologies?

#### Test 10.8.1 — Hidden content uses appropriate hiding method

Each hidden content item must meet one of these conditions:

- The hidden content is meant to be ignored by assistive technologies;
- The hidden content is not meant to be ignored and is made available to assistive technologies following a user action (keyboard or pointer) on a preceding element, or via focus repositioning.

Methodology:

1. Find hidden content (elements with `hidden`, `aria-hidden`, or CSS classes/styles that hide content).
2. For each hidden content, verify that:
   - Either the content is meant to be ignored by assistive technologies (e.g., a visit counter);
   - Or the content is not meant to be ignored and is made available via:
     - A user action (keyboard or pointer) on a preceding element;
     - A programmatic function that repositions focus on the content.
3. If so for each hidden content, the test is validated.

#### Notes techniques (10.8)

WAI-ARIA `aria-hidden` (`true` or `false`) inhibits rendering to assistive technologies without affecting visibility: content with `aria-hidden="true"` is not vocalized but remains visible.

Unless the content controlled by `aria-hidden` is not meant to be rendered by assistive technologies, the `aria-hidden` value must be consistent with the displayed/hidden state on screen.

HTML5 `hidden` attribute makes content unavailable in the generated DOM (similar to `type="hidden"` on form controls).

Temporary inconsistent states are acceptable (e.g., making an element available but display depends on a later action) — the final state is what matters.

### RGAA 10.9 — Information not conveyed by shape, size, or position alone (Level A)

Information must not be given solely by shape, size, or position.

#### Test 10.9.1 — Text information not conveyed by shape/size/position alone

Methodology:

1. Find text information conveyed by shape, size, or position.
2. For each, verify an alternative means to recover the information exists.
3. If so, the test is validated.

#### Test 10.9.2 — Image information not conveyed by shape/size/position alone

Methodology:

1. Find image information conveyed by shape, size, or position.
2. For each, verify an alternative means to recover the information exists.
3. If so, the test is validated.

#### Test 10.9.3 — Time-based media information not conveyed by shape/size/position alone

Methodology:

1. Find time-based media information conveyed by shape, size, or position.
2. For each, verify an alternative means to recover the information exists.
3. If so, the test is validated.

#### Test 10.9.4 — Non-time-based media information not conveyed by shape/size/position alone

Methodology:

1. Find non-time-based media information conveyed by shape, size, or position.
2. For each, verify an alternative means to recover the information exists.
3. If so, the test is validated.

### RGAA 10.10 — Alternative information means are relevant (Level A)

Is the alternative means of conveying information (beyond shape, size, or position) implemented in a relevant way?

#### Test 10.10.1 — Text alternative information means is relevant

Methodology:

1. Find text information conveyed by shape, size, or position.
2. For each, verify the alternative means is relevant (transmits information in all contexts and for all users).
3. If so, the test is validated.

#### Test 10.10.2 — Image alternative information means is relevant

Methodology:

1. Find image information conveyed by shape, size, or position.
2. For each, verify the alternative means is relevant.
3. If so, the test is validated.

#### Test 10.10.3 — Time-based media alternative information means is relevant

Methodology:

1. Find time-based media information conveyed by shape, size, or position.
2. For each, verify the alternative means is relevant.
3. If so, the test is validated.

#### Test 10.10.4 — Non-time-based media alternative information means is relevant

Methodology:

1. Find non-time-based media information conveyed by shape, size, or position.
2. For each, verify the alternative means is relevant.
3. If so, the test is validated.

### RGAA 13.1 — User control of time limits (Level A)

Does the user have control of each time limit modifying content?

#### Test 13.1.1 — Refresh processes have user controls

Each refresh process (`<object>`, `<embed>`, `<svg>`, `<canvas>`, `<meta>`) must meet one of these conditions:

- User can stop or restart the refresh;
- User can increase the time limit between refreshes by at least 10x;
- User is warned of imminent refresh and has at least 20 seconds to extend;
- Time limit between refreshes is at least 20 hours.

Methodology:

1. Find refreshes initiated by `<object>`, `<embed>`, `<svg>`, `<canvas>`, or `<meta http-equiv="refresh" content="[counter]">`.
2. For each refresh, verify one of the above conditions is met.
3. If so, the test is validated.

#### Test 13.1.2 — Meta redirect is immediate

Each `<meta>` redirect must be immediate.

Methodology:

1. Find automatic redirects via `<meta http-equiv="refresh" content="0;URL='[target]'" />`.
2. Verify the redirect is immediate.
3. If so, the test is validated.

#### Test 13.1.3 — Script-based redirects have user controls

Each script-based redirect must meet one of these conditions:

- User can stop or restart the redirect;
- User can increase the time limit before redirect by at least 10x;
- User is warned of imminent redirect and has at least 20 seconds to extend;
- Time limit before redirect is at least 20 hours.

Methodology:

1. Find automatic script-based redirects (e.g., countdown timers).
2. For each, verify one of the above conditions is met.
3. If so, the test is validated.

#### Test 13.1.4 — Session time limits have user controls

Each session time-limiting process must meet one of these conditions:

- User can remove the time limit;
- User can increase the time limit;
- Time limit before session end is at least 20 hours.

Methodology:

1. Find session time-limiting processes (e.g., after authentication).
2. For each, verify one of the above conditions is met.
3. If so, the test is validated.

#### Cas particuliers (13.1)

When the time limit is essential (cannot be removed without fundamentally changing content or functionality), the criterion is not applicable. Example: RSS feed refresh is not essential (criterion applies); automatic redirect to a new page version from an obsolete URL is essential (criterion does not apply).

### RGAA 13.2 — No new window without user action (Level A)

No new window must open without user action.

#### Test 13.2.1 — No automatic window opening

Methodology:

1. Verify no new window (pop-up or pop-under) opens on document load.
2. If so, the test is validated.

### RGAA 13.3 — Downloadable documents have accessible versions (Level A)

Does each downloadable office document have an accessible version, if necessary?

#### Test 13.3.1 — Downloadable documents are accessible or have accessible alternatives

Each downloadable office document must meet one of these conditions:

- The document is accessibility-compatible;
- An accessible alternative version is available for download;
- An accessible HTML alternative version is available.

Methodology:

1. Find links and form controls for downloading office-format files.
2. For each file, verify an accessible version exists:
   - PDF: analyze with PAC (PDF Accessibility Checker) for accessibility errors;
   - .doc/.docx: use Microsoft Office accessibility checker (2010+);
   - .odt: verify with OpenOffice against the office document checklist;
   - EPUB/DAISY: verify with an EPUB/DAISY editor against the checklist;
   - .html: analyze the document's accessibility.
3. If so for each file, the test is validated.

### RGAA 13.4 — Accessible document versions offer same information (Level A)

Does each accessible version offer the same information?

#### Test 13.4.1 — Accessible version contains same information

Methodology:

1. Find downloadable office-format files with accessible alternative versions.
2. For each pair, open both documents and verify they provide the same information.
3. If so for each pair, the test is validated.

### RGAA 13.5 — Cryptic content has alternatives (Level A)

Does each cryptic content (ASCII art, emoticons, cryptic syntax) have an alternative?

#### Test 13.5.1 — Cryptic content has title or contextual definition

Each cryptic content must meet one of these conditions:

- A `title` attribute is available;
- A definition is given by adjacent context.

Methodology:

1. Find cryptic content (ASCII art, emoticons, cryptic syntax).
2. For each, verify that:
   - Either a definition is available via a `title` attribute (on a link, form control, `<abbr>`, etc.);
   - Or a definition is given in adjacent context (immediately before or after).
3. If so, the test is validated.

### RGAA 13.6 — Cryptic content alternatives are relevant (Level A)

Is the alternative for each cryptic content relevant?

#### Test 13.6.1 — Cryptic content alternative is relevant

Methodology:

1. Find cryptic content (ASCII art, emoticons, cryptic syntax).
2. For each, verify the given definition is relevant.
3. If so, the test is validated.

### RGAA 13.7 — Flashes and brightness changes (Level A)

Are sudden luminosity changes or flash effects used correctly?

#### Test 13.7.1 — Image/multimedia flash effects within limits

Each image or multimedia element (`<video>`, `<img>`, `<svg>`, `<canvas>`, `<embed>`, `<object>`) causing brightness change or flash must meet one of:

- Effect frequency is less than 3 per second;
- Total cumulative area of effects is <= 21,824 pixels.

Methodology:

1. Find blinking content or flash effects from images, video, or animations (`<img>`, `<svg>`, `<canvas>`, `<embed>`, `<object>`, `<video>`).
2. For each, verify frequency < 3/second or cumulative area < 21,824 pixels.
3. If so, the test is validated.

#### Test 13.7.2 — Script-based flash effects within limits

Each script causing brightness change or flash must meet same conditions.

Methodology:

1. Find blinking/flash content generated by scripts.
2. Verify frequency < 3/second or cumulative area < 21,824 pixels.
3. If so, the test is validated.

#### Test 13.7.3 — CSS-based flash effects within limits

Each CSS animation causing brightness change or flash must meet same conditions.

Methodology:

1. Find blinking/flash content generated by CSS animations.
2. Verify frequency < 3/second or cumulative area < 21,824 pixels.
3. If so, the test is validated.

### RGAA 13.8 — Moving/blinking content is controllable (Level A)

Is each moving or blinking content controllable by the user?

#### Test 13.8.1 — Auto-starting moving content has controls

Each auto-starting moving content must meet one of:

- Duration is <= 5 seconds;
- User can stop and restart the movement;
- User can show and hide the moving content;
- User can display all information without movement.

Methodology:

1. Find auto-starting moving content (images, scripts, CSS effects) triggered on page load or content display.
2. For each, verify one of the above conditions is met.
3. If so, the test is validated.

#### Test 13.8.2 — Auto-starting blinking content has controls

Each auto-starting blinking content must meet one of:

- Duration is <= 5 seconds;
- User can stop and restart the blinking;
- User can show and hide the blinking content;
- User can display all information without blinking.

Methodology:

1. Find auto-starting blinking content (images, scripts, CSS effects) triggered on page load or content display.
2. For each, verify one of the above conditions is met.
3. If so, the test is validated.

Note: stopping or pausing content only during focus (e.g., effect suspended while focused) is not a conformant mechanism. For progress bars, the criterion is not applicable.

### RGAA 13.9 — Orientation support (Level AA)

Is content viewable regardless of screen orientation?

#### Test 13.9.1 — Content works in both orientations

Each content must verify (except special cases):

- Viewing is possible in any screen orientation;
- Content remains the same regardless of orientation (though presentation and access method may differ).

Methodology:

1. View the document in portrait mode then landscape mode.
2. Verify viewing is possible in both orientations and content remains the same.
3. If so, the test is validated.

#### Cas particuliers (13.9)

Interfaces where device orientation is essential (games, piano, bank check deposit, etc.) are exempt. If the interface is the only way to access the service, an alternative should be provided.

## Patterns

**Respect reduced motion:**

```html
<!-- Tailwind: disable transitions when user prefers -->
<div class="transition duration-300 motion-reduce:transition-none">...</div>
```

```css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

**Reflow at 320px** — no horizontal scroll:

```html
<!-- BAD: fixed columns at mobile -->
<div class="grid grid-cols-3">...</div>

<!-- GOOD: responsive columns -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-16">...</div>
```

**Text spacing** — avoid fixed heights on text containers:

```html
<!-- BAD: overflow clips text when spacing increases -->
<p class="h-100 overflow-hidden">...</p>

<!-- GOOD: allows expansion -->
<p class="min-h-100">...</p>
```