Regra de acessibilidade: Elementos `<video>` devem ter legendas

Sobre esta regra de acessibilidade

As legendas são a forma principal através da qual utilizadores surdos e com dificuldades auditivas acedem à parte áudio do conteúdo de vídeo. Quando um vídeo não tem legendas, estes utilizadores conseguem ver o conteúdo visual mas perdem tudo o que é comunicado através do som — incluindo diálogos falados, narração, música, sons ambientes e efeitos sonoros que fornecem contexto ou significado. Isto cria uma barreira crítica à compreensão.

Esta regra relaciona-se com o WCAG 2.0/2.1/2.2 Critério de Sucesso 1.2.2: Legendas (Pré-gravadas) ao Nível A, que exige que sejam fornecidas legendas para todo o conteúdo áudio pré-gravado em media sincronizada. É também exigido sob a Secção 508 e EN 301 549. Porque este é um requisito de Nível A, representa a linha de base mínima para acessibilidade — falhar em fornecer legendas é uma das questões de acessibilidade mais impactantes que um vídeo pode ter.

Legendas vs. Legendas de idioma

É importante compreender a diferença entre legendas e legendas de idioma, pois servem propósitos diferentes:

Legendas (kind="captions") são desenhadas para utilizadores surdos e com dificuldades auditivas. Incluem todo o diálogo mais descrições de áudio não-falado significativo como efeitos sonoros, música, identificação de oradores e outras pistas auditivas (ex: “[porta bate]”, “[música orquestral dramática]”, “[aplausos da audiência]”).
Legendas de idioma (kind="subtitles") são traduções de idioma do diálogo e narração, destinadas a utilizadores ouvintes que não compreendem a língua falada. As legendas de idioma geralmente não incluem descrições de áudio não-falado.

Para conformidade de acessibilidade, deve usar kind="captions", não kind="subtitles".

O que faz boas legendas

Boas legendas vão além de transcrever diálogos. Devem:

Identificar quem está a falar quando não é visualmente óbvio
Incluir efeitos sonoros significativos (ex: “[telefone a tocar]”, “[vidro a estilhaçar]”)
Descrever música quando é relevante (ex: “[música suave de piano]”, “[canção pop animada a tocar]”)
Notar silêncio ou pausas significativas quando transmitem significado
Estar sincronizadas com precisão com o áudio
Usar ortografia, gramática e pontuação corretas

Como corrigir o problema

Adicione um elemento <track> dentro do seu elemento <video> com os seguintes atributos:

src — o URL do ficheiro de legendas (tipicamente em formato WebVTT .vtt)
kind — definido como "captions"
srclang — o código de idioma das legendas (ex: "en" para inglês)
label — uma etiqueta legível por humanos para a pista (ex: "English")

Apenas src é tecnicamente obrigatório, mas kind, srclang e label são fortemente recomendados para clareza e para garantir que tecnologias assistivas e navegadores lidam com a pista corretamente.

Exemplos

Incorreto: Vídeo sem legendas

<video width="640" height="360" controls>
  <source src="presentation.mp4" type="video/mp4">
</video>

Este vídeo não tem elemento <track>, por isso utilizadores surdos e com dificuldades auditivas não conseguem aceder a nenhum conteúdo áudio.

Incorreto: Usar legendas de idioma em vez de legendas

<video width="640" height="360" controls>
  <source src="presentation.mp4" type="video/mp4">
  <track src="subs_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

Embora isto forneça uma pista de texto, kind="subtitles" não satisfaz o requisito de legendas. Legendas de idioma tipicamente incluem apenas diálogo e não transmitem informação áudio não-falada.

Correto: Vídeo com legendas

<video width="640" height="360" controls>
  <source src="presentation.mp4" type="video/mp4">
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English">
</video>

Correto: Vídeo com legendas em múltiplos idiomas

<video width="640" height="360" controls>
  <source src="presentation.mp4" type="video/mp4">
  <track src="captions_en.vtt" kind="captions" srclang="en" label="English" default>
  <track src="captions_es.vtt" kind="captions" srclang="es" label="Español">
</video>

O atributo default indica qual pista de legendas deve estar ativa por defeito quando o utilizador tem legendas ativadas.

Exemplo de ficheiro de legendas WebVTT

Um ficheiro básico captions_en.vtt parece-se com isto:

WEBVTT

00:00:01.000 --> 00:00:04.000
[música animada a tocar]

00:00:05.000 --> 00:00:08.000
Sarah: Bem-vindos à nossa conferência anual!

00:00:09.000 --> 00:00:12.000
[aplausos da audiência]

00:00:13.000 --> 00:00:17.000
Sarah: Hoje vamos explorar três tópicos principais.

Note como as legendas identificam o orador, descrevem sons não-falados e estão sincronizadas com marcas de tempo específicas.

Learn more: