Acessibilidade: verificar e ajustar a ordem do DOM de um site

6 min de leitura
A ordem DOM do site é a ordem em que os leitores de tela e a tecla Tab destacam e/ou "leem" o conteúdo na página. Ela deve seguir uma ordem lógica para garantir que os visitantes tenham a melhor experiência possível em seu site e possam navegar pelo seu conteúdo e aproveitá-lo.
Neste artigo, saiba mais sobre:

Ordem do DOM nos sites

O DOM do site é a ordem de carregamento e leitura de elementos nas páginas do site. O Wix define automaticamente uma ordem do DOM com base na ordem visual dos elementos: da esquerda para a direita e de cima para baixo. Ao desenvolver nossos recursos de acessibilidade, testamos nossos produtos usando os seguintes leitores de tela:
  • Windows + Firefox ou Chrome: NVDA (Leitor Grátis)
  • iOS + Safari: Voiceover (Leitor Embutido)
Isso significa que criamos a ordem automática do DOM do seu site pensando nas funções acima. 
Importante:
A ordem automática do DOM nos sites Wix em desktop foi criada para scripts da esquerda para a direita (por exemplo: inglês, espanhol, etc). Se o seu site usa um script da direita para a esquerda, como árabe ou hebraico, você precisa reorganizar manualmente a ordem do DOM no painel Camadas.

Por que a ordem do DOM é importante

Alguns visitantes do site podem usar leitores de tela e outras tecnologias assistivas para navegar no seu site. Essas tecnologias ajudam os visitantes com deficiência visual a escanear o conteúdo do site e a ler em voz alta para o visitante. 
Os visitantes que usam leitores de tela, assim como aqueles com condições que afetam a visão, podem usar a tecla Tab para navegar pelo conteúdo do seu site. A ordem do DOM do site é, portanto, importante para os visitantes que usam leitores de tela e/ou a tecla Tab, pois eles precisam poder navegar pelo seu site em uma ordem lógica.
Por exemplo, o menu do site deve vir primeiro, seguido pelo resto dos elementos do cabeçalho, pelo título da página, pelo conteúdo da página, etc. Se a ordem do DOM estiver incorreta, isso pode fazer com que o leitor de tela/tecla Tab ignore ou pule pelo conteúdo da sua página.
Quer testar a ordem do DOM do seu site?
Você pode testar a ordem automática do DOM do seu site usando a tecla Tab do teclado ou um leitor de tela na versão online do site.

DOM automático no Assistente de Acessibilidade

Ao trabalhar em um site do Editor do Wix Studio, você pode ver a opção de organizar automaticamente sua ordem do DOM no Assistente de Acessibilidade. Recomendamos selecionar essa opção, pois ela garante que a verificação do Assistente e as tarefas resultantes estejam corretas.
O painel do Assistente está aberto no editor. A caixa de seleção para organizar automaticamente o DOM está destacada.
Não vê esta caixa de seleção?
A opção de organizar o DOM do site não é preenchida se: 
  • O site foi criado após o início de novembro de 2024
  • Você organizou anteriormente o DOM do site com o Assistente de Acessibilidade
  • Você desativou o DOM automático no site

Alterar manualmente a ordem do DOM de um site

Se você perceber que a ordem do DOM do seu site não é lógica, recomendamos alterá-la para garantir uma melhor experiência para os visitantes. 
Use o Assistente de Acessibilidade e o painel Camadas para alterar o DOM nos sites do Editor Wix. Se você estiver criando um site no Editor do Wix Studio, você pode ajustar a ordem com os painéis Camadas e Páginas do site.
Importante:
Se a ordem de tabulação do seu site for lógica, você não precisa fazer nada. Alterar a ordem quando ela já está correta pode causar problemas para os visitantes que usam leitores de tela e/ou a tecla Tab.

Para alterar a ordem do DOM:

Editor Wix
Editor do Wix Studio
Como o Wix define automaticamente uma ordem do DOM para seu site, você precisa desativá-la nas configurações avançadas do Assistente de Acessibilidade. Você pode então ajustar manualmente a ordem dos elementos do DOM no painel Camadas do seu site conforme necessário.

Para alterar as configurações e a ordem do DOM do seu site:

  1. Vá para o seu editor.
  2. Clique em Configurações na parte superior e selecione Acessibilidade.
  3. Clique no ícone Mais ações   na parte superior do painel do Assistente de Acessibilidade. 
  4. Selecione Configurações avançadas
  5. Selecione Ordem automática do DOM.
  6. Desative a alavanca no painel.
  7. Selecione Desativar na janela pop-up.
O painel de configurações avançadas do assistente de acessibilidade. A alavanca de Ordem automática do DOM foi desativada.
  1. Selecione Camadas   no canto inferior esquerdo do editor.
  2. Verifique a lista e exclua todos os elementos redundantes. Isso inclui elementos duplicados que não têm uso no seu site e podem confundir os usuários que utilizam leitores de tela.
  3. Arraste e solte os elementos na ordem que você desejar.
O painel Camadas de um site. Uma galeria Pro está sendo arrastada para outra posição.
Próximo passo:
Abra o editor mobile. e repita as mesmas etapas.
Observações:
  • Navegar em um site usando a tecla Tab, navega apenas pelos elementos interativos e não pelos elementos estáticos, como texto. Se você quiser testar um leitor de tela em elementos estáticos, como texto, siga as instruções na Central de Ajuda do seu leitor de tela sobre como navegar adequadamente em um site com um teclado.
  • Elementos fixados são colocados automaticamente no final da sequência de tabulação. Se você quiser que ele seja colocado no início da sequência, recomendamos que você solte o elemento e coloque-o no cabeçalho.
Qual é a próxima etapa?
Volte para a Checklist de acessibilidade do site para continuar trabalhando na acessibilidade do seu site.

Esse artigo foi útil?

|