Si usas los elementos HTML semánticos correctos, es posible que puedas satisfacer la mayoría o todas tus necesidades de acceso con el teclado. Esto significa menos tiempo para jugar con tabindex y más usuarios felices.
Compatibilidad con teclados de forma gratuita (y mejores experiencias en dispositivos móviles)
Hay varios elementos interactivos integrados con semántica y compatibilidad con el teclado adecuadas. Los que usan la mayoría de los desarrolladores son los siguientes:
Además, los elementos con el atributo contenteditable a veces se usan para la entrada de texto en formato libre.
Es fácil pasar por alto la compatibilidad con el teclado integrado 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 desplazarte entre los controles y las teclas de flecha, y teclas como ENTER y SPACE para manipular sus valores.
Si tienes un teléfono a mano, puedes ver que, a menudo, estos elementos integrados tienen interacciones únicas en dispositivos móviles. Intentar reproducir estas interacciones en dispositivos móviles por tu cuenta requiere mucho trabajo. Es otra buena razón para usar elementos integrados siempre que sea posible.
Usa button en lugar de div
Un antipatrón de accesibilidad común es tratar un elemento no interactivo, como un div o un span, como un botón agregándole un controlador de clics.
Sin embargo, para que se considere accesible, un botón debe cumplir con los siguientes requisitos:
- Permitir que se enfoque con el teclado
- Inhabilitación de la asistencia
- Compatibilidad con las teclas
ENTERoSPACEpara realizar una acción - Que un lector de pantalla los anuncie correctamente
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 brinda de forma gratuita.
Por ejemplo, los elementos button tienen un truco ingenioso llamado *activación de clics sintéticos*. Si agregas un controlador de "clics" 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 detectar el evento keydown, verificar que el código de tecla sea ENTER o SPACE y, luego, ejecutar el controlador de clics. ¡Qué dolor!
¡Eso es mucho trabajo extra!
Compara la diferencia en este ejemplo. TAB para controlarlos y usar ENTER y SPACE para intentar hacer clic en ellos.
Si tienes botones div en tu sitio o aplicación existentes, considera reemplazarlos por elementos button. button es fácil de diseñar y está lleno de mejoras de accesibilidad.
Vínculos en comparación con botones
Otro antipatrón común es tratar los vínculos como botones adjuntando un comportamiento de JavaScript.
<a href="#" onclick="// perform some action">
Tanto los botones como los vínculos admiten algún tipo de activación de clics sintéticos. Entonces, ¿cuál deberías elegir?
- Si hacer clic en el elemento realizará una acción en la página, usa
<button>. - Si hacer clic en el elemento navega al usuario a una página nueva, usa
<a>. Esto incluye las apps web de una sola página que cargan contenido nuevo y actualizan la URL con la API de History.
El motivo es que los lectores de pantalla anuncian los botones y los vínculos de manera diferente. El uso del elemento correcto ayuda a los usuarios de lectores de pantalla a saber qué resultado esperar.
TODO: DevSite: Evaluación de Piensa y verifica
Diseño
Algunos elementos integrados, en particular <input>, pueden ser difíciles de aplicarles diseño.
Con un poco de CSS inteligente, es posible que puedas evitar algunas de estas
limitaciones. El proyecto WTFForms (con un nombre muy gracioso) contiene un ejemplo de hoja de estilo que demuestra varias 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 por tu sitio con la tecla Tab y busca controles que no sean compatibles con el teclado. Si es posible, cámbialos por alternativas de HTML estandarizadas.
A veces, es posible que encuentres un elemento que no tiene una contraparte en HTML.
No hay problema. Sigue leyendo para aprender a agregar compatibilidad con el teclado a controles interactivos personalizados con tabindex.