Deixando áudio, imagens e vídeos mais acessíveis

Dicas sobre como apresentar seu conteúdo de mídia em diferentes formatos.

Ultima atualização 22 de Junho de 2023

Adicionar conteúdo de áudio, imagens e vídeo, também chamado de conteúdo de mídia, é uma ótima maneira de aprimorar seu site. No entanto, considere como essas informações serão absorvidas pelos visitantes que não podem ver ou ouvir totalmente o conteúdo.

Este guia descreve as formas alternativas de apresentar o conteúdo de mídia aos visitantes.

Anotação

este guia é um recurso introdutório, mas não deve ser interpretado nem considerado aconselhamento jurídico. O Squarespace não pode dar conselhos sobre o cumprimento de nenhuma lei, regulação ou padrão relativa à acessibilidade.

Imagens

A internet é um meio visual em que as imagens são cruciais na apresentação do site. Elementos como texto alternativo e como você formata as imagens animadas ou .gifs são importantes.

Texto alternativo

Ao escanear a página, o leitor de tela identifica as imagens e lê a descrição (texto alternativo) para o visitante. Ao adicionar um texto alternativo, considere o propósito da imagem. É para passar informações? Ou apenas como decoração? O que um visitante com deficiência visual precisa saber sobre a imagem para ter as mesmas informações que um visitante sem deficiência tem?

Uma recomendação é fazer uma breve descrição a imagem, assim como você faria a um amigo pelo telefone. Imagens puramente decorativas, como gráficos que separam o conteúdo ou imagens de fundo abstratas, não precisam de descrição. É importante lembrar que o texto alternativo faz parte do conteúdo da página; assim, ele deve ser escrito de modo claro e conciso.

É bom
  • Considere o propósito da imagem e tente transmitir esse significado em até 125 caracteres.
  • Se a imagem tiver um URL de clickthrough ou qualquer outro uso funcional, descreva a função. Por exemplo: o texto alternativo para a imagem de um casal de noivos rindo que direciona para uma página com fotos de noivado pode ser "Casal de noivos rindo. Links para as fotos do noivado".
  • Nas imagens que exigem uma descrição detalhada, como quadros, gráficos e representações gráficas complexas, inclua uma descrição próxima do texto do site. Você também pode adicionar uma página separada contendo uma descrição da imagem e, em seguida, adicionar um URL de clickthrough da imagem a essa página.
 
Não
  • Inclua frases como “uma imagem de” ou “uma foto de” em seu texto alternativo. As tecnologias assistivas as identificam automaticamente como imagens.
 

Os .gifs animados

Você pode adicionar imagens animadas ou .gifs à maioria das áreas do site. Os .gifs animados devem piscar até duas vezes por segundo, ou podem causar convulsão ou outra reação física.

Dica

nos sites da versão 7.1, os visitantes podem desativar alguns recursos animados nas configurações do aparelho deles. Isso deixa o seu site mais estático. Assim, ao se reduzir o movimento da tela em um Mac, por exemplo, as animações que você ativou em Efeitos da imagem de fundo ou na arte de fundo ficarão paradas.

Vídeos

Ao adicionar vídeos ao seu site, lembre-se destas dicas:

  • Para adicionar legendas, use os recursos integrados para YouTube e Vimeo. Assim, o visualizador pode ativar ou desativar as legendas dentro do bloco de vídeo. Saiba mais sobre como adicionar legendas no site do YouTube e do Vimeo.
  • Adicione no máximo dois vídeos de fundo por página. Muito movimento pode ser um desafio para pessoas com sensibilidade a movimento.
  • No vídeo, evite conteúdos que pisquem três ou mais vezes por segundo.

Áudio

Para que os visitantes com deficiência auditiva tenham acesso ao seu conteúdo em áudio (como podcast), disponibilize uma transcrição. Para manter as páginas organizadas, você pode incluir as transcrições nas páginas não vinculadas.

Movimento

Movimento e animação podem tornar seu site mais interativo e atraente. No entanto, é importante garantir que isso não desoriente os visitantes. As escolhas de design, especialmente aquelas que envolvem movimento, podem afetar negativamente as pessoas com sensibilidade a movimento. A seguir estão os elementos de design que você pode usar de maneira sutil ou evitar todos juntos para garantir que seu site seja totalmente acessível.

Efeito de paralaxe

Um efeito de paralaxe ocorre quando os elementos do plano de fundo se movem em velocidades diferentes dos elementos do primeiro plano durante a rolagem. Ao usar esses tipos de efeitos, considere as necessidades de pessoas com disfunções vestibulares.

Os efeitos de paralaxe podem ser mais desafiadores quando:

  • Ocupam muito espaço
  • Aparecem atrás ou perto do texto
  • Ocorrem várias vezes em uma página

Para desativar qualquer efeito de imagem de fundo, siga as etapas na seção Imagens de fundo. Certifique-se de escolher Nenhum como o efeito de imagem. Se você usar efeitos de paralaxe, considere limitá-los a um por página e minimizar o tamanho e a profundidade de cada efeito.

Para saber mais sobre como diminuir o movimento e a animação em seu site, visite Animações em todo o site.

Piscando

Conteúdo com cores intermitentes ou que mudam rapidamente pode causar convulsões em visitantes suscetíveis. Quando possível, evite usar conteúdo que pisca ou muda de cor rapidamente e considere a implementação das seguintes diretrizes:

  • Não piscar mais de três vezes em um segundo.
  • Estar abaixo dos limites de flash geral e flash vermelho.

Ter limites do flash diferentes para cada cor. As pessoas são mais afetadas por flashes vermelhos do que qualquer outra cor.

Você pode usar a Ferramenta de Análise de Epilepsia Fotossensível do Trace Center para testar o risco de convulsão e limiares de flash.

Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.

Deixando áudio, imagens e vídeos mais acessíveis