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>