Técnicas para as WCAG 2.0

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

-

H48: Utilizar ol, ul e dl para listas

Aplicabilidade

HTML, XHTML.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

As tecnologias de apoio incluem um suporte inconsistente para várias utilizações do atributo type utilizado para indicar estilos de marcas de item e numeração.

Descrição

O objectivo desta técnica é criar listas de itens relacionados utilizando elementos list apropriados para as suas finalidades. O elemento ol é utilizado quando a lista está ordenada e o elemento ul é utilizado quando a lista está desordenada. As listas de definições (dl) são utilizadas para agrupar termos e as respectivas definições. Embora a utilização desta marcação possa tornar as listas mais legíveis, nem todas as listas necessitam de marcação. Por exemplo, as orações que incluem listas separadas por vírgulas podem não necessitar de marcação da lista.

Quando a marcação é utilizada de modo a formatar visualmente os itens como uma lista, mas não indica a relação da lista, os utilizadores podem ter dificuldade em navegar nas informações. Um exemplo dessa formatação visual é incluir asteriscos no conteúdo no início de cada item de lista e utilizar elementos <br> para separar os itens de lista.

Algumas tecnologias de apoio permitem aos utilizadores navegar de lista para lista ou de item para item. As folhas de estilo podem ser utilizadas para alterar a apresentação das listas, ao mesmo tempo que preservam a sua integridade.

Exemplos

Exemplo 1: Uma lista que mostra passos numa sequência

Este exemplo utiliza uma lista ordenada para mostrar a sequência de passos num processo.

Código Exemplo:

                                 <ol>
  <li>Mix eggs and milk in a bowl.</li>
  <li>Add salt and pepper.</li>
</ol>

Exemplo 2: Uma lista de artigos de mercearia

Este exemplo mostra uma lista desordenada de artigos para comprar na mercearia.

Código Exemplo:

<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Butter</li>
</ul>

Exemplo 3: Uma palavra e respectiva definição

Este exemplo utiliza uma lista de definições para juntar uma definição ao termo que está a ser definido.

Código Exemplo:

<dl>
  <dt>blink</dt>
  <dd>turn on and off between .5 and 3 times per second
  </dd>
</dl> 

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

  1. Verifique se o conteúdo que tem o aspecto visual de uma lista (com ou sem marcas de item) está assinalado como uma lista desordenada.

  2. Verifique se o conteúdo que tem o aspecto visual de uma lista numerada está assinalado como uma lista ordenada.

  3. Verifique se o conteúdo está assinalado como uma lista de definições quando os termos e respectivas definições são apresentados na forma de uma lista.

Resultados Esperados