Animation Requirements for the Web

Animations include dynamic elements such as interactive graphics or videos, SVG animations, and web-based games.

When developing animations, follow NLR's design and coding requirements. Then use the multimedia quality assurance checklist to ensure your animation meets NLR standards.

Section 508 and Accessibility Requirements

Animations must be fully accessible and conform to WCAG 2.1 AA standards. For detailed development strategies, refer to the W3C Web Accessibility Initiative (WAI) guidelines.

Color and Contrast

Ensure text overlaying animations meets a minimum contrast ratio of 4.5:1. Never use color as the sole method of conveying critical information.

Focus

Ensure a highly visible on-screen focus indicator outlines the active interactive element as keyboard focus changes. Do not suppress the default focus ring unless replacing it with a more prominent custom style.

Keyboard Support

All interactive controls (buttons, sliders, hot spots) must be navigable and operable using only a keyboard (tab, enter, spacebar, arrow keys).

Screen Flickering

To prevent seizures, animations must not flicker or flash with a frequency between 2 Hz and 55 Hz.

Text Versions

Animations must have a text version that describes the speech, text, and key actions in the animation.

Timed Responses

When a timed response is required, users must be warned beforehand and allowed to extend or disable the time limit.

Technical Requirements

Animations should work on every browser in NLR's browser testing suite.