Oferecer imagens e mídia com alternativas

Neste capítulo você vai incluir recursos locais sem tornar a informação dependente deles. O objetivo é terminar uma tarefa pequena e conferir seu resultado no Mirante do Mucuripe.

Seu ponto de partida

Estude depois do capítulo 08. Retome a referência se uma experiência anterior ficou alterada. Use o exemplo 09-imagens-midia do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa. Você não precisa copiar arquivos da etapa anterior.

Abra index.html da sua cópia no navegador e o mesmo arquivo num editor de texto simples. Para mídia, ferramenta de conferência e JSON, use o teste HTTP local explicado no README. Abrir ou testar não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Anote sua previsão antes de salvar e recarregar. Compare o resultado e investigue o erro antes de avançar. Ao terminar cada experiência, restaure somente a mudança indicada, para que a próxima parta dos valores da referência. Você pode parar depois de uma lição.

Alternativa depende do papel da imagem

A figura do Mirante é um diagrama original de três passos, não uma foto de um lugar real. Seu alt descreve a sequência. Figcaption apresenta uma legenda visível. Uma legenda não substitui automaticamente a alternativa; cada uma atende a uma situação de leitura. Uma imagem puramente decorativa pode usar alt vazio quando não comunica informação necessária. Não escreva que o arquivo é uma fotografia se ele mostra um desenho. Width e height informam dimensões originais, e height auto permite preservar a proporção quando o CSS reduz a largura.

Faça na sua cópia

Confira a figura em Conhecer o percurso. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

<img src="assets/percurso.png" width="960" height="480"
  alt="Diagrama de três passos: ler a agenda, escolher uma atividade e conferir as orientações.">

Mude uma coisa e preveja

Troque somente a legenda visível por Um caminho pequeno para escolher uma atividade.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A legenda muda, a figura mantém a proporção e o alt continua disponível.

Se não acontecer

Confira src e o nome real da imagem. Se a figura sumir, uma legenda não significa que o arquivo foi encontrado.

Áudio deve poder ser escolhido

O áudio incluído é um sinal de um segundo, sem fala ou música de terceiros. A página explica sua função antes do controle. Controls oferece reprodução e pausa; não há autoplay. A informação da agenda continua no texto. Para mídia com fala, a alternativa precisa comunicar o conteúdo falado, como uma transcrição. Um texto genérico dizendo áudio de uma palestra não entrega o que foi ensinado. Escolha o recurso pelo que ajuda o aluno a entender, não apenas para decorar a página com um player.

Faça na sua cópia

Confira o sinal e toque ou pause pelo controle. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

<audio controls preload="metadata">
  <source src="assets/sinal.wav" type="audio/wav">
  Seu navegador não reproduz este áudio.
</audio>

Mude uma coisa e preveja

Troque somente a frase que descreve o áudio por Sinal breve para começar uma experiência.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O texto muda e o controle continua disponível. A agenda não exige ouvir o som.

Se não acontecer

Confira o caminho e o volume do controle se não tocar. Não ligue autoplay para tentar provar que o recurso existe.

Vídeo também precisa de contexto

A demonstração mostra a página sendo usada, sem fala ou pessoas. A descrição textual explica a agenda e o acesso às orientações. Track liga legendas locais em WebVTT, que descrevem a ação visual desta demonstração. Para outro vídeo com fala, produza legendas sincronizadas e uma transcrição adequada; este arquivo não serve como legenda universal. Poster oferece uma imagem antes da reprodução. Navegadores podem restringir o carregamento de legendas por file, por isso o README explica HTTP local. Não esconda essa diferença retirando a alternativa textual.

Faça na sua cópia

Abra por HTTP local e confira vídeo, descrição e legendas. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

<track kind="captions" src="assets/demonstracao.vtt"
  srclang="pt-BR" label="Português" default>

Mude uma coisa e preveja

Mude somente a descrição textual da demonstração, mantendo seu significado.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A ação continua compreensível sem tocar o vídeo. Quando tocado por HTTP, ele tem controles e legendas locais.

Se não acontecer

Confira caminho e teste HTTP quando as legendas não aparecerem. Não substitua a descrição por uma promessa de recurso inexistente.

A captura mostra uma parte da referência. Abra o exemplo para conferir a página inteira. Uma experiência temporária pode produzir outra aparência; restaure os valores antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia da base. Tente primeiro; depois compare seus resultados com os comentários.

1. Descreva o diagrama de modo adequado ao conteúdo real.

2. Toque e pause áudio e vídeo, sem autoplay.

3. Explique como a página informa o percurso sem reproduzir mídia.

Respostas comentadas

Compare o que você previu com o que observou. Uma solução diferente pode funcionar se mantiver o conteúdo e a tarefa acessíveis.

1. O alt descreve os três passos do desenho. Não deve inventar uma fotografia, pessoa ou endereço que a imagem não apresenta.

2. Controls permite escolher a reprodução. Confira teclado e pausa e mantenha a mídia opcional.

3. Agenda, lista de orientações e descrição da demonstração entregam a informação no texto. Recursos audiovisuais complementam esse percurso.

Quando seguir

Você confere recursos locais e comunica a informação mesmo sem som ou vídeo. Se ainda houver dúvida, repita somente a experiência que precisa esclarecer.

O arquivo completo

Referência do exemplo 09-imagens-midia, reproduzida aqui para que você possa conferir sem sair da página.

assets/simulacao.js

const form = document.querySelector('#visita');
const send = document.querySelector('#simular');
const status = document.querySelector('#retorno');
if (form && send && status) {
  send.disabled = false;
  form.addEventListener('submit', event => {
    event.preventDefault();
    status.textContent = 'Simulação concluída. Nada foi enviado ou guardado.';
    status.focus();
  });
  form.addEventListener('reset', () => { status.textContent = ''; });
}