Preview
Animation everyone can use
OSAnimator brings back what made Flash fun: timelines, tweens, symbols and buttons. Movies are small files in an open format that play in any modern browser with nothing to install, and the player makes every one of them accessible on its own.
The Ant Report
Wendell lives in Apogee, Texas, a made-up launch town on the Gulf coast. He keeps field notes on Mound 7, the fire ant mound behind the launch bleachers. Choose a day from his notebook. Try it with the keyboard: press Tab to reach the buttons.
This browser can't run the movie, so you're seeing a still picture. In the movie, Wendell keeps field notes on Mound 7: count day, launch day, and flood day, when the fire ants link legs and float away as a raft.
What the player does on its own
The author draws a button or makes a loop. The player does the rest, for every movie, without being asked:
| When the author… | The player… |
|---|---|
| Adds a button | A real HTML button: in the tab order, works with Enter, Space, click or tap (on release, so a press can be cancelled by sliding off), with a visible focus ring and a target of at least 24 by 24 pixels. Tab order follows the stage. |
| Makes motion | Pause and Restart controls, always there. |
| (The viewer prefers reduced motion) | The movie starts paused on its poster frame and plays only when asked. |
| Places text | Real text, available to screen readers. |
| Adds a shape with a description | The description is available to screen readers. |
| Labels a scene | The scene's heading is announced when the scene changes. If the focused button disappears, focus moves to the heading, which becomes visible. |
| Writes an announcement | Spoken through a polite live region. |
| Embeds the player | A figure named by the movie's title, with its description; nothing traps the keyboard. |
The details, with the WCAG 2.2 success criteria each one meets, are in the format specification.
Put a movie on your page
One script and one element. Old browsers, and visitors with JavaScript turned off, see the picture and description you put inside it.
<script type="module" src="https://osanimator.com/player/0.1.0/osa-player.js"></script>
<osa-player src="movie.osa.json">
<img src="movie-poster.svg" alt="What the movie shows">
<p>A description for browsers that can't run the player.</p>
</osa-player>Get started has the files and the format.