A partir de Chrome 124, los desplazadores son enfocables de forma predeterminada si no tienen elementos secundarios enfocables por teclado.
Información general
Los desplazadores están por todas partes. Es posible que encuentres uno en el cuadro "Términos y Condiciones", donde debes desplazarte hacia abajo para hacer clic en el botón Enviar. También es posible que encuentres una barra de menú vertical llena de íconos para elegir.
En esos casos, muchos usuarios de la Web usan los movimientos de arriba hacia abajo del mouse o el panel táctil para desplazarse por el elemento. Sin embargo, un dispositivo apuntador, un panel táctil o una pantalla táctil no son la mejor manera de navegar por una página para todos los usuarios. Algunas personas prefieren navegar por una página HTML para acceder a todos los elementos enfocables solo con el teclado. Esto puede deberse a varios motivos. desde personas que tienen temblores u otros problemas que dificultan el manejo del mouse, quienes tienen dificultades para ubicar visualmente el cursor del mouse y otras que usan un solo interruptor o control por voz.
En las prácticas recomendadas de accesibilidad, se indica que todas las funciones deben estar disponibles con un teclado. De esta forma, todos pueden usar la Web de la forma que les resulte más conveniente.
2.1.1 Teclado: Toda la funcionalidad del contenido se puede operar a través de una interfaz de teclado sin requerir tiempos específicos para las pulsaciones de teclas individuales, excepto cuando la función subyacente requiera una entrada que dependa de la ruta del movimiento del usuario y no solo de los extremos. (Nivel A)
Antes de este cambio para enfocar en los desplazadores
Antes del cambio, un elemento de desplazamiento solo se puede enfocar con tabulación si el tabindex se configura explícitamente en 0 o más. Por ejemplo, usa los siguientes CSS y HTML. Luego, intenta presionar Tab desde el primer botón hasta el elemento de desplazamiento.
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>
Si usas un tabindex negativo como en el siguiente HTML, se omitirá el desplazador.
<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>
Si no estableces un valor de tabindex, puede ser difícil para el usuario usar la navegación de enfoque secuencial para acceder a la barra de desplazamiento. Esto puede ser muy frustrante para los usuarios que no tienen acceso a un 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>
Ten en cuenta que ya se puede acceder a un desplazador que contiene elementos secundarios enfocables, como en el siguiente HTML, debido a que las teclas de flecha permitirán el desplazamiento cuando los elementos secundarios enfocables están enfocados. No se modificará ningún comportamiento en este 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>
De Chrome 124 con desplazadores enfocables
Esta función permite que los desplazadores sin un valor de tabindex establecido y sin ningún elemento secundario enfocable sean enfocables con teclado. Esto permite a los usuarios que no pueden usar un mouse o deciden no hacerlo para enfocar el contenido con las teclas de flecha y de tabulación del 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>
Ten en cuenta que este comportamiento solo ocurre si la barra de desplazamiento no tiene elementos secundarios enfocables. Por ejemplo, si la barra de desplazamiento ya contiene un botón, el foco de la pestaña omitirá la barra de desplazamiento y se enfocará directamente en el botón. En este caso, ya se puede acceder al contenido de la barra de desplazamiento con las teclas de flecha, una vez que el botón está enfocado. Debido a esta regla, es posible que la configuración predeterminada no siempre se comporte de la mejor manera si existen esos elementos secundarios. Si deseas que el elemento de desplazamiento sea enfocable en esta situación, se recomienda establecer un valor de tabindex de 0 o superior.
<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>
Esta función permite que se pueda acceder con el teclado a los desplazadores de forma predeterminada en todos los casos, lo que ayudará a los usuarios de la Web a tener una experiencia más fluida cuando naveguen con pestañas por una página.