Verifica que todos los controles personalizados tengan un role adecuado y cualquier atributo ARIA obligatorio que confiere sus propiedades y estado.
Por ejemplo, una casilla de verificación personalizada necesita un role="checkbox" y una aria-checked="true|false" para transmitir su estado de manera correcta.
Consulta la Introducción a ARIA para obtener una descripción general de cómo ARIA puede proporcionar semántica faltante para controles personalizados.
Cómo probarlo manualmente
Para verificar que todos los controles interactivos personalizados tengan los roles de ARIA adecuados, prueba la página con el panel de accesibilidad de las Herramientas para desarrolladores de Chrome 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, es posible aplicar ajustes de estilo a los elementos <div> y <button> para que transmitan las mismas posibilidades visuales, pero las dos experiencias son muy diferentes 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 de la <div>.
<button> se anuncia como un "botón", una señal mucho más fuerte 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 solución más simple y, a menudo, la mejor para este problema es evitar por completo los controles interactivos personalizados.
Por ejemplo, reemplaza un <div> que actúa como un botón por un <button> real.
Si debes mantener <div>, agrega role="button" y aria-pressed="false" a <div>.
Ahora, los lectores de pantalla anunciarán la función y el estado interactivo de <div>.
¿Por qué es importante?
La única forma de comprender realmente cómo los usuarios de tecnología de accesibilidad experimentan tu contenido es verificarlo por tu cuenta con un lector de pantalla. Usar un lector de pantalla de primera mano te permitirá comprender claramente cómo está etiquetado tu contenido y si hay alguna obstrucción en la navegación con tecnología asistencial. Si desconoces la manera en que la tecnología de accesibilidad interpreta el lenguaje de marcado semántico, consulta Introducción a la semántica para repasar.
Consulta también Cómo realizar una revisión de accesibilidad.
Recursos
Código fuente para los controles personalizados tienen roles de ARIA auditoría