Video (responsive)

Testing

Check that the responsive video:

• can be used with a keyboard only, with no keyboard traps
• provides visible focus indicators for all interactive controls
• maintains a logical tab order between the video and its controls
• does not cause unexpected changes in focus when playing, pausing or entering full screen mode
• communicates the purpose of the video and available controls to screen reader users
• announces relevant state changes appropriately where supported by the player
• does not repeatedly interrupt screen reader users with unnecessary announcements
• provides captions for pre-recorded video that contains speech
• provides a transcript where it provides a useful alternative to the video content
• remains usable at 400% zoom and on smaller screens
• maintains the visibility and usability of controls across different screen sizes and orientations
• does not rely on colour alone to communicate the status of controls such as play, pause or mute
• ensures captions remain readable when zoomed and across different screen sizes
• does not auto play audio unexpectedly
• provides users with a clear way to pause, stop or control playback
• does not introduce unexpected page movement, scrolling or disorientation when the video is interacted with or resized

Developer considerations

When implementing a responsive video and where possible:

• use native HTML video elements and controls where possible
• make sure all video functionality is fully operable using a keyboard
• provide an accessible name for the video using an associated heading, label or other suitable technique
• make sure all controls have accessible names and expose appropriate roles and states to assistive technologies
• provide captions for pre-recorded content containing speech
• provide transcripts where appropriate
• ensure captions can be accessed and remain readable across viewport sizes and zoom levels
• make sure screen reader users can identify the purpose of the video and available controls
• avoid automatically playing video content where possible
• never autoplay video with audio enabled
• provide users with clear controls to play, pause, stop, mute or adjust playback as applicable
• make sure focus remains visible throughout interaction with the video component
• preserve a logical reading and focus order when interacting with controls or entering full screen mode
• make sure the video container resizes appropriately across screen sizes without causing horizontal scrolling
• maintain an appropriate aspect ratio when the viewport changes
• make sure controls remain visible and usable when zoomed to 400% or viewed on smaller screens
• make sure there is sufficient touch target size and spacing, with a target size of at least 24 × 24 CSS pixels
• do not rely solely on colour to communicate control state or availability
• avoid significant layout shifts that could cause user disorientation when the video loads or resizes
• test the component with common assistive technologies and across a range of viewport sizes and device orientations