Does an auto play video with a pause button meet accessibility guidelines?
Question
Answer
The pause button is an important step, but remember that the pause button itself must also be accessible so every user can take advantage of it.
The pause button needs to:
- Meet contrast standards so it is clearly visible (1.4.11 Non-text Contrast - Level AA)
- Be operable by keyboard alone (2.1.1 Keyboard - Level A), and have a visual indication that shows when the button is in focus (2.4.7 Focus Visible - Level AA)
- Communicate its role, state, and name to the accessibility tree, such as by using the button or toggle button design pattern (4.1.2 Name, Role, Value - Level A)
The Guided Manual WCAG Audit Tool from Accessible Web includes helpful tools for checking color contrast, checking keyboard operation, and understanding interactive design patterns.
Videos with Flashes
Also consider whether the video contains flashes. For some users, flashing lights may cause headaches, dizziness, or even seizures, and they may not have time to stop the video before it begins to affect them.
Based on Success Criteria 2.3.1 Three Flashes or Below Threshold - Level A, if the video contains flashes, they must be either:
- Occur no more than 3 times per second,
- Occur in only a small area of the page, or
- Occur below the general flash and red flash thresholds
The Photosensitive Epilepsy Analysis Tool (PEAT) can help you check for any areas of concern, and more details are available in Understanding Success Criteria 2.3.1. Checking for autoplaying video is part of our comprehensive, manual WCAG audits; reach out for more info!
Free Tools to Continue Learning
Accessible Web RAMP
Monitor your website and manage your progress towards WCAG conformance.
Accessible Web Academy
Career specific courses to help power up your accessibility knowledge.
Newest Questions
How can I get started testing my website with a screen reader?
- Assistive Technology
- screen readers
What are some special cases where custom markup is recommended over HTML? Also, how do I know the correct ARIA label if the element is unavailable in HTML?
- aria
- custom widgets
How should third-party accessibility issues be included in Accessibility Conformance Reports (ACRs) or other documentation?
- acces
- accessibility conformance report
- third party
- vpat