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 do 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 em cada botão 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 ser o foco por último!

No entanto, é importante observar que, usando CSS, é possível que os elementos 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, os botões vão aparecer em uma ordem diferente na tela. Mas, como a ordem deles no DOM permanece a mesma, a ordem de tabulação também não muda. 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 de início da navegação por 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>

Eu deveria ser o foco por último!

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 de forma aparentemente 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 determinado pela ordem do código, precisa ser lógica e intuitiva.

Como regra, tente navegar pelas páginas usando a tecla Tab de vez em quando para garantir que você não tenha bagunçado acidentalmente a ordem de tabulação. É um bom hábito para adotar e não exige muito esforço.

Conteúdo fora da tela

E se você tiver conteúdo que não está sendo exibido, mas que 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 navega pela página. Esse é claramente um efeito indesejável. O ideal é impedir que o painel receba o 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 trabalho de detetive para descobrir para onde o foco foi. Use document.activeElement no console para descobrir qual elemento está em foco no momento.

Depois de saber qual elemento fora da tela está em foco, 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.

Em geral, incentivamos os desenvolvedores a navegar pelos sites usando a tecla Tab antes de cada publicação para garantir que a ordem de tabulação não desapareça ou saia de uma sequência lógica. Se isso acontecer, verifique se você está ocultando adequadamente o conteúdo fora da tela com display: none ou visibility: hidden ou se reorganizou as posições físicas dos elementos no DOM para que fiquem em uma ordem lógica.