Acessibilidade de mídia

Derek Herman
Derek Herman
Joe Medley
Joe Medley

Neste artigo, você aprenderá sobre o formato WebVTT (faixas de texto de vídeos da Web), que é usado para descrever dados de texto com marcação de tempo, como legendas para tornar os vídeos mais acessíveis ao público.

A acessibilidade não é como a cereja de um bolo. Nunca é qualquer coisa que você coloca na esperança de apresentá-lo mais tarde. Legendas e leitor de tela as descrições são a única maneira pela qual muitos usuários podem interagir com seus vídeos e, em alguns jurisdições, elas são exigidas por lei ou regulamentação.

Adicionar tags <track>

Para adicionar legendas ou descrições do leitor de tela a um vídeo na Web, adicione um <track> em uma tag <video>. Além de legendas e leitor de tela as tags <track> também podem ser usadas para legendas e títulos de capítulos. A tag <track> também pode ajudar os mecanismos de pesquisa a entender o que há em um vídeo. No entanto, esses recursos estão fora do escopo deste artigo.

Captura de tela mostrando as legendas mostradas usando o elemento track no Chrome no Android
Captura de tela mostrando as legendas mostradas usando o elemento track no Chrome no Android

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

Para fornecer faixas em vários idiomas, adicione uma tag <track> separada para cada arquivo WebVTT fornecido e indique o idioma usando srclang .

Um exemplo de tag <video> com duas tags <track> é mostrado abaixo. Também há um exemplo que você pode acessar no Glitch (fonte).

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>

Estrutura de arquivos WebVTT

Abaixo está um arquivo WebVTT hipotético para a demonstração vinculada acima. O arquivo é uma arquivo de texto que contém uma série de dicas. Cada sinal é um bloco de texto a ser exibido na tela e o período durante o qual ela será 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 é chamado de cue. Cada sinal tem um horário de início e horário de término separados por uma seta, com um sinal na linha abaixo. Sinais podem opcionalmente, também têm IDs como railroad e manuscript no exemplo abaixo. Os sinais são separados por uma linha vazia.

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 dos sinais estão no formato hours:minutes:seconds.milliseconds. A análise é rigorosa. Ou seja, os números precisam ser preenchidos com zeros, se necessário: horas, minutos e segundos. deve ter dois dígitos (00 para um valor zero) e os milissegundos devem ter três dígitos (000 para um valor zero). Existe um excelente validador WebVTT em Live WebVTT Validator, que verifica erros na formatação dos horários, e problemas como tempos não sequenciais.

É possível criar um arquivo VTT manualmente, já que há vários serviços que podem criar para você.

Como você pode ver em nossos exemplos anteriores, o formato WebVTT é bem simples. Basta adicionar seus dados de texto junto com as marcações de tempo.

Mas e se você quiser que suas legendas sejam renderizadas em uma posição diferente com o alinhamento à esquerda ou à direita? Talvez para alinhar as legendas com o apresentador atual. ou para ficar longe do texto na câmera. O WebVTT define as configurações para isso, e muito mais, diretamente no .vtt. Observe como o posicionamento da legenda é definido ao adicionar após as definições do 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 em peachpuff.

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

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

Se quiser saber mais sobre estilo e marcação de nomes 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 específica e o vídeo. A 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 é tocando sem som.
  • subtitles: para legendas, ou seja, traduções de fala e texto em um 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: serve para ser exibido quando o usuário está navegando no vídeo.
  • metadata: não visível e pode ser usado por scripts.

Agora que você conhece os fundamentos de como disponibilizar um vídeo e torná-lo acessível na sua página da Web, talvez você se pergunte sobre casos de uso mais complexos. A seguir, você Saiba mais sobre frameworks de mídia e como eles podem ajudar você a adicionar vídeos na sua página da web, além de fornecer recursos avançados.