Los elementos interactivos, como vínculos y botones, deben indicar su estado y poder distinguirse de los elementos no interactivos. Para verificar que los elementos interactivos indiquen su propósito y estado, usa una prueba visual y una de lector de pantalla.
Cómo realizar pruebas manuales
Debes probar los elementos interactivos de forma visual y con lectores de pantalla.
Cómo probar el enfoque visual
Para probar el enfoque visual de forma manual, presiona TAB en la página.
- ¿Puedes TAB cada elemento interactivo?
- Cuando llegas a un elemento interactivo, ¿hay una pista visual de que los usuarios puedan interactuar con él?
- ¿Cada elemento interactivo cambia de apariencia cuando lo seleccionas?
Existen muchas formas de aplicar diseño a los indicadores de enfoque de cada elemento interactivo.
Una forma es aplicar diseño a la pseudoclase :focus.
Ese estilo se aplica cada vez que se enfoca el elemento, independientemente del dispositivo de entrada o del método que se use para enfocarlo.
Obtén más información para diseñar el foco.
Cómo realizar pruebas con lectores de pantalla
Usa un lector de pantalla para navegar por la página y verifica que el lector de pantalla anuncie el nombre de cada control interactivo, la función de ese control y el estado interactivo actual. Si el rol de un elemento no está claro y el estado del elemento tampoco lo es, es posible que debas agregar los roles de ARIA adecuados.
Obtén más información en Los controles personalizados tienen roles de ARIA.
También es importante prestar mucha atención a cómo se etiquetan los elementos interactivos. Los usuarios de lectores de pantalla y otras tecnologías de accesibilidad dependen de las etiquetas para comprender el contexto de ese elemento. Las etiquetas vagas son comunes y no son útiles para navegar por el contenido. Obtén más información para mejorar las etiquetas y el texto alternativo.
¿Por qué es importante?
Proporcionar sugerencias visuales sobre la función de un control puede ayudar a los usuarios a operar y navegar por el sitio. Estas sugerencias se llaman affordances. Las asignaciones permiten que las personas usen tu sitio en una amplia variedad de dispositivos.
Recursos
El código fuente de los elementos interactivos indica su propósito y su estado de auditoría