Inspect web pages for automatically playing audio and video, then remove autoplay or adjust required playback with muted defaults and accessible pause controls. Review keyboard access so users can stop media promptly.
Use when reviewing rendered HTML, interactive components, or design-system patterns related to Avoid autoplaying media. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Run score Not tested
See how to installChecks whether audio or video starts automatically when a web page loads, and helps adjust it so users can control playback. Changes include removing the autoplay attribute from media elements. For videos that need automatic playback, it checks the muted attribute and a prominent pause control. On pages with multiple media elements, a button that stops them together is also considered.
Use it when reviewing accessibility on pages containing video or components that include audio. It helps examine how unexpected sound can interrupt screen reader speech, and how playback can burden people in quiet environments or with limited bandwidth. Keyboard access to the controls is another part of the review.
The approach is to avoid automatic audio playback. Where video autoplay is necessary, check that it starts muted and has readily available controls for stopping it. Also check whether playback stops after five seconds or offers a way to stop it. Verify changes using browser accessibility features or assistive technology.
This overview was written by AI (OpenAI Codex) from the public SKILL.md. Check the original below for the exact behavior.
AI checked the SKILL.md for operations that need care and for setup requirements. The score comes only from actually running the skill (hands-on test).
Not counted in the score. Rated by AI (OpenAI Codex) as of Oct 23, 2026. Treat it as a guide and read the original before installing.
Review the instructions the agent will receive before you install.
Autoplaying audio drowns out screen reader speech, startles users, and wastes bandwidth—providing user control is essential for accessibility and good UX.
Verify no audio or video autoplays on page load. If autoplay is essential, confirm media is muted by default and pause controls are immediately accessible via keyboard within the first few tab stops.
Remove autoplay attributes from media elements. If autoplay is required, add muted attribute and provide prominent, keyboard-accessible pause controls. Consider adding a global pause button for pages with multiple media elements.
Explain how autoplaying media interferes with screen readers, startles users with cognitive disabilities, and creates barriers for users in quiet environments or with limited bandwidth.
Review the rendered markup and interactive states that affect Avoid autoplaying media. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/rules/accessibility/autoplay-media
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Create and review custom 404 pages that help visitors recover from broken or moved links through search and navigation. Check the rendered page and HTTP response so missing content returns a proper 404 status.
Audit or create a dedicated About page that explains a website’s purpose and identifies its people or organization. Review the rendered output and supporting information, including expertise and contact details, to find gaps.
Review and add automated accessibility checks for components, pages, and continuous integration workflows. Use axe-based tools to detect structural and attribute issues, while identifying checks that still need keyboard or screen reader testing.
Review sign-in, registration, multi-factor authentication, and account recovery for accessibility barriers. Find blocked paste, difficult code entry, and inaccessible backup methods, then suggest authentication paths that support password managers, autofill, or device approval.
Review form errors, success messages, and live updates so screen reader users receive important notifications. Check the HTML delivered to the browser, announcement settings, display duration, and dismissal controls, then identify specific elements that need changes.
Review HTML tables so screen reader users can understand how headers and data relate. Check header markup, table descriptions, and merged cells, then identify specific fixes and ways to verify them.