scrollable-region-focusable
Las regiones desplazables sin contenido enfocable deberían ser enfocables por teclado
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). Si no encuentra nada por lo que preguntar, devuelve notApplicable, no pass: solo se aplica a lo que su comprobación señala, y no encontrar nada ahí no demuestra que todo esté bien.
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 en el orden secuencial de tabulación (un enlace, botón, control de formulario, o elemento con un tabindex no negativo al que un usuario de teclado podría tabular y luego usar las teclas de flecha para desplazarse; no cuenta uno con tabindex="-1", un control deshabilitado o de type="hidden", ni uno que la página oculta), o se llega a la propia región con Tab: mediante un tabindex no negativo, o de forma nativa, como ocurre con un <textarea> o una región editable. Se deja fuera un <textarea> deshabilitado, ya que un campo deshabilitado no tiene por qué ser operable.
Ejemplos
<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.
<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.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
SCROLLABLE_OVERFLOW_NOT_FOCUSABLE
- Localizar el elemento que indica el informe y comprobar, en los tamaños en que se usa la página, si su contenido desborda (aparece una barra de desplazamiento o el contenido queda cortado).
- Si no desborda, cumple.
- Si desborda, hacer clic justo antes de él y pulsar Tab hasta que el foco llegue a él.
- Con el foco en él, pulsar las teclas de flecha, Av Pág y Espacio, y comprobar que el contenido se desplaza.
- Si la propia región no se puede desplazar con el teclado, la página puede ofrecer otra forma de ver lo oculto, como los botones anterior y siguiente de un carrusel. Solo cuenta si se puede usar solo con el teclado y hace visible cada elemento oculto.
Se cumple. El elemento no desborda, o todo lo oculto en él se puede hacer visible solo con el teclado, desplazándolo o con otra forma que ofrece la página.
No se cumple. Parte del contenido oculto solo se puede hacer visible con el ratón o con el tacto, lo que incumple WCAG 2.1.1.