No Chrome 124 e versões mais recentes, os controles de rolagem são focalizáveis pelo teclado por padrão se não tiverem filhos focalizáveis do teclado.
Contexto
Os controles de rolagem estão por toda parte. Você pode encontrar um na caixa "Termos e Condições", onde é necessário rolar até a parte de baixo para clicar no botão "Enviar". Ou você pode encontrar uma barra de menus 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 apontador, trackpad ou tela touch não é a maneira ideal de navegar em uma página para todo usuário. 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 do mouse, pessoas que têm dificuldade para 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. Dessa forma, todos podem usar a Web da maneira que funcionar melhor para eles.
2.1.1 Teclado: todas as funcionalidades do conteúdo podem ser operáveis por uma interface de teclado sem exigir tempos específicos para pressionamentos de tecla individuais, exceto quando a função subjacente exige entrada que depende do caminho do movimento do usuário, e não apenas dos endpoints. (Nível A)
Antes dessa mudança para foco em controles de rolagem
Antes dessa mudança, o foco de um elemento de rolagem só podia ser definido se o tabindex for definido explicitamente como 0 ou maior. Por exemplo, use os seguintes CSS e HTML. Em seguida, tente usar a tecla Tab do primeiro botão para ir 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 a seguir, o botão de rolagem será ignorado.
<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, o usuário poderá ter dificuldade para usar a navegação de foco sequencial para acessar o botão de rolagem. 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 botão de rolagem que contém filhos focalizáveis, como no HTML abaixo, já está acessível, já que as teclas de seta permitem a rolagem quando os filhos focalizáveis estão em foco. Nenhum comportamento será 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 124 com controles de rolagem focalizáveis
Esse recurso permite que controles de rolagem sem valor de tabindex definido e sem filhos focalizáveis sejam focalizáveis pelo teclado. Isso permite que os usuários que não podem ou optem por não usar um mouse para focar o conteúdo usando as teclas Tab e de seta.
<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ó vai acontecer se o botão de rolagem não tiver filhos focalizáveis. Por exemplo, se o botão de rolagem já tiver um botão, o foco da guia ignorará o botão e focará diretamente no botão. Nesse caso, o conteúdo da rolagem já pode ser acessado usando as teclas de seta, assim que o botão estiver focado. Devido a essa regra, o padrão nem sempre se comportará da maneira melhor se esses filhos existirem. Se você quiser que o próprio elemento de rolagem seja focalizável pelo teclado nessa situação, é recomendável definir um valor de tabindex de 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 acessíveis pelo teclado por padrão em todos os casos, o que ajuda os usuários da Web a ter uma experiência mais suave ao navegar com a tecla Tab em uma página.