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>