A ordem do conteúdo em seu documento é importante para a acessibilidade do seu site. Um leitor de tela vai ler o conteúdo com base na ordem do documento, usando os elementos HTML selecionados para dar significado a esse conteúdo. Uma pessoa navegando pelo site usando um teclado, em vez de uma tela sensível ao toque ou mouse, vai navegar pelo documento. Isso significa que eles vão passar do elemento ativo para o ativo, navegando entre links e campos de formulário, mais uma vez na ordem em que estão no documento.
Portanto, começar com um documento bem estruturado e usar todos os elementos HTML corretos é, portanto, uma parte fundamental da criação de um site acessível. No entanto, é possível desfazer parte desse bom trabalho quando você começar a usar o CSS. Vamos dar uma conferida no motivo.
Ordem visual x ordem visual
A navegação do site costuma ser marcada como uma lista de links. Você pode usar o Flexbox para transformá-los em uma barra horizontal. No exemplo do Glitch abaixo, criei esse padrão comumente usado. Clique no exemplo e pressione Tab entre os links. O foco se moverá em uma direção lógica da esquerda para a direita, na ordem em que lemos em inglês.
Se você criou esse tipo de padrão e foi solicitado a mover Contact Us,
que é o segundo na origem, para o final. Você pode usar a propriedade order, que funciona no Flexbox.
Tente percorrer os itens no exemplo abaixo, que usou a propriedade order para reorganizar os itens.
O foco pula para o item final e, em seguida, volta novamente. No que diz respeito à ordem da tabulação, esse item é o segundo item. Visualmente, no entanto, é o último item.
O exemplo acima destaca o problema que enfrentamos ao reorganizar e reordenar o conteúdo usando CSS. Se você estiver lidando com esse problema, a coisa certa a fazer seria mudar a ordem na fonte, em vez de usar CSS.
Quais propriedades do CSS podem causar reordenação?
Qualquer método de layout que permita mover elementos pode causar esse problema. As seguintes propriedades CSS geralmente causam problemas de reordenação de conteúdo:
- Usar
position: absolutee tirar um item do fluxo visualmente. - A propriedade
orderno layout Flexbox e Grid. - Os valores
row-reverseecolumn-reverseparaflex-directionno Flexbox. - O valor de
denseparagrid-auto-flowno layout de grade. - Qualquer posicionamento por nome ou número de linha ou com
grid-template-areasno layout de grade.
No exemplo a seguir, criei um layout usando a grade CSS e posicionei os itens usando números de linha, sem considerar onde eles estão na origem.
Tente consultar esse exemplo e veja como o foco muda de lugar. Isso resulta em uma experiência muito confusa, especialmente se a página for longa.
Como testar o problema
Um teste muito simples é navegar pela sua página usando o teclado. Você consegue acompanhar tudo? Há algum salto estranho ao fazer isso?
Para uma demonstração visual da reordenação de conteúdo, tente o verificador de parada de tabulação na extensão Accessibility Insights do Chrome. A imagem abaixo mostra o exemplo da grade CSS nessa ferramenta. É possível ver como o foco tem que mudar pelo layout.
Reordenação de conteúdo e Web design responsivo
Se você só tiver uma apresentação do seu conteúdo, ter a fonte em uma ordem lógica e refletir isso no layout geralmente não é difícil. Ele pode se tornar mais difícil quando você considera o layout em diferentes pontos de interrupção. Pode fazer sentido mover um elemento para a parte de baixo do layout em telas menores, por exemplo.
No momento, não existe uma boa solução para esse problema. Na maioria das situações, desenvolver a versão "dispositivos móveis primeiro" ajuda você a manter a fonte e o layout em ordem. As escolhas que você faz sobre a prioridade em dispositivos móveis geralmente são consistentes para o conteúdo em geral. É importante estar ciente quando há a possibilidade desse tipo de reordenação de conteúdo e testar se a experiência final não é muito desagradável em cada ponto de interrupção.