Os 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 a 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 WCAG 1.2.1: Apenas áudio e apenas vídeo (pré-gravado) (Nível A), que exige que seja fornecida uma alternativa textual para conteúdo apenas áudio pré-gravado. Também se enquadra nos requisitos da Secção 508 e EN 301 549. Os critérios de Nível A representam os requisitos de acessibilidade mais fundamentais — falhar em cumpri-los significa que existem barreiras significativas para utilizadores com deficiências.

Legendas vs. legendas de tradução

É importante compreender que legendas e legendas de tradução não são a mesma coisa:

• Legendas (kind="captions") são concebidas para utilizadores surdos e com dificuldades auditivas. Incluem diálogos, identificação de oradores, efeitos sonoros (por exemplo, “[porta bate]”), indicações musicais (por exemplo, “[música suave de piano]”) e outras informações áudio significativas.
• Legendas de tradução (kind="subtitles") são traduções linguísticas destinadas a utilizadores ouvintes que não compreendem a linguagem 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 significativa: quem está a falar, o que dizem e sons não verbais relevantes.
2. Adicione um elemento <track> dentro do seu elemento <audio>.
3. Defina o atributo kind como "captions".
4. Defina o atributo src como o caminho do seu ficheiro de legendas.
5. Use o atributo srclang para especificar a linguagem 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 é fortemente 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. As legendas de tradução 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 idiomas

<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últiplos idiomas garante uma acessibilidade mais ampla e é especialmente útil quando a sua audiência fala diferentes idiomas.

Exemplo de ficheiro de legendas WebVTT

Um ficheiro básico captions_en.vtt pode ter este aspeto:

WEBVTT

00:00:01.000 --> 00:00:04.000
[Música de introdução 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]

Note como as legendas incluem identificação de oradores (Apresentador:, Convidado:), sons não verbais ([Música de introdução 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

→