Técnicas para as WCAG 2.0

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

-

C27: Corresponder a ordem do DOM com a ordem visual

Aplicabilidade

O CSS utilizado com HTML e XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é garantir que a ordem do conteúdo no código fonte é a mesma que a apresentação visual do conteúdo. A ordem do conteúdo no código fonte pode ser alterada pelo autor para um qualquer número de apresentações visuais com CSS. Cada ordem pode ter significação, mas pode causar confusão aos utilizadores de tecnologias de apoio, possivelmente porque o utilizador desactiva a apresentação especificada pelo autor, acedendo ao conteúdo directamente a partir do código fonte (tal como um leitor de ecrã), ou interagindo com o conteúdo através do teclado. Se um utilizador cego, que lê a página com um leitor de ecrã que segue a ordem de origem, trabalhar com um utilizador sem problemas de visão, que lê a página na ordem visual, podem ambos ficar confusos quando encontrarem informação em ordens diferentes. Um utilizador com baixa visão que utiliza um ampliador de ecrã em conjunto com um leitor de ecrã pode ficar confuso quando a ordem de leitura parecer saltar à volta do ecrã. Um utilizador de teclado pode ter dificuldade em prever para onde é que o foco vai ser direccionado em seguida quando a ordem de origem não corresponder à ordem visual.

Podem existir também situações em que a ordem apresentada visualmente é necessária para a compreensão geral da página. Se a ordem de origem for apresentada de forma diferente, pode ser muito mais difícil de compreender.

Quando a ordem de origem corresponder à ordem visual, todos poderão ler o conteúdo e interagir com o mesmo, na mesma ordem (correcta).

Nota: O atributo tabindex em HTML tem duas funções. Uma é fazer com que um elemento receba o foco e a outra é atribuir ao elemento uma posição na ordem do foco. Um tabindex de 0 faz com que o elemento receba o foco, mas adiciona-o à ordem do foco na ordem dos elementos de origem. A ordem do foco segue os valores positivos do tabindex em ordem ascendente. Definir valores de tabindex que resultam numa ordem diferente da ordem dos elementos no Modelo de Objecto de Documento (DOM) pode significar que a ordem está incorrecta para utilizadores de tecnologias de apoio, em grande parte porque a propriedade tabindex é especificada em HTML ou XHTML e não em CSS. Isto pode vir a ser alterado em especificações futuras. Pode também ser diferente da ordem de apresentação visual.

Exemplos

Recursos

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

Testes

Procedimento

  1. Examine visualmente a ordem do conteúdo na página Web, tal como é apresentada ao utilizador final.

  2. Examine os elementos no DOM utilizando uma ferramenta que lhe permita visualizar o DOM.

  3. Certifique-se de que a ordem do conteúdo nas secções do código fonte correspondem à apresentação visual do conteúdo na página Web (por ex., para uma página em inglês, a ordem é de cima para baixo e da esquerda para a direita).

Resultados Esperados