5.3: Prueba de navegación con tecla de tabulación
- Page ID
- 154525
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
La prueba de navegación de teclas de tabulación se usa a menudo con la prueba “Seleccionar todo” (que se analiza en la página siguiente) para confirmar si los elementos que no fueron seleccionados son operables por teclado, pero esta prueba también se puede usar por sí sola. Coloque el cursor al comienzo del contenido HTML (a veces complicado), o en el campo de ubicación del navegador o la barra de direcciones, luego presione la tecla Tab repetidamente y observe cómo el cursor se mueve por el contenido de la página. Haga las siguientes observaciones:
- ¿Eres capaz de ver el área de enfoque del cursor a medida que te desplazas por los elementos de la página? De no ser así, esto violará la Directriz 2.4.7 Foco Visible (Nivel AA). Al informar sobre el tema, recomendamos agregar un indicador de enfoque para que sea posible seguir visualmente el cursor a medida que se mueve por la página.
- Al navegar con la tecla Tab a través de elementos de la página, ¿reciben foco todos los elementos funcionales como enlaces, botones o formularios? De no ser así, aquellos elementos que no reciben foco van a ser inaccesibles para algunas personas, violando la Guía 2.1.1 Teclado (Nivel A).
Técnico: Estos elementos suelen ser características personalizadas construidas con HTML y JavaScript no estándar. En tales casos puede recomendar el uso de HTML estándar cuando sea posible o sugerir al desarrollador agregar enfoque de teclado para el elemento agregando tabindex="0" al HTML, y agregar eventos de teclado, además de los eventos de mouse existentes, a la programación que controla la funcionalidad de la función .
- Al navegar con la tecla Tab a través de elementos de la página, ¿la ruta que se sigue a través de estos elementos es la secuencia estándar de izquierda a derecha, de arriba a abajo? Si el foco del cursor salta alrededor, moviéndose a lugares en la página fuera donde lógicamente podría esperar que el cursor vaya al ver el diseño de los elementos en la página, puede violar la directriz 2.4.3 Orden de enfoque (Nivel A). Por defecto el orden de enfoque será estándar, por lo que en los casos en que el orden sea irregular, es porque el desarrollador ha cambiado intencionadamente el orden. Es posible que recomiende eliminar la secuencia de tabulación irregular o ajustarla para seguir un camino más significativo.
- Mientras navega con la tecla Tab a través de los menús, y otras características que uno puede operar con un mouse, ¿estas características también operan con un teclado? Si no lo hacen, serán inaccesibles para quienes utilicen sólo un teclado para desplazarse por el contenido web. En la siguiente figura, los submenús que se despliegan cuando se hace clic en uno de los elementos principales de navegación no se pueden abrir con una pulsación de teclas. Estos tipos de menús pueden usar las teclas de flecha para abrir y navegar por submenús, o bien pueden operar usando la tecla Tab. Se prefieren las teclas de flecha, aunque la navegación con la tecla Tab satisfará los criterios de éxito asociados con la operabilidad del teclado.
Para los menús desplegables como los descritos en #4 arriba, también observe la navegación de la tecla Tab moviéndose a través de los elementos en los submenús, pero los submenús no se abren visiblemente. Esto será confuso para los usuarios de teclado de baja visión que están siguiendo el indicador de enfoque para realizar un seguimiento de dónde se encuentran dentro de la página.
Figura: Escenario en el que los menús solo funcionan con un clic del ratón (ver Piruletas de Lulu)