Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

G196: Utilizar uma alternativa em texto num item de um grupo de imagens que descreva todos os itens do grupo

Aplicabilidade

Qualquer tecnologia onde seja utilizado um agrupamento de conteúdo não textual para apresentar as informações ou a funcionalidade.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é evitar a duplicação desnecessária que ocorre quando é utilizado um agrupamento de conteúdo não textual adjacente para apresentar as informações ou a funcionalidade.

Em alguns casos, as páginas irão apresentar um grupo de imagens para transmitir as informações. Quando apresentados em conjunto ou numa combinação específica, estes agrupamentos podem transmitir diferentes tipos de informação. Por exemplo, duas imagens de uma estrela, em que uma é apresentada a preto e branco e a outra a cores, podem ser utilizadas em conjunto para representar a classificação de um utilizador. Por exemplo, três estrelas preenchidas seguidas por duas estrelas não preenchidas podem representar uma classificação de três em cinco estrelas.

Para utilizar esta técnica, um autor fornece uma alternativa em texto que serve a mesma finalidade para todo o grupo e associa-a a um item do grupo. Em seguida, os restantes itens do grupo são assinalados de modo a poderem ser ignorados pelas tecnologias de apoio. Desta forma, o utilizador pode identificar de forma mais eficaz a finalidade do grupo e evitar a possível duplicação ou confusão no caso de ter sido fornecida uma alternativa em texto para cada item do grupo.

Exemplos

Exemplo 1: Um sistema de classificação em HTML

No exemplo seguinte, é apresentada uma classificação de três estrelas preenchidas e duas estrelas não preenchidas. Embora fosse possível fornecer uma alternativa em texto para cada uma das cinco imagens, o autor optou por fornecer a classificação na forma de "3 em 5 estrelas" para a primeira imagem e assinalou as restantes utilizando texto alt nulo.

Código Exemplo:

<p>Rating: 
   <img src="star1" alt="3 out of 5 stars">
   <img src="star1" alt="">
   <img src="star1" alt="">
   <img src="star2" alt="">
   <img src="star2" alt="">
  </p>

Exemplo 2: Um botão criado a partir de um grupo de imagens em XHTML

Neste exemplo, cada botão tem um conjunto de imagens para indicar o nível de conformidade com as WCAG exigido. Esta abordagem permite que as tecnologias de apoio evitem indicações do tipo: "Imagem A, Imagem A, Imagem A", etc.

Código Exemplo:

<p>Conformance Level:</p>
 <button name="A"><img src="a.png" alt="A" /></button> <br />
 <button name="AA"><img src="a.png" alt="AA" /><img src="a.png" alt="" /></button> <br />
 <button name="AAA"><img src="a.png" alt="AAA" /><img src="a.png" alt="" /><img src="a.png" alt="" /></button>

Testes

Procedimento

  1. Verifique se um item no grupo inclui uma alternativa em texto que sirva a mesma finalidade para todo o grupo.

  2. Verifique se os restantes itens no grupo estão assinalados de forma a poderem ser ignorados pelas tecnologias de apoio.

  3. Verifique se os itens assinalados de forma a poderem ser ignorados pelas tecnologias de apoio estão adjacentes ao item que contém a alternativa em texto para o grupo.

Resultados Esperados