R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Audio Caption Accessibility Fix

  • June 1, 2025

Audio Caption Accessibility Fix

Rule ID: audio-caption
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, EN 301 549

How to Fix the Problem

To ensure accessibility for deaf or hard-of-hearing users, every HTML5 <audio> element must include at least one <track> element with the attribute kind="captions". This element should point to a captions file that fully transcribes all meaningful audio content—including spoken dialogue, speaker identification, sound effects, and musical cues.

Example Implementation:

html
<audio controls>
<source src="mySpeech.mp3" type="audio/mp3">
<track src="captions_en.vtt" kind="captions" srclang="en" label="English captions">
<track src="captions_es.vtt" kind="captions" srclang="es" label="Spanish captions">
</audio>

Best Practices:

  • Use kind="captions" for captions, not subtitles. Captions include both dialogue and non-speech elements (like [applause] or [phone ringing]), which are essential for deaf users.

  • The src attribute must point to a valid WebVTT (.vtt) file.

  • srclang should use standardized language codes (e.g., en, es).

  • label helps users select the correct track when multiple are available.

  • The captions file should be synchronized with the audio and contain all meaningful sounds.

Why it Matters

Audio content without captions excludes users who are deaf or hard of hearing, making the experience inaccessible and non-compliant with accessibility standards. Captions provide a textual representation of all auditory elements—including speaker identity, sound effects, and background music—allowing users with hearing impairments to fully understand the content.

This accessibility feature ensures equal access to information and services for all users, in line with WCAG and legal mandates such as Section 508 and EN 301 549. Without captions, vital context may be lost, which could hinder understanding, especially in educational, commercial, or instructional materials.

Rule Description

Each HTML5 <audio> element must include a <track> child element with the kind="captions" attribute. This ensures that all spoken content and essential auditory cues are accessible through synchronized text captions.

The Algorithm (in simple terms)

  1. Locate every <audio> element on the page.

  2. Check whether it includes a <track> element.

  3. Confirm that the <track> element has a kind="captions" attribute.

  4. Ensure the src for the <track> is valid and points to a .vtt file containing synchronized captions.

Tags:
Share:

Leave A Comment