Criar activos acessíveis: Imagens e ícones

Tornar o teu sítio Web acessível significa garantir que todos os visitantes, incluindo os que têm deficiências visuais, podem usufruir plenamente do teu conteúdo. Este artigo explica como utilizar imagens e ícones de forma a cumprir as normas de acessibilidade, adicionando texto alternativo, utilizando imagens com significado e evitando armadilhas comuns. Segue estas práticas recomendadas para criar activos inclusivos e fáceis de utilizar para o teu Web site ou página de destino.

Requisitos

• Todas as imagens e ícones que contenham informações devem ter um texto alternativo para descrever o conteúdo da imagem ou do ícone
  • O texto alternativo não deve incluir palavras que identifiquem o elemento como um gráfico ou uma imagem (por exemplo, evita frases como “gráfico de” ou “imagem de”, etc.) porque os leitores de ecrã já indicam a função (por exemplo, dizendo “gráfico” e depois lendo o texto alternativo).
  • Evita usar todas as letras maiúsculas, porque alguns leitores de ecrã lêem cada letra
  • Necessário para:
    • imagens que usam <img>
    • imagens activas
    • imagens de introdução de formulários
    • SVG usando <img>
    • SVG usando <SVG>
    • Tela HTML5
    • tipos de letra de ícones
• As descrições do texto alternativo devem trazer contexto para o utilizador e devem ser significativas
  • As imagens/ícones das ligações devem descrever o destino da ligação.
  • A imagem/ícone das ligações de botão/controlo deve descrever o objetivo do botão ou controlo e/ou a ação resultante.
  • O comprimento do texto alternativo para imagens/ícones informativos deve ser conciso (não mais de 250 caracteres)
• O texto alternativo deve ser localizado de acordo com a língua utilizada numa página.
• Não utilizes texto em imagens se puderes utilizar texto real, exceto se for essencial (como um logótipo) ou se necessitares de tipos de letra, tamanhos, cores ou fundos específicos.
• Se for necessário utilizar a imagem do texto, segue as diretrizes relativas à cor e ao contraste.
• Se uma imagem de fundo tiver informações úteis, tens de adicionar texto alternativo (por exemplo, através de texto visível normal, adicionando role="image" e aria-label, ou por outros meios).
• Se houver texto sobre uma imagem, testa o contraste do texto sobreposto com pelo menos 8 cores da imagem.
• Fornece controlos (botões de pausa, setas) para conteúdo que começa automaticamente, como carrosséis, barras deslizantes de imagens e vídeos de fundo.
• Não faças com que os carrosséis sejam reproduzidos automaticamente.
• Não utilizes botões fantasma sobre imagens (botões sem fundo ou contorno).
• Nenhum conteúdo deve piscar mais de três vezes por segundo.
• Os objectos gráficos, como um ícone autónomo, um gráfico ou uma imagem, têm um contraste mínimo de 3:1 entre o item e o respetivo fundo.
• Os ícones utilizados em várias páginas devem partilhar o mesmo significado e funcionalidade.
• Se utilizarmos um ícone específico para iniciar uma ação (por exemplo, uma seta para baixo para menus pendentes ou acordeão/expandir), não o utilizamos de forma decorativa noutra página.

Excepções

Imagens ou ícones decorativos ou redundantes

Quando as imagens não servem qualquer objetivo de conteúdo, são puramente decorativas ou duplicam informações já transmitidas num texto, recomenda-se que lhes atribuas um texto alternativo nulo (vazio)(alt="), que as designes com ARIA role="presentation" ou que as implementes como fundos CSS.

Imagens de fundo decorativas ou redundantes

Não atribuas texto alternativo a imagens de fundo que não sejam importantes e não contenham informações para o utilizador.

Exemplos

	FAZ: O texto alternativo fornece contexto e informações: “Mulher madura a trabalhar no portátil, com roupa de escritório e a sorrir, de pé sobre um fundo branco”. NÃO FAÇAS: Uma descrição não é suficientemente específica: “mulher madura”.
	O ícone contém informação e é importante para o utilizador. Coloca o texto no alt: “ícone do facebook”, “ícone do Instagram”, “ícone do Pinterest”.
	Na página, há seis descrições com um ícone ilustrativo. Essas imagens são imagens decorativas. Para definir isso, adiciona um atributo alt vazio: <img src="filename.png" alt="">. As tecnologias de assistência, como um leitor de ecrã, irão ignorar a imagem. Sem o atributo alt vazio, um leitor de ecrã pode ler o nome do ficheiro, o que não faz sentido e confunde o utilizador.
	Neste exemplo, o logótipo tem duas finalidades: indicar aos utilizadores em que sítio se encontra e fornecer uma ligação para a página principal. FAZ: Descreve a imagem e a sua função, por exemplo, utilizando aria-label-"Página inicial da GetResponse".