SiteLint documentation and guidelines

Audio alternative

Description

Providing an audio alternative refers to offering a text or visual alternative for audio content, ensuring that users who cannot hear the audio, either due to a hearing impairment or because they are in a noisy or sound-sensitive environment, can still access the information. This practice is crucial for accessibility and inclusivity, allowing all users to understand and engage with the content regardless of their ability to hear the audio.

Disabilities impacted

  • Hearing impairments: users who are deaf or hard of hearing cannot access audio content without an alternative means of obtaining the information.
  • Cognitive disabilities: users with cognitive disabilities may benefit from text alternatives that allow them to process information at their own pace.
  • Situational impairments: users in environments where audio cannot be played (e.g., noisy places, libraries) need text or visual alternatives to access the information.

Why it matters

Providing audio alternatives ensures that all users, regardless of their hearing ability, can access and understand the content. This practice is essential for creating an inclusive and accessible web experience. It also benefits users who might not be able to play audio due to environmental constraints or personal preferences.

Coding problems and solutions

Common coding problems

  • Lack of transcripts: audio content is provided without a corresponding text transcript.
  • No captions for videos: videos with audio lack captions, making them inaccessible to users who cannot hear the audio.
  • Inaccessible audio controls: audio players that are not accessible to users with disabilities, preventing them from controlling playback.

How to fix it

Provide text transcripts

For all audio content, provide a text transcript that includes all spoken words and relevant sounds.

Correct example
<audio controls>
    <source src="audio-file.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
<p>Transcript: This is the transcript of the audio content, including all spoken words and relevant sounds.</p>
Incorrect example
<audio controls>
    <source src="audio-file.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

Add captions to videos

Ensure that all videos with audio include captions that display spoken dialogue and relevant sounds.

Correct example
<video controls>
    <source src="video-file.mp4" type="video/mp4">
    <track kind="captions" src="captions.vtt" srclang="en" label="English">
    Your browser does not support the video element.
</video>
Incorrect example
<video controls>
    <source src="video-file.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>

Ensure accessible audio controls

Make sure that audio players are accessible, allowing users to control playback using keyboards and assistive technologies.

Correct example
<audio controls>
    <source src="audio-file.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>
Incorrect example
<audio>
    <source src="audio-file.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

Known limitations

  • Real-time audio: providing real-time text alternatives for live audio can be challenging but is necessary for accessibility. Consider live captioning or providing summaries after the event.
  • Complex audio content: for complex audio content, ensure that transcripts and captions are detailed and accurate, including descriptions of non-verbal sounds.
  • Testing across devices: test the accessibility of audio alternatives across different devices and assistive technologies to ensure they are usable and effective.

Resources