Command Palette

Search for a command to run...

Accessibility use case

Seizure and Motion Safety

Motion Safety access guidance for Tamil DS

How users stay safe from flashing or harmful motion, supported by WCAG 2.2.2 (Pause, Stop, Hide) and 2.3.1 (Three Flashes).

Detailed guidance for real users, assistive technology, component behavior, testing, and release checks.

Who this supports

People with photosensitive epilepsy, vestibular disorders, migraine, motion sensitivity, nausea triggers, or attention sensitivity.

Assistive technology

Reduced motion settingBrowser animation controlsOS accessibility settingsContent blockers

Primary risk

Flashing, parallax, auto-moving carousels, and large motion can cause discomfort, nausea, migraine, or seizure risk.

Real user scenario

A user opens a learning page with animated cards and auto-playing media. They have reduced motion enabled. The page should show the same content without large transitions, flashing effects, or auto-advancing movement.

How people use this access method

1

Some users set prefers-reduced-motion at OS level.

2

Large movement, parallax, zoom transitions, and spinning loaders can trigger symptoms.

3

Flashing content can create seizure risk when frequency and contrast are unsafe.

4

Auto-moving content removes user control.

5

Safe motion keeps meaning without forcing movement.

Design requirements

These requirements are product requirements, not optional polish. If a Tamil DS component or page breaks one of these rules, users may be blocked even when the visual interface looks finished.

Respect prefers-reduced-motion across CSS and JavaScript animations.

Avoid flashing content and rapid high-contrast changes.

Pause or disable auto-playing carousels and background videos.

Use opacity or instant state changes instead of large spatial movement when reduced motion is active.

Provide pause, stop, or hide controls for moving content.

Do not use animation as the only way to communicate state.

Keep loading indicators subtle and non-spinning where possible.

Avoid parallax and scroll-jacking in documentation and product flows.

Component behavior implications

Accessibility becomes real at component level. The same page may pass content review but fail when dialogs, forms, menus, cards, or status messages do not expose the right behavior.

Carousel must not auto-advance without controls.

Dialog and Sheet transitions should reduce to near-instant changes when motion is reduced.

Toast should not slide aggressively across the viewport.

Skeleton shimmer should be subtle or disabled under reduced motion.

Charts should avoid looping animated drawing for essential data.

Confetti and celebration effects must be disabled when reduced motion is active.

Testing script

Run this script before release. Automated checks are useful, but they do not replace trying the actual access method and completing a real task from start to finish.

Enable reduced motion in the OS and reload the page.

Check CSS animations and JavaScript animation libraries.

Look for auto-playing movement.

Check flashing, blinking, and high-contrast animation.

Confirm all information remains available without motion.

Verify pause controls exist for moving media.

Test loaders and skeletons.

Common failures and fixes

Failure

Reduced motion handles CSS but not JavaScript animation

Read the preference in animation components and disable or simplify motion there too.

Failure

Carousel keeps moving automatically

Disable auto-advance or provide visible pause and respect reduced motion.

Failure

Celebration effect fires on every success

Make celebration optional and disable it for reduced-motion users.

Failure

Loader spins continuously

Use a static progress label or subtle non-looping indicator.

Tamil public-service context

Tamil DS must work for Tamil-first, English-first, and bilingual users across phones, desktops, kiosks, classrooms, offices, and public-service counters. These notes keep the guidance connected to local product reality.

Public-service interfaces should prioritize calm state changes over excitement.

Education pages for Tamil learners should avoid motion that pulls attention away from reading.

Reduced-motion preference should be treated as a hard user setting, not a suggestion.

Release checklist

Reduced motion is respected.

No unsafe flashing exists.

Moving content can pause.

State remains clear without animation.

Celebration and decorative motion are optional.