Os elementos <audio> devem ter uma faixa de legendas

Quando um elemento <audio> não possui 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 aceder 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 — não os cumprir significa que existem barreiras significativas para utilizadores com deficiências.

Legendas vs. legendagens

É importante compreender que legendas e legendagens 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 significativas.
• Legendagens (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 significativa: quem está a falar, o que dizem e sons relevantes que não sejam fala.
2. Adicione um elemento <track> dentro do seu elemento <audio>.
3. Defina o atributo kind como "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 é 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 existe um elemento <track> que forneça 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. Legendagens 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 uma acessibilidade mais ampla e é especialmente útil quando a sua audiência fala diferentes línguas.

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 receberam!

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

Note como as legendas incluem identificação de oradores (Apresentador:, Convidado:), sons que não sejam fala ([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

→