scrollable-region-focusable

Las regiones desplazables sin contenido enfocable deberían ser enfocables por teclado

manualWCAG 2.1.1, 2.1.3 (AAA)confianza: lowgravedad: moderateoperable

Marca elementos cuyo CSS declara overflow:auto/scroll, que no contienen ningún descendiente enfocable y que no son ellos mismos enfocables por teclado, para revisión manual de si su contenido realmente desborda y necesita acceso de desplazamiento por teclado.

Ámbito de aplicación. Delimitado deliberadamente a un conjunto fijo de etiquetas de contenedor con probabilidad de desplazarse (div, section, article, aside, main, nav, pre, table, blockquote, ul, ol, textarea) con `overflow-x`/`overflow-y` calculado como `auto` o `scroll`, no a todos los elementos de la página, para mantener esto determinista y eficiente (el mismo tipo de acotación de alcance que `region`).

Resultado esperado. Una región cuyo CSS declara que puede desplazarse (`auto`/`scroll`) debería ser alcanzable por teclado: o bien ya contiene un descendiente enfocable (un enlace, botón, control de formulario, o elemento con `tabindex` al que un usuario de teclado podría tabular y luego usar las teclas de flecha para desplazarse), o la propia región lleva un `tabindex` no negativo.

Ejemplos

can't tell
<style>.scrollY { overflow-y: auto; height: 100px; }</style>
<div class="scrollY">Plain long text content with no interactive children at all.</div>

La región puede desplazarse, pero no tiene `tabindex` propio ni contiene ningún descendiente enfocable, así que un usuario de teclado nunca puede alcanzarla para desplazarla.

n/a
<style>.scrollY { overflow-y: auto; height: 100px; }</style>
<div class="scrollY" tabindex="0">Long content, but the region itself is focusable.</div>

`tabindex="0"` hace que la propia región desplazable sea alcanzable por teclado.

Ver código fuente