Guia para tornar páginas web acessíveis
Bullets e Listas
Recomendação
- Fornecer equivalente textual para imagens usadas como pontos de enumeração (bullets) simulando uma lista.
- Ou não simular uma lista e sim utilizar a lista de fato (melhor solução).
Html/Xhtml
- No caso de simular uma lista com imagem, incluir o atributo "alt" com descrição conforme Exemplo1. A desvantagem desta opção é que o leitor de tela irá focar todas as imagens (bullets) lendo desnecessáriamente a descrição textual de cada imagem.
- O ideal é não simular uma lista e sim fazer a lista utilizando os elementos "ul" e "li" no HTML, inserindo as imagens como bullets no CSS, conforme Exemplo 2. Deste modo, o leitor de tela não focará as imagens. (Os itens deste guia utiliza este recurso.)
Exemplo 1
- Uma seqüência de itens que simula uma lista utilizando imagems como bullet.
- O código mostra 3 diferentes, mas apropriadas formas, para usar o atributo "alt" para nomear este tipo de imagem.
Histórico
Missão
Estrutura
<img src="lista3.gif" alt="Item " /> Histórico<br /> <img src="lista3.gif" alt ="*" /> Missão<br /> <img src="lista3.gif" alt =" " /> Estrutura<br />
Exemplo 2
- Fazer uma lista não ordenada padrão no HTML.
<ul> <li>Histórico</li> <li>Missão</li> <li>Estrutura </li> </ul>
- Incluir a imagem no CSS.
- Histórico
- Missão
- Estrutura
ul {
list-style-type: none;
list-style-image: url("estrela.gif");
}
Referência WCAG 1.0
- Guideline 1: Provide equivalent alternatives to auditory and visual content
- Recomendação 1: Fornecer alternativas ao conteúdo sonoro e visual
