Uma barra de progresso de rolagem deve representar a posição no trecho que o leitor acredita estar percorrendo. Em um guia longo, defina se a referência é a página inteira ou uma área de leitura, coloque a barra perto da navegação e mantenha os capítulos acessíveis pelo sumário. O Interop 2026 inclui animações controladas pela rolagem no trabalho de compatibilidade entre navegadores. Com CSS, uma barra visual pode acompanhar o deslocamento sem que a aplicação calcule um novo valor a cada evento de rolagem.

Defina o que o início e o fim querem dizer

Num guia de restauração de um edifício, o texto pode acabar antes da galeria, das referências e do rodapé. Uma barra que continua crescendo nessas regiões mede o documento inteiro. Isso pode ser apropriado se o rótulo indicar posição na página. Quando a interface fala em progresso do guia, o leitor espera que o fim coincida com o encerramento do conteúdo principal. Identifique esse ponto no protótipo e teste uma seção final curta, em que o último parágrafo pode aparecer antes de a janela chegar ao limite de rolagem.

A barra indica deslocamento. Uma pessoa pode seguir um link direto até a terceira seção, abrir uma nota ou voltar para conferir um diagrama. Cada ação muda a posição, mesmo sem acrescentar texto lido. Por isso, evite apresentar o percentual como confirmação de leitura ou conclusão de uma tarefa. Em um manual que realmente exige etapas concluídas, use um indicador baseado em ações confirmadas e mantenha a posição de rolagem como informação visual auxiliar.

Escolha o contêiner antes de escolher a animação

Abra o layout no tamanho de tela em que o guia será usado. Se toda a página rolar, uma timeline de progresso de rolagem do documento pode ser suficiente. Se o texto estiver dentro de um painel ao lado de um índice fixo, use a rolagem desse painel como origem. A documentação de timelines de rolagem da MDN distingue o progresso do contêiner da passagem de um elemento pela área visível. Essa segunda medida serve, por exemplo, para acompanhar a entrada de uma ilustração, enquanto a primeira acompanha o percurso no contêiner.

Uma barra no cabeçalho e um texto dentro de outro elemento podem exigir uma timeline nomeada e escopo adequado para que ambos compartilhem a mesma referência. Para diagnosticar um valor parado, procure primeiro qual elemento realmente ganha rolagem. Uma alteração de layout pode mover a rolagem do documento para o painel. Teste também a versão estreita, em que o sumário muda de posição e a página pode voltar a rolar como um bloco único.

Desenhe uma barra que não mude a diagramação

Reserve a posição da faixa no cabeçalho e anime o preenchimento com uma transformação de escala horizontal. Fixe a origem na borda que corresponde ao início de leitura. Assim, o preenchimento avança dentro de um espaço conhecido. Com uma timeline de progresso, o preenchimento deve avançar e recuar com o deslocamento. Se voltar ao início produzir uma segunda transição atrasada, examine o efeito aplicado ao preenchimento e a ordem das declarações.

Ao implementar, declare animation-timeline depois da forma abreviada animation, caso use ambas. A forma abreviada redefine a timeline. Ative a barra apenas onde a sintaxe usada estiver disponível e onde houver um percurso útil. Uma faixa vazia sem movimento pode parecer um estado de carregamento. Para uma versão sem barra, mantenha o cabeçalho com o mesmo alinhamento e preserve o acesso ao sumário. Use a cor para diferenciar preenchimento e trilho quando a faixa aparecer.

Proteja o espaço para títulos e para o foco

Uma barra fina pode morar no limite do cabeçalho sem ocupar uma linha inteira. Se o cabeçalho ficar fixo, teste a chegada aos títulos pelo sumário. O título precisa ficar visível depois da navegação. Confira o deslocamento necessário no contêiner ou nas seções e teste quando o cabeçalho quebra em duas linhas. O artigo sobre barras fixas e foco encoberto no celular traz situações para testar com teclado e viewport reduzido.

Em páginas com busca interna, um salto para um resultado também deve atualizar a posição visual. Use o cenário de busca na página com destaques de texto para testar quando um resultado aparece perto da borda superior. Verifique se o destaque e o título correspondente aparecem juntos quando o leitor precisa recuperar o contexto. Se houver duas barras horizontais com funções diferentes, como busca e navegação fixa, experimente uma única região persistente para reduzir a área encoberta.

Prepare uma leitura estável com movimento reduzido

Mantenha o sumário, a hierarquia de títulos e os links para seções disponíveis independentemente da faixa visual. Se o sistema pedir movimento reduzido, você pode suprimir a animação decorativa e manter um marcador estático de seção quando ele ajudar a navegação. Uma faixa puramente decorativa pode ficar fora da árvore de acessibilidade. Se a posição for informação necessária, exponha-a com uma indicação textual adequada à tarefa. Evite anunciar cada variação do percentual durante a rolagem.

Teste com teclado usando as teclas que rolam o documento e com um salto direto para um título. O deslocamento por âncora, por restauração da página ou por busca pode começar longe do topo. A faixa precisa refletir esse estado sem obrigar a pessoa a rolar primeiro. Em um artigo curto que caiba inteiro na tela, a ausência de faixa pode ser a apresentação mais clara, desde que o cabeçalho e a navegação continuem consistentes.

Revise os extremos com o conteúdo carregado

Abra a primeira seção, a última e um link direto no meio. Confira em cada caso o que a barra sugere e o que aparece de fato. Depois aumente o texto e abra uma imagem com dimensões reservadas. Mudanças de altura durante o carregamento podem alterar o percurso total. Se uma figura faz a barra recuar de repente, verifique se o espaço da mídia já era conhecido antes de carregar. Repita o teste com notas expansíveis, que mudam intencionalmente a altura do texto.

Faça uma segunda passagem em uma tela pequena, começando pela volta do histórico. Em seguida, desative o recurso avançado no navegador de teste e execute a mesma navegação. Peça a uma pessoa para localizar a última orientação do guia sem usar a faixa. Se ela precisar adivinhar em que seção está, melhore o sumário e a hierarquia. A faixa está pronta quando acompanha a área que promete representar, ocupa pouco espaço e permite que a leitura siga por títulos e links em qualquer estado.

Ao documentar o componente, anote qual elemento rola, qual ponto representa o fim e o que deve aparecer quando o conteúdo é curto. Esses três dados ajudam a equipe a testar a faixa novamente quando o layout mudar. Inclua uma captura da última seção em celular e outra com o sumário acionado por teclado para registrar a posição do título em relação ao cabeçalho.

Teste também a página com ampliação suficiente para que os títulos ocupem duas ou três linhas. A proporção percorrida pode mudar porque a coluna ficou mais alta, ainda que o leitor esteja no mesmo parágrafo. Observe se o título ativo no sumário continua coerente com o conteúdo visível. Em um guia que destaca a seção atual, escolha um critério explícito, como o último título que passou pela borda superior da área de leitura. Esse marcador pode ajudar a retomar a leitura depois de mudar o tamanho da janela. Se o progresso e o sumário parecerem contraditórios, confira primeiro se ambos usam a mesma área de rolagem. Confirme o mesmo comportamento em uma janela baixa com o painel de leitura aberto.