Teste o suporte ao teclado usando o Visualizador de Ordem de Origem

A ordem de origem de um documento é importante para a tecnologia assistiva e pode ser diferente da ordem em que os elementos aparecem na página renderizada. A ordem de origem é a ordem em que os elementos da página da Web aparecem no código-fonte HTML. Usando CSS, você pode reordenar elementos da página de uma maneira visual, o que significa que é possível que a ordem visual e de origem de uma página da Web seja diferente.

A tecnologia adaptativa, como leitores de tela, geralmente segue a ordem de origem e ignora a ordem visual dos elementos na página da Web.

Para garantir que o documento tenha uma ordem lógica, esteja ele sendo acessado com tecnologia assistiva ou não, use o Source Order Viewer para rotular diferentes elementos da página com números que especificam a ordem no código-fonte do documento. O Visualizador de Ordem de Origem está na guia Acessibilidade (próximo à guia Estilos ).

Analisando a ordem de acesso ao teclado por meio de seções da página

A página da Web de demonstração de teste de acessibilidade tem uma ordem de tabulação contra-intuitiva, em que os usuários de teclado acessam o menu de navegação da barra lateral somente depois de acessar todos os links Mais . O menu de navegação da barra lateral é um atalho para acessar a fundo no conteúdo da página. Mas como você precisa percorrer toda a página antes de chegar ao menu de navegação da barra lateral, esse menu de navegação é ineficaz para usuários de teclado.

A ordem da tecla Tab na página de demonstração é:

1. O campo Pesquisar e, em seguida, o botão ir para o campo Pesquisar .

2. O botão Mais na seção Gatos , para ir para uma página da web "Gatos". Em seguida, os outros botões Mais , para Cães, Ovelhas, Cavalos e Alpacas.

3. Os links azuis do menu de navegação da barra lateral: Gatos, Cães, Ovelhas, Cavalos e Alpacas.

4. A caixa de texto de doação no formulário de doação.

5. Os botões na barra de navegação superior: Página inicial, Adotar um animal de estimação, Doar, Empregos e, em seguida, Sobre nós.

6. A interface na parte superior da janela do navegador.

O motivo para a ordem confusa das teclas Tab é que a ordem experimentada ao usar um teclado é determinada pela ordem de origem do documento. A ordem experimentada usando um teclado pode ser modificada usando o tabindex atributo on elements, que tira esse elemento da ordem de origem.

No código-fonte do documento, o menu de navegação da barra lateral aparece após o conteúdo principal da página da Web. O CSS foi usado para posicionar o menu de navegação da barra lateral acima da maior parte do conteúdo principal da página da web.

Você pode testar a ordem dos elementos da página usando o Visualizador de Ordem de Origem na guia Acessibilidade .

Ativar e usar o Visualizador de Ordem de Origem

Para ativar e usar o Source Order Viewer, com a página de demonstração:

1. Abra a página da Web de demonstração do teste de acessibilidade em uma nova janela ou guia.

2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

3. No DevTools, na Barra de Atividades, selecione a guia Elementos . Se essa guia não estiver visível, clique no botão Mais ferramentas ().

4. Na ferramenta Elementos , à direita da guia Estilos , selecione a guia Acessibilidade .

5. Na seção Visualizador de Ordem de Origem , marque a caixa de seleção Mostrar ordem de origem .

   Na página da Web renderizada, os números são exibidos, indicando a ordem de tabulação conforme controlado pela ordem das linhas de código no arquivo de origem:

   

6. Na árvore DOM na ferramenta Elementos , selecione um elemento de layout principal, como o section elemento.

   Os números de ordem de tabulação agora são exibidos em filhos do section elemento, indicando a ordem de origem dos diferentes filhos:

   

7. Role a página para ver todos os números e marque como a ordem de origem dos diferentes elementos difere da ordem visual dos elementos.

Confira também

• Página da Web de demonstração de teste de acessibilidade