Haz tus componentes accesibles: nombre, función y valor
¿Estás usando elementos personalizados o sliders en tu web? Asegúrate de que son accesibles, que se pueda leer su nombre, su función y su valor. Aquí te explicamos cómo hacerlo bien según el criterio 4.1.2 de las WCAG.
Cuando desarrollas componentes de interfaz en una web, es fundamental que estos sean accesibles para todas las personas, incluidas aquellas que utilizan tecnologías de apoyo como lectores de pantalla, magnificadores o programas de reconocimiento de voz. Para ello, uno de los criterios más relevantes es el criterio 4.1.2 de las WCAG: “Nombre, función y valor”.
Este criterio forma parte del nivel A de conformidad y es obligatorio para lograr una accesibilidad básica.
¿Por qué deberías aplicar este criterio?
El criterio 4.1.2 busca que todos los elementos del UI proporcionen tres cosas:
- Un nombre que pueda ser leído.
- Una función clara.
- Un estado o valor.
Esto permite que las tecnologías de asistencia interpreten y controlen correctamente los componentes, garantizando una navegación fluida y accesible para todos los usuarios.
Si estás usando componentes estándar de HTML y los utilizas según su especificación, este criterio ya se cumple automáticamente.
El reto aparece cuando se usan componentes HTML para una función distinta a la original, por ejemplo si usas un < div > con una función de enlace, usando el eventListener onClick para cargar una nueva página o usas una imagen como botón para pasar a la siguiente diapositiva de un slider.
5 consejos clave para cumplir el criterio 4.1.2
A continuación, te damos algunas recomendaciones prácticas para asegurarte de que tus elementos de interfaz cumplen con este criterio:
1. Usa roles ARIA para definir la función del componente
Cuando crees componentes personalizados, utiliza el atributo role de ARIA para definir su función.
Fíjate que el elemento del ejemplo le hemos puesto el atributo tabindex="0". Esto es por que así lo añadimos a la lista de elementos interactivos y que puedan recibir el foco. Te explicamos más sobre esto en el punto 5.
Ejemplo:
< div role="button" tabindex="0" >Enviar
Con esto, ayudas técnicas como los lectores de pantalla sabrán que ese < div > se comporta como un botón y así lo trata.
2. Proporciona nombres accesibles con aria-labelledby
Si el componente no tiene una etiqueta visible o necesita combinar varias etiquetas para formar un nombre, usa aria-labelledby.
Ejemplo:
< p >Selecciona la < span id="label1" >duración del viaje< /span >< /p >
< div role="slider" aria-labelledby="label1" tabindex="0" >< /div >
Esto permite que el lector de pantalla anuncie correctamente el propósito del control.
3. Usa atributos ARIA para exponer el estado o valor del componente
Para componentes como botones de alternancia, sliders o listas desplegables, informa a las ayudas técnicas del estado actual mediante atributos ARIA como aria-pressed, aria-expanded o aria-valuenow.
Ejemplo: botón de mute:
< div role="button" aria-pressed="false" tabindex="0" >Mute< /div >
Cuando el usuario lo activa, el atributo se debe actualizar dinámicamente a aria-pressed="true" para reflejar el nuevo estado. Ver el siguiente punto.
4. Asegura que los cambios de estado se reflejen en el elemento
Cuando el usuario interactúa con un componente y cambia su estado o valor, el sistema debe notificarlo a las tecnologías de asistencia. Esto implica actualizar los atributos ARIA dinámicamente con JavaScript.
Ejemplo en JavaScript:
function toggleButtonState(button) {
var isPressed = button.getAttribute('aria-pressed') === 'true';
button.setAttribute('aria-pressed', isPressed ? 'false' : 'true');
}
5. No te olvides del foco
Un aspecto clave para la accesibilidad es que el estado de foco de cada componente pueda ser detectado por las ayudas técnicas. Asegúrate de usar tabindex="0" para hacer de estos componentes accesibles mediante el teclado y de que así el foco se maneje adecuadamente.
Si quieres saber más Name, Role, Value (Level A)
Lo que debes recordar
- Nombre, función y valor accesibles = interfaz accesible.
- Usa HTML semántico siempre que sea posible.
- Si creas controles personalizados, apóyate en los roles y atributos ARIA.
- Asegúrate de que el foco, el estado y los cambios sean detectables por las tecnologías de asistencia.
- Haz pruebas con lectores de pantalla y navega con el teclado.
Implementar el criterio 4.1.2 no solo mejora la accesibilidad de tu sitio, sino que también garantiza una experiencia inclusiva para todas las personas, independientemente de sus capacidades.
¿Tienes dudas sobre cómo aplicar este criterio en tus propios componentes? En accedeMe te ayudamos a hacerlo más fácil.
¡La accesibilidad empieza en el código!
