Video

On this page

Example

Designer guidance

Developer guidance

Content editor guidance

Accessibility 

Support

Designer Guidance

When to use

Use the video component when:

• Video adds value beyond text or images.
• You need to demonstrate a process, showcase a story or deliver information that benefits from motion or audio.
• Training, tutorials, or testimonials need to be embedded directly within the page alongside related content.

Accessibility requirement: Always provide a transcription as an alternative way to consume the content.

When not to use

Avoid using this component:

• If the information can be communicated effectively with text or images, reducing potential accessibility barriers.
• If the video does not add value or may create unnecessary accessibility barriers.
• If no transcript is available and cannot be provided.

How to use

• Place videos as close as possible to related content for context.
• Always include a caption summarising the purpose or subject of the video.
• Provide captions and transcripts to support accessibility and SEO.
• Ensure transcript text is accurate, accessible, and easy to read, ensuring it serves as an effective alternative or complement to video content.

Behaviours


• The [View transcript] toggle appears below the caption link.
• The transcript is hidden by default.
• Clicking [View transcript] reveals the transcript and replaces the toggle label with [Hide transcript].
• Clicking [Hide transcript] hides transcript and reverts to the initial state.

Developer Guidance

Best practices

• Videos must not autoplay, especially with sound.
• Provide controls for play, pause, mute, volume, and fullscreen.
• Ensure all controls are keyboard operable and expose ARIA roles.
• Respect user preferences (e.g. reduced motion).
• Maintain logical focus order and visible focus indicators.
• The transcript toggle must be operable with both keyboard and assistive technology.

Content Editor Guidance

Use a consistent structure when writing transcripts:

1. Scene descriptions:
   

• Format: In brackets and bold.
• Purpose: To describe what the viewer would see in the video. Write these in a brief and neutral tone to set the scene.
• Example:
  [Opening Scene: Inspirational music begins. The screen fades in with slow-motion footage of volunteers...].

1. Voice over lines:
   

• Format: Written like a script, using italics for emphasis where needed, but plain and readable otherwise.
• Example:

• [Narrator]:
“At the British Red Cross, we believe in the power of kindness."

1. On-Screen Text Annotations:
   

• Format: In brackets and bold, clearly labeled and relevant to the scene.
• Purpose:
To ensure that the written transcript provides a complete and inclusive representation of the video, capturing both spoken content and visual elements like on-screen text.
• Example:

  [On-screen text: “Maya’s Story”].

Accessibility

An accessible video must include:

• Captions for all content.
• An accurate transcript as a full alternative to the video.
• Keyboard-accessible player controls.
• No autoplay.
• Responsive scaling without losing content.
• Clear visible focus indicators.
• Logical screen-reader structure for caption, transcript toggle, and controls.

If the transcript toggle is used, ensure the expanded/collapsed states are communicated to screen readers.

WCAG Success Criteria

• 1.1.1 Non-text Content (Level A)
  Provide a transcript.
• 1.2.2 Captions (Prerecorded) (Level A)
  Include captions for all prerecorded videos so users who are deaf or hard of hearing can follow along.
• 1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)
  Provide audio descriptions or a transcript for videos with important visual information not covered by the audio track.
• 1.4.10 Reflow (Level AA)
  Video players must resize and reflow responsively without horizontal scrolling.
• 1.4.12 Text Spacing (Level AA)
  Ensure captions, transcript links, and any surrounding text remain readable with custom text spacing applied.
• 2.1.1 Keyboard (Level A)
  All player functions (play, pause, volume, scrub, fullscreen) must be operable via keyboard alone.
• 2.1.2 No Keyboard Trap (Level A)
  Users must be able to tab into and out of the video component freely without losing focus.