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 jugando con tabindex
y más usuarios satisfechos.
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 manejarlos. 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
ENTER
oSPACE
para 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 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 haces clic en el elemento, se realizará una acción en la página, usa
<button>
. - Si el usuario hace clic en el elemento navega 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.
Esto se debe a 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 Think and Check
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 con tabulación por tu sitio y busca controles que no sean compatibles con el teclado. Si es posible, cámbialos por alternativas de HTML estandarizadas.
A veces, puedes encontrar un elemento que no tiene una contraparte en HTML.
No hay problema. Sigue leyendo para aprender a agregar compatibilidad con el teclado a los controles interactivos personalizados con tabindex
.