A importância da ordem padrão do DOM
Trabalhar com elementos nativos é uma ótima maneira de aprender sobre o comportamento de foco, porque eles são inseridos automaticamente na ordem de tabulação com base na posição deles no DOM.
Por exemplo, você pode ter três elementos de botão, um após o outro no DOM. Pressionar Tab foca cada botão na ordem. Clique no bloco de código
abaixo para mover o ponto inicial da navegação e pressione Tab para mover o foco
entre os botões.
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
No entanto, é importante observar que, ao usar CSS, é possível que os itens
existam em uma ordem no DOM, mas apareçam em uma ordem diferente na tela. Por
exemplo, se você usar uma propriedade CSS como float para mover um botão para a direita,
eles vão aparecer em uma ordem diferente na tela. Mas, como a ordem no DOM
permanece a mesma, a ordem de tabulação também é. Quando o usuário navega pela
página, os botões ganham foco em uma ordem não intuitiva. Clique no
bloco de código abaixo para mover o ponto inicial da navegação e pressione Tab para
mover o foco entre os botões.
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
Tenha cuidado ao alterar a posição visual dos elementos na tela usando CSS. Isso pode fazer com que a ordem das guias se mova, aparentemente de forma aleatória, confundindo os usuários que dependem do teclado. Por esse motivo, a checklist do Web AIM afirma na seção 1.3.2 que a ordem de leitura e navegação, conforme determinado pela ordem do código, precisa ser lógica e intuitiva.
Como regra geral, tente percorrer as guias nas páginas de vez em quando, só para ter certeza de que não você errou acidentalmente a ordem das guias. Este é um bom hábito a se adotar e não requer muito esforço.
Conteúdo fora da tela
E se você tiver conteúdo que não está sendo exibido no momento, mas ainda precisar estar no DOM, como uma navegação lateral responsiva? Quando você tem elementos como esse que recebem foco quando estão fora da tela, pode parecer que o foco está desaparecendo e reaparecendo conforme o usuário percorre a página, o que claramente é um efeito indesejável. O ideal é impedir que o painel receba foco quando estiver fora da tela e permitir que ele seja focado apenas quando o usuário puder interagir com ele.
Às vezes, você precisa fazer um pouco de trabalho de detetive para descobrir
para onde foi o foco. Você pode usar document.activeElement no console para descobrir qual
elemento está em foco no momento.
Depois de descobrir qual elemento fora da tela está sendo em foco, você pode defini-lo como
display: none ou visibility: hidden e, em seguida, definir novamente como display:
block ou visibility: visible antes de mostrar ao usuário.
Em geral, incentivamos os desenvolvedores a percorrer as guias dos sites antes de cada
publicação para conferir se a ordem da tabulação não desaparece ou sai de uma sequência
lógica. Se isso acontecer, oculte corretamente o conteúdo fora da tela com display: none ou visibility: hidden ou reorganize as posições físicas dos elementos no DOM para que eles fiquem em uma ordem lógica.