A ordem do DOM é importante

A importância da ordem padrão do DOM

Dave gash
Dave Gash
Meggin kearney
Meggin Kearney

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

Por exemplo, é possível ter três elementos de botão, um após o outro no DOM. Pressionar Tab foca cada botão em ordem. Tente clicar no bloco de código abaixo para mover o ponto inicial 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>

No entanto, é importante observar que, ao usar CSS, é possível que as coisas 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 delas no DOM permanece a mesma, o mesmo acontece com a ordem das guias. Quando o usuário percorre a página, os botões ficam em foco em uma ordem não intuitiva. Tente clicar no bloco de código abaixo para mover o ponto inicial 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>

Tenha cuidado ao mudar a posição visual dos elementos na tela usando CSS. Isso pode fazer com que a ordem de tabulação mude, aparentemente de forma aleatória, confundindo os usuários que dependem do teclado. Por esse motivo, a lista de verificação do Web AIM 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 geral, tente percorrer suas páginas de vez em quando, para não alterar acidentalmente a ordem das guias. É um bom hábito a ser adotado, e não requer muito esforço.

Conteúdo fora da tela

E se você tiver conteúdo que não está sendo exibido, mas ainda precisa 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 as guias da página, claramente um efeito indesejado. O ideal é evitar que o painel seja selecionado quando estiver fora da tela e permitir que ele seja focado somente quando o usuário puder interagir com ele.

Um painel deslizante fora da tela pode roubar o foco.

À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á 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, defini-lo novamente como display: block ou visibility: visible antes de mostrá-lo ao usuário.

Um painel deslizante definido para não exibir nada.
Um painel deslizante definido para exibir um bloco.

Em geral, recomendamos que os desenvolvedores naveguem pelas guias dos sites antes de cada publicação para ver se a ordem das guias não desaparece ou sai de uma sequência lógica. Caso isso aconteça, 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 estejam em uma ordem lógica.