Aspectos básicos del acceso al teclado

Muchos usuarios diferentes dependen del teclado para navegar por las aplicaciones, desde usuarios con discapacidades motrices temporales y permanentes hasta usuarios que usan combinaciones de teclas para ser más eficientes y productivos. Tener una buena estrategia de navegación con teclado para tu aplicación crea una mejor experiencia para todos.

El enfoque y el orden de tabulación

En un momento determinado, enfoque hace referencia a qué elemento de la aplicación (como un campo, una casilla de verificación, un botón o un vínculo) recibe actualmente la entrada del teclado. Además de recibir eventos del teclado, el elemento enfocado también obtiene contenido que se pega desde el portapapeles.

Si deseas mover el enfoque en una página, usa TAB para navegar "adelante" y SHIFT + TAB para navegar "hacia atrás". El elemento enfocado actualmente se suele indicar con un anillo de enfoque, y varios navegadores tienen un diseño diferente. El orden en el que el enfoque avanza y retrocede a través de los elementos interactivos se denomina orden de tabulación.

Los elementos HTML interactivos, como los campos de texto, los botones y las listas de selección, son enfocables de forma implícita: se insertan automáticamente en el orden de tabulación según su posición en el DOM. Estos elementos interactivos también tienen control integrado de eventos de teclado. Los elementos como los párrafos y div no son enfocables de manera implícita porque los usuarios, por lo general, no necesitan interactuar con ellos.

La implementación de un orden de tabulación lógico es una parte importante para proporcionar a tus usuarios una experiencia de navegación con el teclado fluida. Hay dos ideas principales que debes tener en cuenta cuando evalúes y ajustas el orden de las pestañas:

  1. Organiza los elementos en el DOM para que estén en un orden lógico.
  2. Establece correctamente la visibilidad del contenido fuera de pantalla que no debe recibir el foco.

Organiza los elementos en el DOM para que estén en un orden lógico.

Para verificar si el orden de tabulación de tu aplicación es lógico, intenta navegar con tabulación por tu página. En general, el enfoque debe seguir el orden de lectura, de izquierda a derecha, de la parte superior a la parte inferior de la página.

Si el orden del enfoque parece incorrecto, debes reorganizar los elementos en el DOM para que el orden de las pestañas sea más natural. Si quieres que un elemento aparezca visualmente antes en la pantalla, muévelo antes en el DOM.

Intenta navegar con tabulación por los dos conjuntos de botones que aparecen a continuación para experimentar un orden de tabulación lógico en comparación con un orden de tabulación ilógico:

Orden lógico de pestañas

Orden ilógico de pestañas

A continuación, se compara el código de estos dos ejemplos:

Orden lógico de pestañas

<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

Orden ilógico de pestañas

<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

Ten cuidado cuando cambies la posición visual de los elementos con CSS para evitar crear un orden de tabulación ilógico. Para corregir el orden ilógico de pestañas anterior, mueve el botón flotante "Kiwi" para que aparezca después del botón "Coconut" en el DOM y quita el estilo intercalado.

Establecer correctamente la visibilidad del contenido fuera de pantalla

A veces, los elementos interactivos fuera de pantalla deben estar en el DOM, pero no deberían estar en el orden de tabulación. Por ejemplo, si tienes una navegación lateral responsiva que se abre cuando haces clic en un botón, el usuario no debería poder enfocarse en la navegación lateral cuando está cerrado.

Para evitar que un elemento interactivo en particular reciba el foco, debes darle al elemento alguna de las siguientes propiedades de CSS:

  • display: none
  • visibility: hidden

Para volver a agregar el elemento al orden de tabulación, por ejemplo, cuando se abre la navegación lateral, reemplaza, respectivamente, las propiedades de CSS anteriores por lo siguiente:

  • display: block
  • visibility: visible

Próximos pasos

Para los usuarios que operan su computadora casi por completo con el teclado o con otro dispositivo de entrada, un orden de tabulación lógico es esencial para que tu aplicación sea accesible y fácil de usar. Como buen hábito para verificar el orden de las pestañas, intenta examinar tu aplicación antes de cada publicación.