Desplazamientos enfocables del teclado

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

Información general

Los manuscritos están por todos lados. Es posible que encuentres uno en la sección “Términos y Condiciones” caja, debes desplazarte hacia abajo para hacer clic en el botón Enviar. O podría encontrar una barra de menú vertical llena de iconos 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 apuntador, un panel táctil o la pantalla táctil no es la forma óptima para navegar por una página. Algunas personas prefieren navegar por una página HTML y acceder a todos los elementos enfocables usando solo su teclado. Esto puede ser por 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 sugieren 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, el enfoque está en los elementos de desplazamiento

Antes de este cambio, un elemento de desplazamiento solo puede enfocarse en una pestaña si el tabindex se establece 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>
La barra de desplazamiento es enfocable debido a un tabindex positivo.

Si usas un tabindex negativo como en el siguiente HTML, la barra de desplazamiento se se omitió.

<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 omite el desplazador debido a un tabindex negativo.

Si no estableces un valor de tabindex, el usuario puede tener dificultades para usarlo 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>
La barra de desplazamiento no tiene tabindex.

Ten en cuenta que un desplazador que contiene elementos secundarios enfocables, como en el siguiente HTML ya que las teclas de flecha permitirán el desplazamiento cuando se concentran los niños enfocables. 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>
El desplazador es enfocable porque contiene elementos secundarios enfocables.

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 a 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>
El desplazador no tiene índice de tabulación ni elementos secundarios enfocables aún.

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 pestaña omitir la barra de desplazamiento y enfocarse 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 la configuración predeterminada no siempre se comporte la forma óptima si existen tales elementos secundarios. 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>
La barra de desplazamiento tiene un tabindex de 0.

Esta función permite acceder de forma predeterminada 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 por las pestañas. una página.