Elementos <audio> devem ter uma faixa de legendas

Quando um elemento <audio> não tem uma faixa de legendas, toda a informação que transmite — diálogos, narração, efeitos sonoros, indicações musicais e identificação de oradores — torna-se completamente inacessível para utilizadores surdos ou surdocegos. Isto é considerado um problema de acessibilidade crítico porque impede grupos inteiros de utilizadores de acederem ao conteúdo.

Esta regra relaciona-se com o Critério de Sucesso 1.2.1 das WCAG: Só áudio e só vídeo (Pré-gravado) (Nível A), que requer que seja fornecida uma alternativa textual para conteúdo só áudio pré-gravado. Enquadra-se também nos requisitos da Section 508 e EN 301 549. Os critérios de Nível A representam os requisitos de acessibilidade mais fundamentais — não os cumprir significa que existem barreiras significativas para utilizadores com deficiências.

Legendas vs. Subtítulos

É importante compreender que legendas e subtítulos não são a mesma coisa:

• Legendas (kind="captions") são concebidas para utilizadores surdos e com deficiência auditiva. Incluem diálogos, identificação de oradores, efeitos sonoros (ex.: “[porta bate]”), indicações musicais (ex.: “[música suave de piano]”) e outras informações áudio relevantes.
• Subtítulos (kind="subtitles") são traduções linguísticas destinadas a utilizadores ouvintes que não compreendem a língua falada. Normalmente incluem apenas diálogos e narração.

Devido a esta distinção, deve usar kind="captions", não kind="subtitles", para satisfazer esta regra.

Como corrigir

1. Crie um ficheiro de legendas (normalmente no formato WebVTT .vtt) que inclua toda a informação áudio relevante: quem está a falar, o que dizem e sons não-discursivos relevantes.
2. Adicione um elemento <track> dentro do seu elemento <audio>.
3. Defina o atributo kind para "captions".
4. Defina o atributo src para o caminho do seu ficheiro de legendas.
5. Use o atributo srclang para especificar a língua das legendas.
6. Use o atributo label para dar à faixa um nome legível por humanos.

Embora apenas src seja tecnicamente obrigatório num elemento <track>, incluir kind, srclang e label é altamente recomendado para clareza e funcionalidade adequada.

Exemplos

Incorreto: <audio> sem faixa de legendas

<audio controls>
  <source src="podcast.mp3" type="audio/mp3">
</audio>

Isto falha a regra porque não há elemento <track> a fornecer legendas.

Incorreto: <track> com valor kind errado

<audio controls>
  <source src="podcast.mp3" type="audio/mp3">
  <track src="subs_en.vtt" kind="subtitles" srclang="en" label="English">
</audio>

Isto falha porque kind="subtitles" não satisfaz o requisito de legendas. Subtítulos não são um substituto para legendas.

Correto: <audio> com uma faixa de legendas

<audio controls>
  <source src="podcast.mp3" type="audio/mp3">
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
</audio>

Correto: <audio> com múltiplas faixas de legendas para diferentes línguas

<audio controls>
  <source src="interview.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="Subtítulos en español">
</audio>

Fornecer legendas em múltiplas línguas garante acessibilidade mais ampla e é especialmente útil quando a sua audiência fala diferentes línguas.

Exemplo de ficheiro de legendas WebVTT

Um ficheiro captions_en.vtt básico pode ser assim:

WEBVTT

00:00:01.000 --> 00:00:04.000
[Música intro animada]

00:00:04.500 --> 00:00:07.000
Apresentador: Bem-vindos ao programa, pessoal.

00:00:07.500 --> 00:00:10.000
Convidado: Obrigado por me receberem!

00:00:10.500 --> 00:00:12.000
[Aplausos da audiência]

Repare como as legendas incluem identificação de oradores (Apresentador:, Convidado:), sons não-discursivos ([Música intro animada], [Aplausos da audiência]) e o diálogo completo. Este nível de detalhe é o que torna as legendas eficazes para utilizadores surdos e surdocegos.

Learn more:

Deque Reference

Deque University - How To Fix

→