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 controles de rolagem estão em toda parte. Você pode encontrar um na caixa "Termos e condições", onde você precisa rolar até o fim para 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 para cima e para baixo do mouse ou do 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 com foco usando apenas o teclado. Isso pode acontecer por vários motivos. De pessoas que tremores ou outros problemas que dificultam o uso de um mouse, aqueles que têm dificuldade em localizar visualmente o cursor do mouse, e outros que usam uma única 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: todos funcionalidade do conteúdo possa ser operada por uma interface do teclado sem exigir tempos específicos para cada vez que as teclas forem pressionadas, exceto quando o da função requer uma entrada que depende do caminho da rota e não apenas para os endpoints. (Nível A)
Antes dessa mudança para focar em rolagens
Antes dessa mudança, um elemento de rolagem só pode ser focado na guia se o tabindex é explicitamente definido como 0 ou maior. Por exemplo, use o CSS e o HTML abaixo. Em seguida, tente passar do primeiro botão para o elemento do controle deslizante.
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 os controles de rolagem sem valor de tabindex definido e sem nenhuma filhos focalizáveis para serem focalizáveis 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 botão de rolagem não tiver filhos focalizáveis. 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 botão de rolagem o conteúdo já pode ser acessado usando as teclas de seta, uma vez que o botão é focada. Devido a esta regra, o padrão nem sempre se comporta na maioria forma ideal, se tais filhos existirem. Se você quiser que o próprio elemento de rolagem ser focalizável pelo teclado nessa situação, é recomendável definir um tabindex com valor 0 ou maior.
<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 controles de rolagem sejam acessados pelo teclado por padrão em todos os casos, o que ajudará os usuários da Web a ter uma experiência mais tranquila ao navegar por guias uma página.