Sua imagem provavelmente não é decorativa

O atributo alt do elemento img pode ser “nulo”, que é o ato de defini-lo como uma string vazia em vez de uma descrição de texto. Anular uma descrição alt significa que não há informações entre as aspas de abertura e de fechamento. Se houver um espaço vazio, ele não será considerado nulo:

  
<img alt="" src="/images/cat.jpg" />

  
<img alt=" " src="/images/dog.jpg" />

O que significa “decorativo”?

Anular uma imagem indica que ela é apenas para fins decorativos.

Nesse contexto, decorativo significa que a imagem não comunica visualmente informações importantes para entender o propósito da página ou visualização e por que a imagem está incluída como parte disso.

Decorativo não significa que a imagem contenha conteúdo considerado como decoração.

“

Por exemplo, um site que vende papel de parede deseja ter descrições alternativas para amostras de papel de parede:

 <a href="/products/umbrella?variant=73849024783051"> <img alt="Small red and white illustrated umbrellas on a teal background." src="/images/73849024783051.png" /> </a>

Outro exemplo poderia ser um site de museu, onde apresentar uma peça de sua coleção poderia se beneficiar tanto de uma descrição alternativa quanto de uma legenda:

 <figure role="figure" aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds."> <img alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border." src="/collection/w0895/2005-1057.png" /> <figcaption> View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds. </figcaption> </figure>

Certifique-se de que sua descrição alternativa inclua pontuação também!

Por que você quer fazer uma imagem decorativa?

A tecnologia assistiva pulará as imagens nulas e não anunciará sua presença. As razões para querer fazer isso são principalmente históricas.

Técnicas de layout antigas

As primeiras técnicas de desenvolvimento da Web dependiam de imagens para ajudá-las a garantir um layout consistente em diferentes sistemas operacionais, navegadores e versões de navegadores. O exemplo mais comum disso foi um spacer.gif , um pixel transparente de 1 × 1 que foi esticado para tamanhos diferentes para colocar o conteúdo no lugar.

Essa técnica normalmente usaria muitas imagens de espaçamento para criar um design visual. Sem uma maneira de silenciar sua presença, essas imagens atrapalhariam o que a tecnologia assistiva anunciava e tornaria confuso e demorado navegar e agir no conteúdo da web.

Técnicas de design antigas

Antes de existirem propriedades CSS como box-shadow , os desenvolvedores tinham que usar técnicas que cortavam o estilo decorativo para fazê-lo funcionar com conteúdo de altura ou largura indeterminada. Essa técnica foi chamada de dimensionamento de 9 fatias, um termo que se refere às 9 seções de conteúdo que você precisaria criar.

Assim como as imagens espaçadoras, o dimensionamento de 9 fatias usava várias imagens para criar o efeito visual desejado. E, assim como as imagens espaçadoras, a única maneira de remover a desordem que essas imagens criavam era marcá-las como decorativas.

Anúncios redundantes

Existe o raro cenário em que uma imagem é repetida em uma página ou visualização e seus posicionamentos repetidos não fornecem nenhum contexto adicional. Você deve ter cuidado ao marcar uma imagem decorativa nessa situação, pois a falta de um anúncio para uma imagem visível pode ser confuso para alguém com baixa visão que esteja usando um leitor de tela.

Ícones complementares

Links e botões que usam ícones devem sempre ter um nome acessível que comunique a funcionalidade. Se o design também incorporar um ícone, o design do ícone não precisa ser comunicado.

 <button type="button"> <img src="icon-print.svg" alt="" /> Print </button>

Se o componente usa apenas um ícone, a própria imagem deve ser usada para criar o nome acessível:

 <button type="button"> <img src="icon-print.svg" alt="Print." /> </button>

Observe que um rótulo de texto visível é a técnica preferida. Um rótulo de texto visível pode ser traduzido e comunica o propósito de forma mais direta.

Uso contemporâneo

As técnicas modernas de layout e estilo CSS significam que o posicionamento da imagem agora é altamente intencional. Isso significa que, se uma imagem for usada, provavelmente precisará de uma descrição alternativa.

Descrições alternativas devem comunicar a finalidade da imagem . Isso inclui o conteúdo da imagem, mas também pode incluir o motivo pelo qual ela foi incluída no contexto da página ou visualização na qual foi incluída. Essa é uma das razões pelas quais as descrições de imagens alternativas nunca poderão ser totalmente automatizadas.

Outras maneiras de exibir imagens

Existem algumas outras maneiras de exibir uma imagem em uma página ou visualização. É importante garantir que uma descrição alternativa seja fornecida se a imagem contiver conteúdo significativo, independentemente da técnica utilizada.

O elemento picture

O elemento picture não tem um papel implícito, o que significa que sua presença não comunica nenhum propósito à tecnologia assistiva. Isso significa que não pode ser usado para descrever semanticamente a presença de uma “imagem”.

O elemento picture é um contêiner para os elementos source e img . Use o atributo alt do elemento img para fornecer uma descrição alternativa para o elemento de picture pai.

 <a href="/product/9091866/color/3"> <picture> <source type="image/avif" /> <img alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue." src="9091866-3.png" /> </picture> </a>

Imagens de fundo

Podemos usar CSS para declarar uma imagem como plano de fundo em um elemento HTML. Isso é mais frequentemente usado para adicionar uma sensação de textura a um design.

No entanto, outra técnica popular é usar uma background-image para colocar uma imagem de forma que o desenvolvedor não tenha controle sobre o tamanho da imagem que alguém carrega. background-image , combinado com outras propriedades, como background-size , garantirá que o conteúdo de um tamanho desconhecido seja exibido sem quebrar o design.

Em um cenário como esse, nosso velho amigo spacer.gif pode ser útil novamente!

SVG embutido

O SVG pode ser exibido vinculando-o por meio do atributo src em um elemento img ou colocando o código SVG embutido na página ou visualização.

Se você estiver usando SVG embutido, precisará usar o elemento title (e potencialmente desc ) do SVG no lugar de um atributo alt .

 <svg role="img" aria-labelledby="icon-bookmark-desc" xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <title>Bookmark.</title> <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/> </svg>

Experiência equivalente

No design e desenvolvimento web modernos, exibir uma imagem é um ato altamente intencional. Descrições alternativas nos permitem explicar o conteúdo da imagem e, ao fazê-lo, comunicar por que vale a pena incluir .

Só porque uma imagem exibe algo fantasioso não significa que não vale a pena descrevê-la. Anunciar sua presença garante que qualquer pessoa, independentemente da capacidade ou circunstância, possa entender completamente sua experiência digital.

Leitura adicional no SmashingMag:

• Acessibilidade no Chrome DevTools
• Um guia completo para ferramentas de acessibilidade
• Imagens acessíveis para quando elas são mais importantes
• SVGs acessíveis: padrões perfeitos para usuários de leitores de tela
• Projetando com movimento reduzido para sensibilidades de movimento
• Leia mais artigos sobre acessibilidade, usabilidade e UX.