Esta tradução ainda não foi revista editorialmente. A versão alemã é vinculativa. Deutsche Fassung →
Barrierefreiheit
O que significa ordem de foco num website?
A ordem de foco é a ordem em que a tecla Tab acessa os elementos de controlo de uma página. Deve seguir a disposição visível: de cima para baixo, de esquerda para direita. Se o foco salta em vez disso de forma aleatória, os utilizadores de teclado perdem a orientação — não conseguem prever onde o próximo toque vai parar. O critério WCAG 2.4.3 exige uma ordem compreensível.
Como surge uma ordem de foco incorreta
A tecla Tab segue a ordem dos elementos no código-fonte, não o que está visível no ecrã. Quando o design desloca elementos para outras posições, as duas ordens separam-se: o foco salta do campo de nome para o rodapé e de lá volta para o botão de envio. Os diálogos inseridos posteriormente também costumam ficar no final do código — quem quer entrar neles tem de atravessar toda a restante página. Um terceiro caso clássico são números de tabulação fixos no código-fonte que forçam uma ordem própria, em conflito com o design. Tudo isto só fica evidente com uma navegação real por teclado.
Assim o serviço de verificação mede a ordem de foco
O serviço de verificação pressiona a tecla Tab na sua página e regista a posição do ecrã de cada paragem. Depois conta saltos para trás: locais em que o foco salta claramente para cima ou para a esquerda na mesma linha, contra a direção de leitura. Se mais de 30 por cento das mudanças de foco são saltos para trás, o critério é considerado violado; entre 10 e 30 por cento o relatório assinala um ponto de verificação manual, pois os designs com várias colunas podem explicar saltos individuais. Abaixo disso, a ordem é considerada compreensível. O relatório indica o número de saltos para trás e de pausas verificadas — vê a base da medição, não apenas o resultado.
Beispiele
Fokus springt durch tabindex
<input tabindex="3" name="name">
<input tabindex="1" name="email">
<button tabindex="2">Senden</button><input name="name">
<input name="email">
<button>Senden</button>Positive tabindex-Werte erzeugen eine eigene Reihenfolge, die von der sichtbaren abweicht. Die Quelltextreihenfolge ist die richtige.
- Navegue pela sua página mais importante e observe a marcação — segue a direção de leitura de cima à esquerda para baixo à direita?
- Teste especialmente os formulários: a ordem dos campos por teclado deve corresponder à ordem visível.
- Peça à sua agência para evitar números de tabulação fixos no código-fonte — a ordem do código-fonte deve ser a ordem visível.
- Deixe os diálogos definirem o foco dentro da janela quando se abre e devolvê-lo ao local inicial quando fecha.