Enfoque del teclado

Muchas personas usan un teclado (o algún otro software o hardware que imita las funciones de un teclado, como un dispositivo conmutador) como medio principal de navegación. Las personas con limitaciones físicas temporales, como un esguince de muñeca o discapacidades motrices finas, como el túnel carpiano, y algunas personas sin discapacidades, pueden elegir usar un teclado para navegar por una página debido a preferencias personales, eficiencia o hardware dañado.

Los usuarios ciegos o con visión reducida pueden usar un teclado para la navegación combinada con su software de ampliación o lector de pantalla. Sin embargo, para navegar por la pantalla, pueden usar comandos de combinaciones de teclas diferentes a los de un usuario vidente.

El uso del teclado para todas estas discapacidades y circunstancias es fundamental. Gran parte de la accesibilidad del teclado se centra en el enfoque. El enfoque se refiere a qué elemento de la pantalla recibe la entrada del teclado.

En este módulo, nos concentramos en la estructura HTML y el estilo de CSS para el teclado y los elementos enfocables. El módulo de JavaScript incluye más información sobre la administración del enfoque y las combinaciones de teclas de los elementos interactivos.

Orden de enfoque

Los elementos a los que puede navegar un usuario de teclado se denominan elementos enfocables. El orden de enfoque, también llamado orden de tabulación o navegación, es el orden en el que los elementos reciben el enfoque. El orden del foco predeterminado debe ser lógico e intuitivo, y coincidir con el orden visual de una página.

En la mayoría de los idiomas, el orden comienza en la parte superior de la página y termina en la parte inferior, de izquierda a derecha. Sin embargo, algunos idiomas se leen de derecha a izquierda, por lo que el idioma principal de la página puede justificar un orden de enfoque diferente.

De forma predeterminada, el orden del enfoque incluye elementos HTML que se pueden enfocar de forma natural, como vínculos, casillas de verificación y entradas de texto. Los elementos HTML que se pueden enfocar de manera natural incluyen compatibilidad integrada con el orden de tabulación y control básico de eventos de teclado.

Puedes actualizar el orden del enfoque para incluir cualquier elemento que normalmente no lo reciba, como elementos HTML no interactivos, componentes personalizados o elementos con ARIA que anulen la semántica del enfoque natural.

Índice de tabulaciones

El orden del enfoque comienza con los elementos que tienen un atributo tabindex positivo (si hay alguno) y pasa del número positivo más pequeño al más grande (como 1, 2, 3). Luego, avanza por los elementos con un tabindex de cero según su orden en el DOM. Cualquier elemento con un tabindex negativo se quita del orden de enfoque natural.

Cuando se aplica un tabindex de cero (tabindex="0") a elementos que normalmente no se pueden enfocar, se agregan al orden del enfoque natural de la página según la forma en que aparecen en el DOM. Sin embargo, a diferencia de los elementos HTML que se pueden enfocar de forma natural, debes proporcionar compatibilidad de teclado adicional para que sean totalmente accesibles.

Del mismo modo, si tienes un elemento que normalmente es enfocable, pero inactivo, como un botón que no funciona hasta que se completa un campo de entrada, debes agregar un tabindex negativo (tabindex="-1") a este elemento. Agregar un tabindex negativo indica a las tecnologías de accesibilidad y los teclados que este botón debe quitarse del orden de enfoque natural. Pero no te preocupes, puedes usar JavaScript para volver a agregar el foco en el elemento cuando sea necesario.

En este ejemplo, se agregó un atributo tabindex a los elementos que no reciben el enfoque de forma natural. El orden de los elementos se manipuló con tabindex para ilustrar la potencia que puede tener en el orden del foco. Este es un ejemplo de lo que no hay que hacer.

Omitir vínculos

En la actualidad, la mayoría de los sitios web tienen una larga lista de vínculos de menú en el encabezado principal de la página que es coherente de una página a otra. Esto es ideal para la navegación general, pero puede dificultar que los usuarios de solo teclado puedan acceder fácilmente al contenido principal del sitio web sin tener que usar tabulación varias veces.

Una forma de saltar de grupos de vínculos redundantes o que no son útiles es agregar un vínculo para omitir. Los vínculos de navegación son los que llevan a una sección diferente de la misma página con el ID de esa sección en lugar de dirigir al usuario a otra página del sitio web o a un recurso externo. Por lo general, los vínculos de navegación se agregan como el primer elemento enfocable que encontrará un usuario cuando llegue a un sitio web y pueden estar visibles u ocultos hasta que el usuario acceda a la pestaña, según lo que requiera el diseño.

Cuando un usuario presiona la tecla Tab y hay un vínculo de omisión activo, se envía el enfoque del teclado al vínculo de omisión. El usuario puede hacer clic en el vínculo de omisión y saltar de la sección del encabezado y de la navegación principal. Si decide no hacer clic en el vínculo de omisión y avanzar hacia abajo en el DOM, se lo redireccionará al siguiente elemento enfocable.

Al igual que todos los vínculos, es importante que el vínculo para omitir incluya contexto sobre su propósito. Si agregas la frase "Ir al contenido principal", el usuario sabrá adónde lo lleva el vínculo. Hay muchas opciones de código para elegir a la hora de proporcionar contexto adicional a tus vínculos, como aria-labelledby, aria-label, o agregarlo al contenido de texto del elemento <a>, como se muestra en el ejemplo.

Indicador de enfoque

Como acabas de aprender, el orden del enfoque es un aspecto importante de la accesibilidad del teclado. También es importante decidir cómo se estilo ese enfoque. Porque incluso si el orden del enfoque es excelente, ¿cómo podría un usuario saber dónde se encuentra en la página sin el estilo adecuado?

Un indicador de enfoque visible es una herramienta fundamental para informar a un usuario dónde se encuentra en todo momento de la página. Es especialmente importante para los usuarios videntes que solo usan teclado.

Estilo predeterminado del navegador

Actualmente, cada navegador web moderno tiene un estilo visual predeterminado diferente que se aplica a los elementos enfocables de tu sitio web o app, algunos más visibles que otros. A medida que el usuario presiona la tecla de tabulador en la página, este estilo se aplica cuando el elemento recibe el foco del teclado.

Si permites que el navegador controle el estilo del foco, es importante revisar tu código para confirmar que el tema no anulará el estilo predeterminado del navegador. Por lo general, una anulación se escribe como "outline: 0" o "outline: none" en la hoja de estilo. Este pequeño fragmento de código puede quitar el estilo de indicador de enfoque predeterminado del navegador, lo que dificulta mucho la navegación de los usuarios por tu sitio web o app.

a:focus {
  outline: none; /* don't do this! */
}

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

Estilos personalizados

Por supuesto, puedes ir más allá del estilo predeterminado del navegador y crear un indicador de enfoque personalizado que complemente tu tema. Cuando creas un indicador de enfoque personalizado, tienes mucha libertad para usar la creatividad.

Una forma del indicador de enfoque puede adoptar muchas formas, ya sea un contorno, un borde, un subrayado, un cuadro, un cambio de fondo o algún otro cambio estilístico evidente que no dependa solo del color para indicar que el enfoque del teclado está activo en ese elemento.

Puedes cambiar el estilo del indicador de enfoque para asegurarte de que no se pierda en segundo plano. Por ejemplo, cuando una página tiene un fondo blanco, puedes establecer el indicador de enfoque del botón en un fondo azul. Si la página tiene un fondo azul, puedes establecer ese mismo estilo de enfoque de botón con un fondo blanco.

Puedes cambiar el estilo del elemento de enfoque según el tipo de elemento. Por ejemplo, puedes usar un subrayado de puntos para los vínculos del cuerpo, pero elegir un borde redondeado para el elemento de un botón.

No hay una regla sobre cuántos estilos de indicador de enfoque tienes en una página, pero asegúrate de mantenerlo en un número razonable para evitar confusiones innecesarias.

Conclusión

Para que un sitio web o una app se consideren accesibles, también se debe usar el teclado para acceder a todo el contenido a lo que se puede acceder con el mouse. Este módulo se enfoca en el aspecto visual de la accesibilidad del teclado, en particular, el orden y los indicadores de enfoque.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre ARIA y HTML