No Chrome 130, os controles de rolagem são focalizáveis pelo teclado por padrão se não tiverem filhos focalizáveis por teclado.
Contexto
Os controles de rolagem estão em toda parte. Para encontrar um deles, consulte os "Termos e Condições" caixa em que é preciso rolar para baixo 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 de cima para baixo do mouse ou no touchpad para rolar pelo elemento. No entanto, um dispositivo apontador, trackpad ou touchscreen não é a melhor maneira de navegar em uma página para todos. Algumas pessoas preferem navegar por uma página HTML acessando cada elemento focalizável 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 o um teclado. Dessa forma, todos podem usar a Web da maneira que funcionar melhor. para eles.
.2.1.1 Teclado: todos funcionalidade do conteúdo possa ser operada por meio de 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, o foco nos controles de rolagem
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 a seguir. 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 a seguir, o botão 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 tabindex, o usuário poderá ter dificuldade para usá-lo 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 a seguir, já está acessível, pois as teclas de seta permitem rolar a tela quando o as crianças focalizáveis são focadas. Nesse caso, nenhum comportamento será alterado.
<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 optar por não usar um mouse para focar o conteúdo usando a tecla Tab e a seta do teclado chaves.
<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 botão de rolagem já tiver um botão, o foco da guia pular o botão de rolagem 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.