Verifica que todos los controles personalizados tengan un role adecuado y todos los atributos ARIA obligatorios que les otorguen sus propiedades y estado.
Por ejemplo, una casilla de verificación personalizada necesita un role="checkbox" y un aria-checked="true|false" para transmitir correctamente su estado.
Aprende a usar ARIA y HTML para comprender la mejor manera de proporcionar semánticas faltantes para los controles personalizados.
Cómo realizar la prueba
Para verificar que todos los controles interactivos personalizados tengan roles ARIA adecuados, prueba la página con el panel de accesibilidad de Chrome DevTools o un lector de pantalla.
JAWS y NVDA son dos de los lectores de pantalla más populares para Windows. VoiceOver es el lector de pantalla integrado en macOS.
Con CSS, puedes aplicar diseño a elementos <div> y <button> para transmitir las mismas indicaciones visuales, pero la experiencia es muy diferente cuando se usa un lector de pantalla. Un <div> es solo un elemento de agrupación genérico, por lo que un lector de pantalla solo anuncia el contenido de texto del <div>.
El <button> se anuncia como un "botón", una señal mucho más clara para el usuario de que es algo con lo que puede interactuar.
Consulta también Semántica y lectores de pantalla.
Cómo corregirlo
La mejor solución a este problema es evitar todos los controles interactivos personalizados. Por ejemplo, reemplaza un <div> que actúa como un botón
con un <button> real.
<button>Learn more</button>
Si debes usar un <div>, agrega role="button" y aria-pressed="false".
<div role="button" aria-pressed="false">Learn more</div>
Ahora, los lectores de pantalla anuncian el rol y el estado interactivo de <div>.
¿Por qué es importante?
Si nunca has usado la tecnología de accesibilidad, es posible que no sepas cuál es el rendimiento de tu contenido para los usuarios de esa tecnología. Lo ideal es que puedas hablar con usuarios que usan tecnología de accesibilidad con frecuencia y que puedan compartir comentarios sobre el rendimiento de tu sitio web o aplicación web.
Otra forma de comprender cómo los usuarios de tecnología de accesibilidad experimentan tu contenido es probar con tecnología de accesibilidad. El uso de un lector de pantalla te ayuda a comprender mejor cómo se etiqueta el contenido y si hay obstrucciones en la navegación.
Recursos
Puedes consultar el código fuente de la auditoría Los controles personalizados tienen roles de ARIA.