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
After completing a major accessibility overhaul, How do I ensure my website stays accessible?
- shifting left
When is it and when is it not appropriate to have skip links on your content on the page?
- skip links
How do you audit more complex keyboard navigation situations like where a component exposes more content?
- keyboard navigation
- manual auditing
Aside from having a physical keyboard in front of you, what other applications exist for keyboards with assistive technologies?
- external keyboard
- keyboard navigation