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 são inseridos automaticamente na ordem da tabulação com base em seu no DOM.

Por exemplo, você pode ter três elementos de botão, um após o outro na e o 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 por meio dos botões.

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

Eu deveria Tenha foco Por último!

No entanto, é importante observar que, ao usar CSS, é possível ter coisas existem em uma ordem no DOM, mas aparecem em uma ordem diferente na tela. Para exemplo, se você usar uma propriedade CSS como float para mover um botão para a direita, os botões aparecem em uma ordem diferente na tela. Mas, como o pedido o DOM permanece a mesma, assim como a ordem de tabulação. Quando o usuário abre página, os botões ganham foco em uma ordem não intuitiva. Experimente clicar bloco de código abaixo para mover o ponto inicial do foco de navegação. Em seguida, 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 Tenha foco Por último!

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, de forma aparentemente aleatória, confusa 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, deve ser lógica e intuitiva.

Como regra geral, tente navegar pelas páginas com frequência, só para ter certeza de que não acidentalmente desordenou a ordem das guias. É um bom hábito a se adotar, e que não exija 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 ser 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 à medida que o usuário navega pela página, claramente um efeito indesejável. Idealmente, devemos evitar que o painel ganhe foco quando está fora da tela e permite focar somente quando o usuário pode interagir a ele.

Às vezes, é preciso fazer um pouco de trabalho de detetive para descobrir onde o foco desapareceram. Você pode usar document.activeElement do console para descobrir qual está em foco 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, defina-o novamente como display: block ou visibility: visible antes de mostrá-lo ao usuário.

Em geral, aconselhamos os desenvolvedores a navegar pelos sites antes de cada publicar para ver se a ordem da tabulação não desaparece ou sai de uma lógica sequência. Se isso acontecer, verifique se as pessoas estão escondidas da forma adequada. conteúdo fora da tela com display: none ou visibility: hidden, ou que você reorganizar elementos" posições físicas no DOM para que estejam em uma lógica ordem.