Acessibilidade: verificar e ajustar a ordem do DOM de um site
6 min
Neste artigo
- Ordem do DOM nos sites
- Por que a ordem do DOM é importante
- DOM automático no Assistente de Acessibilidade
- Alterar manualmente a ordem do DOM de um site
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.
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 que têm alguma deficiência e dificuldade visual ao escanear o conteúdo do site e 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 abrir o assistente de acessibilidade no Editor do Wix Studio, você pode ver a opção para organizar automaticamente a ordem DOM. Recomendamos selecionar essa opção, pois ela garante que a verificação do assistente e as tarefas resultantes estejam corretas.
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 DOM do seu site não é lógica, você pode ajustá-la manualmente 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 no 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 organizar manualmente a ordem do DOM:
- Vá para o seu editor.
- Clique em Configurações na parte superior e selecione Acessibilidade.
- Selecione Verificar site no assistente à direita.
- Clique na aba Problemas identificados.
- Selecione Nível do site.
- Clique em Organize a ordem DOM.
- Selecione Manualmente.
- Clique em Aplicar.
- Selecione Camadas
no canto inferior esquerdo do seu editor. - 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.
- Arraste e solte os elementos na ordem que você desejar.
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.
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
