Motion and media

Research and our take

Our recorded research compared reader preferences and accessibility tools across several projects. For this component, these observations informed Starlit’s approach:

• Sienna accessibility widget: Text, color, focus, pointer and motion adjustments in one interface. Our decision: Split the useful feature groups into separately imported modules.
• ExtenderX accessibility tools: Preference combinations, readable text, visible headings and reduced motion. Our decision: Use reversible descriptive presets without inferring a disability or making safety claims.

Starlit wrote the shared controller, scoped content adapters and component modules presented here. The referenced widgets are research sources, not browser dependencies. The component also draws on interface work in EvansWiki and PayCal.

Design reasoning

Let the reader reduce distraction and control playback before decorative effects become a barrier.

1. Start with the person’s task and the barrier they may encounter.
2. Use for pages with animation or media. Connect application owned animation engines to the shared preference event.
3. Keep the ordinary content and action usable before adding enhancement.
4. Enable device reduced motion, pause media, change another preference and confirm playback stays paused. Test a real caption track.

Usage pattern

Use for pages with animation or media. Connect application owned animation engines to the shared preference event.

Impact and tradeoffs

Reduced movement can improve comfort. Pausing playback must not unexpectedly restart sound when another setting changes.

Accessibility solutions

Always respect device reduced motion. Captions request authored tracks; this control does not create captions or an audio description.

Build accessible source content first. Personal preferences supplement semantic HTML, useful names, keyboard access and visible focus.

HTML

A concrete usage example. Host these assets on your own origin if you adapt the pattern. Read the source and credits before reuse.

<link rel="stylesheet" href="/open-ui/accessibility/shared/content.css">
<script type="module"
  src="/open-ui/accessibility/components/motion-panel/index.js"></script>

<article id="reading" data-sdou-a11y-content data-default-theme="dark">
  <div data-sdou-a11y-prose>
    <h2 id="begin">Begin with a clear purpose</h2>
    <p>Readable text and useful controls belong together.</p>
    <h2 id="details">Consider the details</h2>
    <p>The page should remain usable before any enhancement loads.</p>
  </div>
</article>
<sdou-motion-panel target="#reading"
  storage-key="example.motion-panel.v1"></sdou-motion-panel>

CSS

This is the component stylesheet used inside its Shadow DOM. The shared ui.css supplies its base controls and content.css adapts the reading region. An empty component stylesheet deliberately inherits the shared UI.

.motion-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--sdou-ax-line);
  border-radius: 12px;
  font-size: 0.875rem;
}
.motion-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sdou-ax-teal);
  animation: gentle-shift 3s ease-in-out infinite;
}
.motion-preview[data-reduced="true"] .motion-dot {
  animation: none;
}
@keyframes gentle-shift {
  50% {
    transform: translateX(6px);
  }
}

JavaScript

This is the actual component module used by the live example. Imports, the base class and shared preferences are dependencies. Keep the component folder and shared folder in their relative positions.

import { A11yComponent, motion } from "../../shared/base.js?v=sdou20261029";
class MotionPanel extends A11yComponent {
  static styles = new URL("./component.css?v=sdou20261029", import.meta.url).href;
  render() {
    this.mount(
      "Keep the page calm.",
      "Your device motion setting is always respected. Paused media stays paused until you choose to play it.",
      motion() +
        '<div class="motion-preview"><span class="motion-dot" aria-hidden="true"></span><span data-motion-label></span></div><div class="actions"><button class="button secondary wide" type="button" data-pause>Pause page audio and video</button></div><p class="hint">Captions are available only when the page supplies an authored text track. This control does not create captions.</p>',
    );
  }
  initialize() {
    this.on(this.q("[data-pause]"), "click", () => {
      this.preferences.pauseMedia();
      this.say("Page audio and video paused.");
    });
  }
  update() {
    const reduce = this.target.dataset.sdouA11yMotion === "reduce";
    const sample = this.q(".motion-preview");
    if (sample) sample.dataset.reduced = String(reduce);
    const label = this.q("[data-motion-label]");
    if (label)
      label.textContent = reduce
        ? "Reduced motion is active."
        : "A gentle motion preview.";
  }
}
customElements.define("sdou-motion-panel", MotionPanel);

PHP integration

In your own application, PHP can render this HTML on the server. Here, the example is escaped text only. The library has no PHP runner or execution endpoint. The browser owns the interaction.

<?php
// Server render trusted structure and escape authored text.
// PHP does not implement or save these browser preferences.
declare(strict_types=1);
$title = 'A readable article';
$paragraph = 'Your authored content goes here.';
$e = static fn (string $value): string =>
    htmlspecialchars($value, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
?>
<link rel="stylesheet" href="/open-ui/accessibility/shared/content.css">
<script type="module"
  src="/open-ui/accessibility/components/motion-panel/index.js"></script>
<article id="reading" data-sdou-a11y-content data-default-theme="dark">
  <div data-sdou-a11y-prose>
    <h2 id="begin"><?= $e($title) ?></h2>
    <p><?= $e($paragraph) ?></p>
  </div>
</article>
<sdou-motion-panel target="#reading"
  storage-key="example.motion-panel.v1"></sdou-motion-panel>

API and dependencies

Element

sdou-motion-panel

target

A selector for the content region. Use a unique ID. Components sharing a target share its controller.

storage-key

A stable key for this project. Use the same key for controls targeting the same region. Preferences stay in browser storage when available.

Content

data-sdou-a11y-content marks the target; data-sdou-a11y-prose identifies reading copy. Use data-default-theme="dark" for a dark initial and reset preference.

Event

sdou:a11y-change is dispatched on the target with preferences, palette and reducedMotion in its detail.

Dependencies

Modern JavaScript modules, custom elements, Shadow DOM and native form controls. Dialog, speech, clipboard and fullscreen support depend on the feature and browser.

Read shared/base.js · Read the preference controller · Read the content adapter · Read the shared control styles

Testing and limitations

Enable device reduced motion, pause media, change another preference and confirm playback stays paused. Test a real caption track.

The original library validation records automated rule checks, 320px reflow, enlarged text, text spacing, state persistence and relevant functional checks. Unresolved automated Shadow DOM reference checks are recorded separately from browser dialog checks. These historical results are not a new audit of every integration.

Production review still needs assistive technology, touch, zoom, custom styles and representative content. See our testing scope and known gaps. Report a barrier to Starlit.

Related components

• Accessibility center
• Reading toolbar
• Typography studio