No Chrome 130 e versões mais recentes, os controles de rolagem podem ser focalizados pelo teclado por padrão se não tiverem filhos focalizáveis pelo teclado.
Contexto
Os roladores estão em todos os lugares. Um deles está na caixa "Termos e Condições", onde é preciso rolar a tela para baixo e clicar no botão de envio. Ou você pode encontrar uma barra de menu vertical cheia de ícones para escolher.
Nesses casos, muitos usuários da Web usam os movimentos de cima para baixo do mouse ou touchpad para rolar pelo elemento. No entanto, um dispositivo de ponteiro, trackpad ou tela touchscreen não é a maneira ideal de navegar em uma página para todos os usuários. Algumas pessoas preferem navegar por uma página HTML acessando todos os elementos focalizáveis usando apenas o teclado. Isso pode acontecer por vários motivos. De pessoas com tremors ou outros problemas que dificultam o uso de um mouse, pessoas com dificuldade em localizar visualmente o cursor do mouse e outras que usam um único interruptor ou controle de voz.
As práticas recomendadas de acessibilidade recomendam que todos os recursos estejam disponíveis usando um teclado. Assim, todos podem usar a Web da maneira que for melhor para eles.
2.1.1 Teclado: todas as funcionalidades do conteúdo podem ser operadas por uma interface de teclado sem exigir tempos específicos para pressionamento de teclas individuais, exceto quando a função subjacente exige entrada que depende do caminho da movimentação do usuário, e não apenas dos endpoints. (Nível A)
Antes dessa mudança para focar em rolagens
Antes dessa mudança, um elemento de controle de rolagem só podia ser focado pela guia se o tabindex fosse definido explicitamente como 0 ou mais. Por exemplo, use o CSS e o HTML abaixo. Em seguida, tente usar a tecla Tab para navegar do primeiro botão até o elemento de rolagem.
div.scroll, button {
border: 1px solid lightgray;
margin-top: 1em;
border-radius: 0.5em;
}
div.scroll {
overflow: auto;
width: 20em;
height: 5em;
display: block;
}
div.long {
width: 10em;
height: 10em;
}
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a tab focusable scroller...</p>
<div class="long"></div>
<p>You need to scroll down to see this line.</p>
</div>
<button>End</button>
Usando um tabindex negativo, como no HTML abaixo, o controle de rolagem será pulado.
<button>Start</button>
<div class="scroll" tabindex="-1">
<p>This is not a tab focusable scroller...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
Se você não definir um valor de tabindex, pode ser difícil para o usuário usar a navegação sequencial de foco para acessar o controle deslizante. Isso pode ser muito frustrante para usuários que não têm acesso a um mouse.
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
Um contêiner de rolagem que contém filhos focalizáveis, como no HTML a seguir, já é acessível, já que as teclas de seta permitem a rolagem quando os filhos focalizáveis são focados. Nenhum comportamento está sendo alterado nesse caso.
<button>Start</button>
<div class="scroll">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
Do Chrome 130 com controles de rolagem focalizáveis
Esse recurso permite que controles de rolagem sem o valor do tabindex definido e sem filhos focalizáveis sejam focalizados pelo teclado. Isso permite que os usuários que não podem ou escolhem não usar um mouse foquem o conteúdo usando as teclas Tab e de seta do teclado.
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>but you can scroll through its content!</p>
</div>
<button>End</button>
Esse comportamento só acontece se o contêiner de rolagem não tiver filhos que podem ser focalizados. Por exemplo, se o controle de rolagem já tiver um botão, o foco da guia vai pular o controle e focar diretamente no botão. Nesse caso, o conteúdo do rolagem já pode ser acessado usando as teclas de seta, depois que o botão é selecionado. Devido a essa regra, o padrão nem sempre se comporta da maneira ideal se essas crianças existirem. Se você quiser que o elemento de controle de rolagem seja focado pelo teclado nessa situação, é recomendável definir um valor de tabindex igual a 0 ou mais.
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
Esse recurso permite que os roladores sejam acessados por teclado por padrão em todos os casos, o que vai ajudar os usuários da Web a ter uma experiência mais suave ao navegar pelas guias de uma página.