Para revisar a ordem de foco de uma grade responsiva, percorra os controles com Tab e Shift mais Tab em cada composição e anote onde a sequência salta visualmente. Comece com uma ordem de HTML que faça sentido em uma única coluna. Se uma grade com itens reposicionados produzir outra sequência igualmente lógica, avalie reading-flow como melhoria progressiva e confirme o resultado com teclado e tecnologias assistivas no ambiente que o projeto suporta.
Imagine uma página de uma escola de arte com uma grade de oficinas. Cada cartão tem um link para detalhes e um botão para ver horários. Em uma tela estreita, as oficinas seguem a ordem em que aparecem no HTML. Na tela larga, um cartão destacado ocupa duas linhas. Um item menor pode aparecer na primeira linha à direita, embora venha depois dos cartões da segunda linha no documento. Se o foco descer e depois subir sem sinalização, a pessoa precisa procurar o contorno do próximo controle pela tela.
Qual ordem faz sentido para o conteúdo
Escreva a sequência desejada com nomes de itens antes de numerar posições. Se as oficinas são etapas de um curso, o pré-requisito vem antes da atividade avançada. Se são independentes, a ordem pode seguir a organização visual da página. Em ambos os casos, leia a sequência em voz alta com a interface fora de vista. Se uma ação precisar do contexto de um título ou de outro controle, mantenha o grupo na mesma posição relativa quando a grade mudar de composição.
Monte a versão estreita com os elementos nessa ordem. Observe se cada cartão pode ser entendido por si, inclusive quando o título quebra em três linhas. O primeiro foco do cartão deve levar a um controle com nome suficiente para a tarefa. Se todos os links aparecem como Saiba mais, o texto visível ao redor ajuda a leitura visual, mas pode haver ambiguidade na lista de links de uma tecnologia assistiva. Identifique o destino no rótulo ou no nome acessível e confira a leitura de três cartões consecutivos.
Na versão larga, examine se o destaque exige realmente um reposicionamento. É possível dar mais espaço a uma oficina e conservar a sequência das demais com uma composição que comporte o destaque no começo da grade. Teste a grade também com a oficina de título mais comprido no primeiro e no último lugar. Quando a diferença é apenas altura de texto, alinhar as partes do cartão costuma resolver a irregularidade sem mudar a sequência dos itens. Como alinhar cartões com subgrid.
Quando avaliar reading-flow
Use a propriedade no contêiner de layout quando a ordem visual coerente diverge da sequência do documento e o HTML oferece uma sequência base utilizável. Em uma grade horizontal que deve ser percorrida linha a linha, teste reading-flow: grid-rows. Se a composição funciona como colunas independentes e a leitura desce por uma antes de passar à outra, teste grid-columns. A escolha precisa refletir os agrupamentos de conteúdo que o desenho sugere. Faça a revisão em vez de deduzir a sequência só pela regra declarada. Exemplos de navegação sequencial com CSS reading-flow.
Declare a regra no ponto em que a grade muda para a composição que precisa dela. Antes disso, preserve a sequência natural. Se houver uma segunda grade dentro de um cartão, confirme se ela tem uma lógica própria. Quando cada cartão contém vários controles, percorra todos eles antes de passar para o seguinte. Um salto para outro cartão no meio de uma tarefa curta indica que a estrutura e a ordem visual precisam ser revistas juntas.
Evite distribuir valores positivos de tabindex para forçar o percurso. Um número fixo fica difícil de reconciliar com filtros, novos itens e larguras distintas. Teste a página também em um navegador que ignore a propriedade e retire a declaração durante a revisão. A sequência restante deve permitir chegar a todas as oficinas e entender a relação entre seus controles. O rascunho de CSS Display descreve como a propriedade afeta a navegação sequencial e a exposição da ordem de leitura. Compare esse comportamento esperado com o que ocorre na combinação de navegador e tecnologia assistiva usada no teste. Especificação de reading-flow no CSS Display.
Como conferir o percurso sem usar o mouse
Entre na página com Tab a partir da barra de endereço e observe o primeiro foco dentro da grade. Anote a oficina e o controle alcançado a cada tecla até sair pelo elemento seguinte à grade. Repita no sentido inverso. Use os nomes dos controles nas anotações, pois a posição numérica muda quando uma oficina é removida. Em telas largas, compare a trajetória com a disposição que se vê. Na tela estreita, verifique se o navegador rola o cartão para uma área em que o foco inteiro fica visível.
Faça uma rodada imediatamente antes e outra imediatamente depois da largura em que a grade ganha uma coluna. Com zoom, um título pode ocupar mais linhas e um item pode mudar de posição mais cedo do que nas capturas do protótipo. Coloque o foco no último botão de um cartão e estreite a janela. Continue com Tab. O foco deve continuar identificável depois do ajuste, e o próximo passo precisa fazer sentido na nova distribuição. Compare com o mesmo teste feito depois de recarregar na largura menor.
Quando a página permite filtrar as oficinas, teste o resultado cheio, o resultado com um cartão e o estado vazio. A volta do último cartão aos filtros com Shift mais Tab deve ser previsível. Se uma mudança de filtro remove o controle que tinha foco, planeje onde o foco reaparece de acordo com a ação realizada. Para uma pessoa que acabou de confirmar um filtro, manter o ponto de interação ou oferecer acesso claro à lista atualizada preserva o contexto da tarefa.
O que verificar com leitura assistiva
Com um leitor de tela, ouça a sequência de títulos e o texto corrido. Depois navegue pelos links e controles. Compare as duas passagens com a ordem de Tab. A pessoa que navega por títulos pode começar por um ponto diferente de quem percorre os links, mas precisa entender a que oficina cada ação pertence. Confira o nome e o estado anunciado dos botões. Quando o foco visual passa por um controle, o contorno também precisa ser distinguível no tema e nos modos de contraste usados pelo público. Como revisar os controles em cores forçadas.
Registre a sequência esperada na coluna única, na grade larga e no cenário sem suporte à propriedade. Guarde as combinações de navegador e leitor de tela verificadas, junto com uma captura da grade mais difícil. Quando alguém inserir uma oficina em destaque, poderá repetir a sequência de teclado e comparar os nomes encontrados. O critério de revisão é conseguir avançar pela coleção e voltar a uma ação anterior sem perder a relação entre a posição na tela e o conteúdo de cada cartão.
Se a revisão mostrar uma diferença de ordem que torna duas oficinas dependentes difíceis de entender, ajuste o agrupamento no HTML e reveja o destaque visual. Repita o teste com a coleção completa e com uma seleção reduzida. A primeira verifica os saltos que surgem numa grade densa. A segunda revela o que acontece quando o espaço vazio muda a percepção de quais cartões pertencem à mesma linha.