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 manuscritos están por todos lados. 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 veas una barra de menú vertical llena de íconos para elegir.

En tales casos, muchos usuarios web utilizan los movimientos de arriba abajo del mouse o panel táctil para desplazarte 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 Prefieres navegar por una página HTML y acceder a todos los elementos enfocables usando solo su teclado. Esto puede deberse a varias razones. De personas que tienen temblores u otros problemas que dificultan el funcionamiento del mouse, aquellos que tienen dificultades para ubicar visualmente el cursor del mouse y otras personas que utilizan un solo o el 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 mejor funcione. para ellos.

2.1.1 Teclado: Todos funcionalidad del contenido se puede operar a través de interfaz de teclado sin requerir sincronizaciones específicas para pulsaciones de teclas individuales, excepto cuando la función subyacente requiere entradas que dependen de la ruta de acceso del movimiento y no solo en los extremos. (Nivel A)

Antes de este cambio para enfocarse en los controles 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 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 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 código HTML, ya que las teclas de flecha permitirán el desplazamiento cuando se enfoquen los elementos secundarios enfocables. En este caso, no se cambia ningún comportamiento.

<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 valor de tabindex establecido y sin ningún valor los niños enfocables sean enfocables con el teclado. Esto permite que los usuarios que no pueden o elige no usar el mouse para enfocar el contenido con la pestaña y la flecha del teclado claves.

<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 el desplazador ya contiene un botón, el enfoque de la tecla Tab omite el desplazador y se enfoca directamente en el botón. En este caso, la barra de desplazamiento ya se podrá acceder al contenido con las teclas de flecha, una vez que el botón esté enfocados. 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 este tipo. Si deseas que el propio elemento de desplazamiento puede enfocarse en el teclado en esta situación, se recomienda establecer un tabindex valor 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 por 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 pestañas en una página.