A ordem do DOM é importante

A importância da ordem padrão do DOM

Dave Gash

Meggin Kearney

Rob Dodson

Trabalhar com elementos nativos é uma ótima maneira de aprender sobre o comportamento de foco, porque eles são inseridos automaticamente na ordem de guias com base na posição no DOM.

Por exemplo, você pode ter três elementos de botão, um após o outro no DOM. Ao pressionar Tab, cada botão é focado em ordem. Clique no bloco de código abaixo para mover o ponto de início da navegação de foco e pressione Tab para mover o foco pelos botões.

<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>

Eu deveria focar por último!

No entanto, é importante observar que, usando CSS, é possível ter coisas em uma ordem no DOM, mas aparecer em uma ordem diferente na tela. Por exemplo, se você usar uma propriedade CSS como float para mover um botão para a direita, os botões vão aparecer em uma ordem diferente na tela. No entanto, como a ordem delas no DOM permanece a mesma, a ordem das guias também permanece a mesma. Quando o usuário navega pela página, os botões recebem foco em uma ordem não intuitiva. Clique no bloco de código abaixo para mover o ponto de início da navegação de foco e pressione Tab para mover o foco pelos botões.

<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>

I Should Be Focused Last!

Tenha cuidado ao mudar a posição visual dos elementos na tela usando CSS. Isso pode fazer com que a ordem das guias mude, aparentemente de forma aleatória, confundindo os usuários que dependem do teclado. Por esse motivo, a lista de verificação do AIM da Web afirma na seção 1.3.2 que a ordem de leitura e navegação, conforme determinada pela ordem do código, precisa ser lógica e intuitiva.

Como regra, tente alternar entre as páginas de vez em quando para garantir que você não tenha bagunçado a ordem das guias. É um bom hábito a ser adotado, e não exige muito esforço.

Conteúdo fora da tela

E se você tiver conteúdo que não está sendo exibido no momento, mas ainda precisa estar no DOM, como um menu lateral responsivo? Quando você tem elementos como esse que recebem foco quando estão fora da tela, pode parecer que o foco está desaparecendo e reaparecendo à medida que o usuário navega pela página. Esse é claramente um efeito indesejável. O ideal é impedir que o painel ganhe foco quando estiver fora da tela e permitir que ele seja focado apenas quando o usuário puder interagir com ele.

Às vezes, é preciso fazer um pouco de trabalho de detetive para descobrir onde o foco foi. Você pode usar document.activeElement no console para descobrir qual elemento está focado no momento.

Depois de saber qual elemento fora da tela está sendo focado, você pode defini-lo como display: none ou visibility: hidden e, em seguida, definir de volta para display: block ou visibility: visible antes de mostrar ao usuário.

Em geral, recomendamos que os desenvolvedores acessem os sites antes de cada publicação para conferir se a ordem das guias não desaparece ou pula de uma sequência lógica. Se isso acontecer, verifique se você está ocultando corretamente o conteúdo fora da tela com display: none ou visibility: hidden ou se você reorganizou as posições físicas dos elementos no DOM para que eles fiquem em uma ordem lógica.