Seção 5

Multimídia

Alternativas textuais para imagens, alternativas para áudio e vídeo, audiodescrição e controles de reprodução.

1. Marcação 2. Comportamento 3. Conteúdo/Informação 4. Apresentação/Design 5. Multimídia 6. Formulário

5.1

Fornecer alternativa em texto para toda imagem

WCAG A1.1.1

Ver recomendações 1.11 e 3.2. Toda imagem informativa necessita de texto alternativo — incluindo miniaturas de vídeo, ícones funcionais e imagens em links.

WCAG 1.1.1

Incorreto

<!-- ❌ Imagem de link sem alt -->
<a href="/ver-video">
  <img src="thumbnail-video.jpg">
</a>
<a href="/mapa">
  <img src="icone-localizacao.svg">
</a>

Correto

<!-- ✓ Alt descreve destino do link -->
<a href="/ver-video">
  <img src="thumbnail-video.jpg"
    alt="Assistir: Pronunciamento do Governador
    sobre infraestrutura — 5min 30s">
</a>
<a href="/mapa">
  <img src="icone-localizacao.svg" alt="">
  <span>Ver no mapa</span>
</a>

Dica

Quando uma imagem está dentro de um link, o alt da imagem descreve o destino do link. Se o link já tem texto visível, a imagem pode ter alt="" para evitar redundância.

5.2

Fornecer alternativa em texto e/ou sonora para vídeos e áudios

WCAG A1.2.1, 1.2.2, 1.2.3

Ver recomendação 3.4. Vídeos com áudio precisam de legendas (para surdos) e audiodescrição (para cegos). Vídeos silenciosos precisam de alternativa em texto.

WCAG 1.2.1WCAG 1.2.2WCAG 1.2.3

Incorreto

<!-- ❌ Vídeo institucional sem acessibilidade -->
<video src="institucional.mp4"
  width="800" autoplay>
</video>

Correto

<!-- ✓ Vídeo com legenda sincronizada -->
<video controls preload="metadata">
  <source src="institucional.mp4" type="video/mp4">
  <source src="institucional.webm" type="video/webm">
  <track kind="captions"
    src="institucional.pt-BR.vtt"
    srclang="pt-BR"
    label="Legenda em português"
    default>
  <p>
    Seu browser não suporta vídeo HTML5.
    <a href="institucional.mp4">
      Baixar vídeo MP4 (45 MB)
    </a> |
    <a href="institucional-transcricao.html">
      Ler transcrição
    </a>
  </p>
</video>

Dica

Ferramentas gratuitas para criar legendas: Subtitle Edit (Windows), Aegisub, e a integração automática do YouTube (revisar após geração automática). O formato WebVTT é o padrão moderno.

5.3

Oferecer audiodescrição para vídeos

WCAG A1.2.3, 1.2.5

Vídeos com informação visual relevante que não é transmitida pelo áudio devem ter audiodescrição — narração descrevendo cenas, expressões, textos na tela e outros elementos visuais.

WCAG 1.2.3WCAG 1.2.5

Incorreto

<!-- ❌ Vídeo de demonstração sem audiodescrição -->
<!-- Mostra tela sendo operada visualmente
     sem descrever o que está acontecendo -->
<video src="tutorial-sistema.mp4" controls></video>

Correto

<!-- ✓ Vídeo com faixa de audiodescrição -->
<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track kind="captions"
    src="tutorial-legenda.vtt"
    srclang="pt-BR"
    label="Legenda" default>
  <track kind="descriptions"
    src="tutorial-audiodesc.vtt"
    srclang="pt-BR"
    label="Audiodescrição">
</video>

<!-- Alternativa: link para versão com audiodescrição embutida -->
<a href="tutorial-com-audiodescricao.mp4">
  Versão com audiodescrição integrada
</a>

Dica

A audiodescrição pode ser embutida na trilha de áudio principal (melhor opção) ou como faixa separada. Para tutoriais de sistemas, descreva verbalmente cada passo no próprio roteiro de gravação.

5.4

Fornecer controle de reprodução de mídia

WCAG A2.1.1, 1.4.2

Todo conteúdo de áudio e vídeo deve ter controles acessíveis: play/pause, volume, velocidade e closed captions. Os controles devem ser operáveis por teclado.

WCAG 2.1.1WCAG 1.4.2

Incorreto

<!-- ❌ Player customizado sem acessibilidade -->
<div class="player">
  <div class="btn-play" onclick="play()">▶</div>
  <div class="progress-bar" onclick="seek(event)"></div>
  <div class="btn-volume" onclick="mute()">🔊</div>
</div>

Correto

<!-- ✓ Controles HTML nativo (mais acessível) -->
<video controls
  aria-label="Tutorial de acesso ao portal">
  <source src="tutorial.mp4" type="video/mp4">
  <track kind="captions" src="legenda.vtt" default>
</video>

<!-- Se player customizado for necessário: -->
<div role="group" aria-label="Controles do vídeo">
  <button type="button" aria-label="Reproduzir">
    <svg aria-hidden="true"><!-- play icon --></svg>
  </button>
  <input type="range"
    aria-label="Progresso do vídeo"
    min="0" max="100" value="0">
  <button type="button" aria-label="Ativar legendas">
    CC
  </button>
</div>

Dica

O elemento <video controls> do HTML5 é acessível nativamente na maioria dos navegadores modernos. Players customizados (como Video.js) devem implementar o padrão ARIA para media players.

Seção anterior

4. Apresentação/Design

Próxima seção

6. Formulário

Ver todas as seções do eMAG 3.1