Noções sobre as WCAG 2.0

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

Ordem do Foco:
Noções sobre o CS 2.4.3

2.4.3 Ordem do Foco: Se uma página Web puder ser navegada de forma sequencial e as sequências de navegação afectem o significado ou a operação, os componentes que podem ser focados recebem o foco de uma forma que o significado e a operabilidade sejam preservados. (Nível A)

A finalidade deste Critério de Sucesso é garantir que quando os utilizadores naveguem de modo sequencial nos conteúdos, encontrem a informação apresentada numa ordem consistente com o significado do conteúdo e que funcione a partir do teclado. Isto minimiza a confusão ao permitir que os utilizadores formem um modelo mental consistente do conteúdo. Podem existir ordens diferentes que reflictam relações lógicas no conteúdo. Por exemplo, a deslocação através de componentes numa tabela, uma linha ou uma coluna de cada vez, reflecte as relações lógicas existentes no conteúdo. Qualquer uma das ordens pode cumprir o Critério de Sucesso.

A forma como a ordem de navegação sequencial é determinada no conteúdo da Web é definida pela tecnologia do conteúdo. Por exemplo, HTML simples define a navegação sequencial através da noção de ordem de tabulação. HTML dinâmico pode modificar a sequência de navegação, utilizando scripting em conjunto com um atributo tabindex adicional, para permitir que os elementos adicionais recebam o foco. Se o scripting e os atributos tabindex não forem utilizados, a ordem de navegação é a ordem em que os componentes surgem na sequência do conteúdo. (Consulte Especificação HTML 4.01, secção 17.11, "Fornecer foco a um elemento").

Um exemplo de navegação por teclado que não é a navegação sequencial abordada neste Critério de Sucesso utiliza navegação por teclas de cursor para analisar o componente de uma árvore. O utilizador pode utilizar as teclas de cursor para cima e para baixo para se deslocar entre nós de árvores. Pressionar a tecla de cursor para a esquerda pode expandir um nó, e utilizar, em seguida, a tecla de cursor para baixo permite aceder aos nós recentemente expandidos. Esta sequência de navegação segue a sequência esperada para um controlo de árvore – à medida que os itens adicionais são expandidos ou fechados, são adicionados ou removidos da sequência de navegação.

A ordem do foco pode não ser idêntica à ordem de leitura determinada de forma programática (consulte o Critério de Sucesso 1.3.2), desde que o utilizador continue a compreender e a funcionar com a página Web. Visto que podem existir várias ordens de leitura lógica possíveis do conteúdo, a ordem do foco pode ser igual a qualquer uma delas. Contudo, quando a ordem de uma apresentação específica é diferente da ordem de leitura determinada de forma programática, os utilizadores de uma destas apresentações podem ter dificuldade em compreender ou funcionar com a página Web. Os autores devem ter em consideração todos estes utilizadores quando criam as suas páginas Web.

Por exemplo, um utilizador de leitor de ecrã interage com a ordem de leitura determinada de forma programática, enquanto um utilizador de teclado sem problemas de visão interage com a apresentação visual da página Web. É necessário ter cuidado para que a ordem do foco faça sentido para estes dois tipos de utilizadores e não pareça saltar aleatoriamente.

Estas técnicas beneficiam os utilizadores de teclado que navegam de forma sequencial nos documentos e que esperam que a ordem do foco seja consistente com a ordem de leitura sequencial.

  • As pessoas com deficiências motoras que dependem do acesso por teclado para funcionarem com uma página beneficiam de uma ordem do foco lógica e utilizável.

  • As pessoas com incapacidades de leitura podem ficar desorientadas quando a tabulação desvia o foco para outro ponto não esperado. Estas pessoas beneficiam de uma ordem do foco lógica.

  • As pessoas com deficiências da visão podem ficar desorientadas quando a tabulação desvia o foco para outro ponto não esperado ou quando não conseguem encontrar facilmente o conteúdo à volta de um elemento interactivo.

  • Apenas uma pequena parte da página fica visível a uma pessoa que utilize um ampliador de ecrã, num nível de ampliação elevado. Este utilizador pode interpretar um campo no contexto errado se a ordem do foco não for lógica.

  1. A forma como a ordem de navegação sequencial é determinada no conteúdo da Web é definida pela tecnologia do conteúdo. Por exemplo, HTML simples define a navegação sequencial através da noção de ordem de tabulação. HTML dinâmico pode modificar a sequência de navegação, utilizando scripting em conjunto com um atributo tabindex adicional, para permitir que os elementos adicionais recebam o foco. Neste caso, a navegação deve seguir as relações e sequências existentes no conteúdo. Se o scripting e os atributos tabindex não forem utilizados, a ordem de navegação é a ordem em que os componentes surgem na sequência do conteúdo. (Consulte Especificação HTML 4.01, secção 17.11, "Fornecer foco a um elemento").

  2. Utilizar navegação por teclas de cursor para analisar o componente de uma árvore. O utilizador pode utilizar as teclas de cursor para cima e para baixo para se deslocar entre nós de árvores. Pressionar a tecla de cursor para a esquerda pode expandir um nó, e utilizar, em seguida, a tecla de cursor para baixo permite aceder aos nós recentemente expandidos. Esta sequência de navegação segue a sequência esperada para um controlo de árvore – à medida que os itens adicionais são expandidos ou fechados, são adicionados ou removidos da sequência de navegação.

  3. Uma página Web implementa caixas de diálogo sem modo através de scripting. Quando o botão accionador é activado, abre-se uma caixa de diálogo. Os elementos interactivos na caixa de diálogo são introduzidos na ordem do foco imediatamente a seguir ao botão. Quando a caixa de diálogo é aberta, a ordem do foco passa do botão para os elementos da caixa de diálogo e, em seguida, para o elemento interactivo a seguir ao botão. Quando a caixa de diálogo é fechada, a ordem do foco passa do botão para o elemento seguinte.

  4. Uma página Web implementa caixas de diálogo sem modo através de scripting. Quando o botão accionador é activado, abre-se uma caixa de diálogo e o foco é definido para o primeiro elemento interactivo na caixa de diálogo. Enquanto a caixa de diálogo estiver aberta, o foco está limitado aos elementos da caixa de diálogo. Quando a caixa de diálogo é fechada, o foco volta ao botão ou ao elemento a seguir ao botão.

  5. Uma página Web em HTML é criada com a navegação à esquerda que ocorre em HTML após o conteúdo do corpo principal e estilizado com CSS para aparecer no lado esquerdo da página. Isto é feito para permitir que o foco incida primeiro no conteúdo do corpo principal sem necessitar de atributos tabindex ou JavaScript.

    Nota: Se por um lado este exemplo cumpre o Critério de Sucesso, não é necessariamente verdade que todo o posicionamento CSS o cumpra. Exemplos de posicionamento mais complexos podem ou não preservar o significado e a operabilidade.

  6. O seguinte exemplo não cumpre o Critério de Sucesso:

    Um sítio da Web de uma empresa inclui um formulário que compila dados de marketing e permite aos utilizadores assinarem várias newsletters publicadas pela empresa. A secção do formulário destinada à compilação de dados de marketing inclui campos, tais como o nome, o endereço, a cidade, o estado ou província e o código postal. Outra secção do formulário inclui várias caixas de verificação para que os utilizadores possam indicar quais as newsletters que pretendem receber. Contudo, a ordem de tabulação para o formulário desloca-se entre os campos em diferentes secções do formulário, para que o foco possa deslocar-se do campo do nome para uma caixa de verificação, em seguida, para o endereço e ainda para outra caixa de verificação.

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

(actualmente, não existe nenhum documentado)

Cada item numerado nesta secção representa uma técnica ou combinação de técnicas que o Grupo de Trabalho das WCAG considera serem de tipo suficiente para cumprir este Critério de Sucesso. As técnicas indicadas só cumprem o Critério de Sucesso se todos os requisitos de conformidade das WCAG 2.0 forem cumpridos.

Embora não sejam necessárias para conformidade, as seguintes técnicas adicionais devem ser consideradas de forma a tornar o conteúdo mais acessível. Nem todas as técnicas podem ser utilizadas ou são eficazes em todas as situações.

  • Fornecer um mecanismo de realce de alta visibilidade para links ou controlos quando estes recebem o foco do teclado (futuro link)

  • Criar ordens de apresentação alternativas (futuro link)

navegação sequencial

navegação feita na ordem definida pelo avanço do foco (de um elemento para outro) utilizando uma interface de teclado

página Web

um recurso não incorporado a partir de um único URI utilizando HTTP mais quaisquer outros recursos que sejam utilizados na apresentação ou destinados a serem apresentados em conjunto por um agente de utilizador

Nota 1: Embora quaisquer "outros recursos" possam ser apresentados em conjunto com o recurso principal, não seriam necessariamente apresentados em simultâneo.

Nota 2: Para efeitos de conformidade com estas directrizes, um recurso tem de ser "não incorporado" no âmbito da conformidade, de forma a ser considerado uma página Web.

Exemplo 1: Um recurso Web que inclui todas as imagens e multimédia incorporadas.

Exemplo 2: Um programa Web de correio electrónico construído utilizando Asynchronous JavaScript e XML (AJAX). O programa está totalmente alojado em http://example.com/mail, mas inclui uma caixa de entrada, uma área de contactos e um calendário. São fornecidos links ou botões que permitem visualizar a caixa de entrada, os contactos ou o calendário, mas que não alteram o URI da página totalmente.

Exemplo 3: Um portal personalizável, em que os utilizadores podem escolher o conteúdo a visualizar a partir de um conjunto de diferentes módulos de conteúdos.

Exemplo 4: Ao entrar em "http://shopping.example.com/" no seu browser, está a entrar num ambiente de compras interactivo semelhante a um cinema, em que se pode deslocar visualmente numa loja, arrastar produtos das prateleiras ao seu redor e colocá-los num carrinho de compras que surge à sua frente. Ao clicar num produto, este é apresentado com uma folha de especificações ao lado. Isto poderá ser um sítio da Web com apenas uma página, ou apenas uma única página dentro de um sítio da Web.