Si usas los elementos HTML semánticos correctos, podrás satisfacer la mayoría o todas las necesidades de acceso al teclado. Eso significa menos tiempo de jugar con tabindex
y usuarios más satisfechos.
Compatibilidad con el teclado de forma gratuita (y mejores experiencias en dispositivos móviles)
Hay varios elementos interactivos integrados con una semántica adecuada y compatibilidad con el teclado. La mayoría de los desarrolladores utilizan las siguientes:
Además, los elementos con el atributo contenteditable a veces se usan para la entrada de texto de formato libre.
Es fácil pasar por alto la compatibilidad integrada con el teclado que ofrecen estos elementos.
A continuación, se incluyen algunos ejemplos de elementos para explorar. En lugar de usar el mouse, intenta usar el teclado para operarlos. Puedes usar TAB (o SHIFT +
TAB) para moverte entre controles, y puedes usar las teclas de flecha y las teclas como ENTER y SPACE para manipular sus valores.
Si tienes un teléfono a mano, podrás ver que muchas veces estos elementos integrados tienen interacciones únicas en dispositivos móviles. ¡Tratar de reproducir estas interacciones móviles tú mismo lleva mucho trabajo! Es otra buena razón para limitarte a los elementos integrados siempre que sea posible.
Usa button en lugar de div
Un antipatrón de accesibilidad común consiste en tratar un elemento no interactivo, como div o span, como un botón al agregarle un controlador de clics.
Sin embargo, para que se considere accesible, un botón debe:
- Ser enfocable mediante el teclado
- Se está inhabilitando la asistencia
- Admite las teclas
ENTERoSPACEpara realizar una acción. - Ser anunciado correctamente por un lector de pantalla
Un botón div no tiene ninguno de estos elementos. Eso significa que deberás escribir código adicional para replicar lo que el elemento button te ofrece de forma gratuita.
Por ejemplo, los elementos button tienen un truco genial llamado *activación de clics sintéticos*. Si agregas un controlador de “clic” a un button, se ejecutará cuando el usuario presione ENTER o SPACE. Un botón div no tiene esta función, por lo que deberás escribir código adicional para escuchar el evento keydown, verificar que el código de tecla sea ENTER o SPACE y, luego, ejecutar el controlador de clics. ¡Qué dolor!
Eso implica mucho trabajo extra.
Compara la diferencia en este ejemplo. TAB para controlar, y usa ENTER y SPACE para intentar hacer clic en ellos.
Si tienes botones div en tu sitio o aplicación existente, considera reemplazarlos por elementos button. button es fácil de diseñar y, además, ofrece muchas ventajas de accesibilidad.
Vínculos frente a botones
Otro antipatrón común es tratar los vínculos como botones al adjuntarles un comportamiento de JavaScript.
<a href="#" onclick="// perform some action">
Tanto los botones como los vínculos admiten alguna forma de activación de clics sintéticos. Entonces, ¿cuál deberías elegir?
- Si, cuando haces clic en el elemento, se realizará una acción en la página, usa
<button>. - Si el usuario hace clic en el elemento para navegar a una página nueva, usa
<a>. Esto incluye las aplicaciones web de una página que cargan contenido nuevo y actualizan la URL con la API de History.
Esto se debe a que los lectores de pantalla anuncian de manera diferente los botones y vínculos. Usar el elemento correcto ayuda a los usuarios de lectores de pantalla a saber qué resultado esperar.
PENDIENTE: DevSite: evaluación de Think and Check
Diseño
Algunos elementos integrados, en particular <input>, pueden ser difíciles de diseñar.
Con un poco de CSS inteligente, es posible que puedas eludir algunas de estas limitaciones. El proyecto WTFForms (con un nombre divertido) contiene una hoja de estilo de ejemplo que muestra una serie de técnicas para aplicar diseño a algunos de los elementos integrados más difíciles.
Próximos pasos
El uso de elementos HTML integrados puede mejorar en gran medida la accesibilidad de tu sitio y reducir significativamente tu carga de trabajo. Intenta navegar con tabulación por tu sitio y busca los controles que no sean compatibles con el teclado. Si es posible, cámbialas por alternativas de HTML estandarizadas.
En ocasiones, es posible que encuentres un elemento que no tiene un equivalente en HTML.
No te preocupes. Sigue leyendo para aprender a agregar compatibilidad con el teclado a los controles interactivos personalizados con tabindex.