Aria-label roles

Para que se usan los Aria-label roles

Esta es una tabla con algunos de los roles más comunes de las etiquetas aria-label y una breve explicación de para qué sirven:

Rol	Descripción
alert	Indica que hay una notificación importante o un mensaje de error para el usuario.
button	Indica que el elemento es un botón interactivo.
checkbox	Indica que el elemento es una casilla de verificación.
combobox	Indica que el elemento es un cuadro combinado, una lista desplegable que permite al usuario seleccionar una opción o ingresar un valor.
dialog	Indica que el elemento es un cuadro de diálogo o ventana emergente que contiene contenido adicional o solicita información al usuario.
grid	Indica que el elemento es una cuadrícula o tabla de datos.
link	Indica que el elemento es un enlace o hipervínculo.
listbox	Indica que el elemento es una lista desplegable de opciones para que el usuario seleccione una o más opciones.
menu	Indica que el elemento es un menú de navegación o un menú contextual.
progressbar	Indica que el elemento es una barra de progreso que muestra el avance de una tarea o proceso.
radio	Indica que el elemento es un botón de opción.
slider	Indica que el elemento es un control deslizante para seleccionar un valor dentro de un rango determinado.
tab	Indica que el elemento es una pestaña de una interfaz de pestañas, que permite al usuario cambiar entre diferentes secciones de contenido.
textbox	Indica que el elemento es un campo de texto de entrada para que el usuario ingrese texto.
tooltip	Indica que el elemento es un mensaje emergente o información adicional que se muestra al pasar el cursor sobre otro elemento.
tree	Indica que el elemento es una estructura jerárquica o un árbol que muestra una relación padre-hijo entre los elementos.
search	Indica que el elemento es un campo de búsqueda para que el usuario ingrese términos de búsqueda.
spinbutton	Indica que el elemento es un control de incremento y decremento, típicamente utilizado para ajustar un valor numérico.
status	Indica que el elemento es un área o barra de estado que proporciona información de estado o progreso al usuario.
switch	Indica que el elemento es un interruptor o control de encendido/apagado.
tabpanel	Indica que el elemento es un panel de contenido asociado a una pestaña.
textbox	Indica que el elemento es un campo de texto de entrada para que el usuario ingrese texto.

Algunos ejemplos de uso

 
Estos ejemplos muestran cómo se puede utilizar la etiqueta aria-label en combinación con los roles ARIA para proporcionar información adicional y mejorar la accesibilidad de los elementos en una página web. Recuerda que también es importante utilizar otros atributos ARIA relevantes y seguir las mejores prácticas de accesibilidad para garantizar una experiencia óptima para todos los usuarios.

Ejemplo de uso del rol alert:

<div role="alert" aria-label="Mensaje importante">
 ¡Atención! Hay un problema con tu solicitud.
</div>

Ejemplo de uso del rol button

<button type="button" role="button" aria-label="Cerrar">
 X
</button>

Conclusión

Como has visto, los aria-label y los distintos roles ARIA son fundamentales para mejorar la accesibilidad de una página web, permitiendo que todos los usuarios —incluidas personas que utilizan lectores de pantalla— puedan navegar e interactuar con los contenidos de forma más clara y efectiva.

Incorporar buenas prácticas de accesibilidad no solo mejora la experiencia de usuario, sino que también demuestra compromiso con un diseño web inclusivo y responsable.

Si no sabes por dónde empezar a implementar accesibilidad en tu web, agenda una reunión y te ofrezco una consultoría gratuita de 30 minutos para orientarte. Revisaremos tu sitio y te indicaré qué mejoras puedes aplicar para que sea más accesible y usable para todos.