# Keep motion optional in an HTML reading document

Canonical: https://githtml.com/guides/reduced-motion-reading-documents
Published: 2026-09-26
Publisher: WaveTech LLC / gitHtml

Make a reading document useful without animation, then remove or reduce nonessential movement for readers who request reduced motion. Keep content visible by default and avoid scroll-triggered reveals that depend on scripts. If motion communicates a process, provide a static sequence or written explanation that preserves the same information.

## Question the purpose of each animation

A report rarely needs a continuously moving background, pulsing badge, or repeated chart entrance. Those effects can compete with the text and make it harder to maintain attention. Identify the information each animation adds. If removing it changes nothing except decoration, a static presentation may be the better default.

Some motion can explain a sequence, such as a request moving through several services. Even then, the reader should control whether to engage with it, and the document should describe the sequence in text. A looping animation that requires watching several cycles to understand is a poor sole source of technical evidence.

## Keep the static state complete

A common template hides sections until an animation script marks them visible. When scripts are off or a motion preference changes behavior, the report may appear empty. Reverse that dependency: the complete content should exist and be visible first, with optional effects layered on afterward. In gitHtml, JavaScript starts off, making this baseline especially important.

A reduced-motion media query can adjust CSS animation and transition behavior, but it does not automatically control every embedded video, animated image, or third-party player. Inventory those assets separately. Replace an animated visual with a meaningful still or a step-by-step explanation when the motion is not essential to the reader's task.

## Review navigation and state changes

Smooth scrolling and elaborate disclosure transitions can also introduce movement. Keep navigation predictable and avoid making a reader wait for an animation before reaching content. If changing the motion preference leaves an element invisible or in an intermediate state, the implementation needs correction rather than a note telling users to change their preferences.

1. List animated CSS, images, video, and script-driven effects separately.
2. Remove decorative loops from the reading path.
3. Check the document with reduced motion requested.
4. Confirm all content remains visible without animation scripts.
5. Provide a static explanation for any animated process diagram.
6. Avoid claiming that one media query alone establishes full accessibility.

````css
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .decorative-motion { animation: none; transition: none; }
}
````

## Sources and further reading

- [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)

## Related guides

- [Describe architecture diagrams as relationships, not shapes](https://githtml.com/guides/text-descriptions-for-architecture-diagrams)
- [Give data tables headers that survive nonvisual reading](https://githtml.com/guides/accessible-data-table-headers)
- [Write links that remain meaningful outside their paragraph](https://githtml.com/guides/descriptive-links-html-reports)
- [Declare language and text direction in multilingual HTML](https://githtml.com/guides/language-and-direction-html-documents)

Editorial approach: https://githtml.com/guides/about