Acessibilidade de mídia

Derek Herman
Derek Herman
Joe Medley
Joe Medley

Publicado em 20 de agosto de 2020

As legendas e as descrições para leitores de tela são a única maneira de muitos usuários acessarem seus vídeos. Em algumas jurisdições, elas são até mesmo exigidas por lei ou regulamento. O formato WebVTT (trilhas de texto de vídeo da Web) é usado para descrever dados de texto com tempo, como legendas ou closed captions, para tornar seus vídeos mais acessíveis.

Adicionar tags <track>

Para adicionar legendas ou descrições para leitores de tela a um vídeo da Web, adicione uma tag <track> dentro de uma tag <video>. Além das legendas e descrições para leitores de tela, as tags <track> também podem ser usadas para títulos de capítulos e legendas.

Captura de tela mostrando legendas mostradas usando o elemento "track" no Chrome para Android.

A tag <track> é semelhante ao elemento <source> porque ambos têm um atributo src que aponta para o conteúdo referenciado. Para uma tag <track>, ela aponta para um arquivo WebVTT. O atributo label especifica como uma faixa específica pode ser identificada na interface.

Para fornecer faixas em vários idiomas, adicione uma tag <track> separada para cada arquivo WebVTT que você está fornecendo e indique o idioma usando o atributo srclang.

Confira este exemplo de tag <video> com duas tags <track>. Adicione um elemento <track> como filho do elemento <video>.

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
  <track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
  <track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
  <p>This browser does not support the video element.</p>
</video>

Você também pode ver um exemplo no Glitch.

Estrutura de arquivos WebVTT

Confira um arquivo WebVTT hipotético para a demonstração. É um arquivo de texto que contém uma série de dicas. Cada dica é um bloco de texto a ser mostrado na tela e o período em que ela é exibida.

WEBVTT

00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.

00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.

...

Cada item no arquivo de faixa é uma sequência. Cada sinalização tem um horário de início e de término, separados por uma seta, seguidos pelo texto da sinalização. As dicas também podem ter IDs, como railroad e manuscript. As dicas são separadas por uma linha em branco.

WEBVTT

railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth

manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.

Os tempos de sinalização estão no formato hours:minutes:seconds.milliseconds. A análise é rigorosa. Isso significa que os números precisam ser preenchidos com zeros, se necessário: horas, minutos e segundos precisam ter dois dígitos (00 para um valor zero) e milissegundos precisam ter três dígitos (000 para um valor zero). Há um excelente validador de WebVTT em Live WebVTT Validator, que verifica erros na formatação de tempo e problemas como horários não sequenciais.

Você pode criar um arquivo VTT manualmente, mas há muitos serviços que criam isso para você.

Como você pode ver nos exemplos anteriores, o formato WebVTT é bem simples. Basta adicionar seus dados de texto com o tempo.

No entanto, e se você quiser que as legendas sejam renderizadas em uma posição diferente com alinhamento à esquerda ou à direita? Talvez para alinhar as legendas com a posição do orador atual ou para não atrapalhar o texto na câmera. O WebVTT define configurações para fazer isso e muito mais, diretamente no arquivo .vtt. Observe como a posição da legenda é definida adicionando configurações após as definições de intervalo de tempo.

WEBVTT

00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.

Outro recurso útil é a capacidade de estilizar dicas usando CSS. Talvez você queira usar um gradiente linear cinza como plano de fundo, com uma cor de primeiro plano de papayawhip para todas as legendas e todo o texto em negrito colorido peachpuff.

video::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

video::cue(b) {
  color: peachpuff;
}

Se você quiser saber mais sobre o estilo e a inclusão de tags em dicas individuais, a especificação WebVTT é uma boa fonte de exemplos avançados.

Tipos de faixas de texto

Você notou o atributo kind do elemento <track>? Ele é usado para indicar a relação entre a faixa de texto e o vídeo. Os valores possíveis do atributo kind são:

  • captions: para legendas de transcrições e, possivelmente, traduções de qualquer áudio. Adequado para pessoas com deficiência auditiva e nos casos em que o vídeo está sendo reproduzido sem som.
  • subtitles: para legendas, ou seja, traduções de fala e texto em um idioma diferente do idioma principal do vídeo.
  • descriptions: para descrições de partes visuais do conteúdo do vídeo. Adequado para pessoas com deficiência visual.
  • chapters: é exibido quando o usuário navega pelo vídeo.
  • metadata: não visível e pode ser usado por scripts.

Agora que você entende o básico sobre como disponibilizar um vídeo na página da Web, talvez se pergunte sobre casos de uso mais complexos. Saiba mais sobre frameworks de mídia e como eles podem ajudar você a adicionar vídeos à sua página da Web, além de oferecer recursos avançados.