Los elementos interactivos, como vínculos y botones, deben indicar su estado y 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 probar manualmente el enfoque visual
Para probar el enfoque visual de forma manual, TAB a través de tu página.
- ¿Puedes usar Tab para cada elemento interactivo?
- Cuando llegas a un elemento interactivo, ¿hay alguna pista visual de que los usuarios pueden interactuar con él?
- ¿La apariencia de cada elemento interactivo cambia cuando los seleccionas?
Hay muchas formas de definir el estilo de los indicadores de enfoque para cada elemento interactivo.
Una forma segura es usar :focus.
La seudoclase :focus te permite aplicar un estilo uniforme a un elemento.
Ese estilo se aplica cada vez que se enfoca el elemento, sin importar el dispositivo de entrada o el método que se use para enfocarlo.
Obtén más información en Enfoque de estilo.
Cómo realizar pruebas manuales con un lector de pantalla
Con un lector de pantalla, navega por la página y verifica que este pueda anunciar el nombre de cada control interactivo, su función y el estado interactivo actual. Si la función de un elemento no es clara y el estado del elemento no es claro, 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 asistencia 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 información sobre cómo mejorar las etiquetas y alternativas de texto.
¿Por qué es importante?
Proporcionar pistas visuales sobre lo que hará un control ayuda a las personas a operar y navegar por tu sitio. Estas sugerencias se llaman indicaciones. Proporcionar las condiciones permite que los usuarios utilicen tu sitio en una amplia variedad de dispositivos.
Recursos
El código fuente de los elementos interactivos indican su propósito y su auditoría de estado