Media plays automatically on Next.js
What this is
3 video or audio elements start on their own. Sound clashes with screen readers, and moving content distracts people with attention or vestibular difficulties.
Who it affects
- Screen reader users
- People with cognitive disabilities
- People with low vision
Standards
How to fix it
- Remove `autoplay` so the visitor starts media themselves.
- If it must autoplay (decorative background video), keep it muted, short, and provide a visible pause button.
- Show the native `controls` for audio and video.
On Next.js
Remove the `autoPlay` prop or add `controls` and a pause toggle; if it must autoplay, keep it `muted`, `loop`-limited and pausable.
Other platforms
Prompt for an AI coding tool
Scan your site with AccessibilityBrief and you get a ready-to-use prompt for this problem, with the exact elements on your pages filled in.
Check your own website
Paste a web address. The free scan checks one page and shows what it finds.
More fixes
Automated testing detects only a portion of WCAG issues. Manual testing is required to assess full conformance.