Acessibilidade: verificar e ajustar a ordem DOM de um site
7 min
Neste artigo
- Ordem DOM nos sites
- Por que a ordem DOM é importante
- DOM automático no Assistente de Acessibilidade
- Alterar manualmente a ordem DOM de um site
- Idioma do site e DOM
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 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 DOM com base na ordem visual dos elementos. 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.
Por que a ordem 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 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 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 DOM do site?
Você pode testar a ordem DOM automática do seu site Wix 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 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 painel Camadas e o assistente de acessibilidade 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 DOM:
Editor Wix
Editor do Wix Studio
Como o Wix define automaticamente uma ordem DOM para seu site, você precisa desativá-la no assistente de acessibilidade. Você pode então ajustar manualmente a ordem DOM dos elementos no painel Camadas do seu site conforme necessário.
Para organizar manualmente a ordem 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 os mesmos passos.
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?
Confira a checklist de acessibilidade para continuar trabalhando na acessibilidade do site.
Idioma do site e DOM
Diferentes idiomas têm diferentes direções de leitura (por exemplo: o português é lido da esquerda para a direita e o hebraico é lido da direita para a esquerda). Se o idioma do site for alterado para um com uma direção de leitura diferente, pode ser que a ordem visual e a ordem DOM dos elementos não estejam mais alinhadas.
Recomendamos ativar a opção do DOM automático no assistente de acessibilidade para garantir que a ordem dos elementos corresponda à direção de leitura do idioma do site.
Importante:
Se o site tiver conteúdo em idiomas da esquerda para a direita e da direita para a esquerda, recomendamos ajustar manualmente a ordem DOM.
Para ativar o DOM automático no assistente:
- Verifique o site com o assistente de acessibilidade.
- Clique na aba Problemas identificados.
- Selecione Nível do site.
- Clique em Organize a ordem DOM.
- Selecione Automaticamente (recomendado).
- Clique em Aplicar.
- (Opcional) Verifique a exibição visual dos elementos do site para garantir que eles estejam alinhados.
Observações:
- Essa opção pode alterar a exibição visual dos elementos, por isso sugerimos revisar as alterações para garantir que o site esteja como você deseja.
- Esse recurso não é compatível com todos os componentes do site, e pode ser que você precise ajustar manualmente a direção de leitura.
Mudou de ideia?
Você pode reverter a ordem DOM automática no seu editor:
- Editor Wix: clicar no ícone Desfazer
na barra superior do seu editor.
Observação: essa opção só se aplica se a última ação que você realizou foi reorganizar automaticamente o DOM. - Editor do Wix Studio: restaure uma versão anterior do site através do histórico do site.
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
