Desplazamientos enfocables del teclado

A partir de Chrome 130, los desplazadores se pueden enfocar con el teclado de forma predeterminada si no tienen elementos secundarios enfocables con el teclado.

Segundo plano

Los controles de desplazamiento están en todas partes. Es posible que encuentres uno en un cuadro de “Términos y Condiciones”, en el que debes desplazarte hasta el final para hacer clic en el botón de envío. También es posible que encuentres una barra de menú vertical llena de íconos para elegir.

En esos casos, muchos usuarios web usan los movimientos hacia arriba y hacia abajo del mouse o del panel táctil para desplazarse por el elemento. Sin embargo, un dispositivo de puntero, un panel táctil o una pantalla táctil no son la forma óptima para que todos los usuarios naveguen por una página. Algunas personas prefieren navegar por una página HTML y acceder a cada elemento enfocado solo con el teclado. Esto puede deberse a varios motivos. Desde personas que tienen temblores o algún otro problema que dificulta el uso de un mouse, hasta quienes tienen dificultades para ubicar visualmente el cursor del mouse y otras que usan un solo interruptor o control por voz.

Las prácticas recomendadas de accesibilidad recomiendan que todas las funciones deben estar disponibles con un teclado. De esta manera, todos pueden usar la Web de la forma que más les convenga.

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 pulsaciones de teclas individuales, excepto cuando la función subyacente requiere una entrada que depende de la ruta del movimiento del usuario y no solo de los extremos. (nivel A)

Antes de este cambio, el enfoque está en los elementos de desplazamiento

Antes de este cambio, un elemento desplazador solo podía enfocarse con la tecla Tab si el tabindex se establecía de forma explícita en 0 o más. Por ejemplo, usa el siguiente CSS y HTML. Luego, intenta presionar Tab desde el primer botón hasta el elemento del control 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>

Si usas un tabindex negativo como en el siguiente código HTML, se omitirá el control deslizante.

<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 al control deslizante. 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, ya 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>

Desde Chrome 130 con desplazadores enfocables

Esta función permite que los desplazadores sin un valor de tabindex establecido y sin ningún elemento secundario enfocable se enfoquen con el teclado. Esto permite que los usuarios que no pueden o no quieren usar un mouse enfoquen el contenido con las teclas de flecha y Tab 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 el desplazador no tiene elementos secundarios enfocables. Por ejemplo, si la barra de desplazamiento ya contiene un botón, el foco de pestaña omitirá la barra de desplazamiento y se enfocará directamente en el botón. En este caso, ya se puede acceder al contenido del control deslizante con las teclas de flecha una vez que se enfoca el botón. Debido a esta regla, es posible que el valor predeterminado no siempre se comporte de la manera más óptima si existen elementos secundarios de ese tipo. Si deseas que el elemento desplazador se pueda enfocar con el teclado 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 los controles de desplazamiento sean accesibles con el teclado 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 por una página con las pestañas.