A importância da ordem padrão do DOM
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>
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>
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.