Skip to content

Roles ARIA explicados

Hoja de referencia de los valores de rol ARIA: roles de puntos de referencia, de documento, de widget y de región activa, con su propósito y casos de uso.

Los roles ARIA declaran lo que hace un elemento. Los roles de puntos de referencia delimitan las regiones de la página. Los roles de documento estructuran el contenido. Los roles de widget marcan controles interactivos. Los roles de región activa anuncian actualizaciones dinámicas.

Tabla de referencia · 77 entradas
77 of 77 rows
Puntos de referencia
Identifica la cabecera del sitio en la parte superior de la página.Logotipo de la marca, lema principal, cabecera de la página.
Agrupa una colección de enlaces de navegación.Menús principales, migas de pan, navegación dentro de la página.
Delimita el contenido dominante del documento.El cuerpo principal único de la página.
Delimita contenido de apoyo separado del principal.Barras laterales, enlaces relacionados, destacados.
Agrupa los metadatos del pie sobre el documento padre.Líneas de copyright, enlaces de privacidad, pie legal.
Delimita una región que contiene un formulario de búsqueda.Búsqueda del sitio, formularios de filtro, cajas de búsqueda.
Delimita una sección nombrada y perceptible de la página.Secciones personalizadas con un nombre accesible.
Delimita una región que contiene un conjunto de campos de formulario.Formularios de búsqueda con nombre, paneles de filtro, secciones de encuesta.
Delimita una región que se comporta como una aplicación de software.Editores de página completa, mapas, superficies de juego.
Documento
Delimita una composición autónoma.Entradas de blog, noticias, tarjetas de producto.
Marca un encabezado para una sección de contenido.Títulos de sección cuando los h1-h6 nativos no aplican.
Agrupa una lista de elementos relacionados.Listas personalizadas con viñetas o numeradas.
Marca un único elemento dentro de una lista.Una fila de una lista personalizada.
Agrupa un conjunto de controles de formulario relacionados.Conjuntos de campos, grupos de radios, entradas relacionadas.
Delimita contenido gráfico acompañado de un pie.Imágenes, diagramas, gráficos con etiqueta.
Delimita datos dispuestos en filas y columnas.Datos tabulares construidos con elementos personalizados.
Marca una etiqueta visible para una tabla, cuadrícula o figura.Títulos sobre tablas de datos, etiquetas de figuras.
Agrupa un conjunto de filas relacionadas en una tabla.Bandas de cabecera, cuerpo y pie de una tabla.
Marca una línea de celdas en una tabla o cuadrícula.Una línea de registro de una tabla personalizada.
Marca una celda de encabezado para una columna de la tabla.Etiquetas superiores de una tabla de datos.
Marca una celda de encabezado para una fila de la tabla.La etiqueta inicial de cada fila de la tabla.
Marca una celda de datos dentro de una fila.Valores individuales de una fila de tabla personalizada.
Marca una palabra o frase que se está definiendo.Claves de diccionario, términos de listas de definiciones.
Marca el significado del término precedente.La descripción bajo un término definido.
Marca un comentario situado junto al contenido principal.Consejos, apartes, notas al pie.
Marca una lista de referencias a miembros de un grupo.Tablas de contenido e índices de enlaces (obsoleto en ARIA 1.2).
Delimita una lista desplazable de secciones de artículo.Flujos de desplazamiento infinito que cargan más contenido.
Delimita contenido escrito en notación matemática.Fórmulas generadas desde LaTeX o MathML.
Delimita un valor escalar dentro de un rango conocido.Barras de uso de disco, puntuaciones, indicadores de fuerza.
Marca un momento específico o una duración.Marcas de tiempo, fechas de eventos, tiempos transcurridos.
Delimita un bloque de texto en prosa.Bloques de texto no escritos como elementos p nativos.
Delimita una cita tomada de otra fuente.Citas destacadas y extractos citados.
Delimita un fragmento de código informático.Fragmentos en línea y nombres de comandos en prosa.
Marca texto que lleva énfasis de pronunciación.Palabras acentuadas dentro de una frase.
Marca texto con gran importancia.Avisos, frases clave, etiquetas de lectura obligatoria.
Marca texto renderizado por debajo de la línea base.Fórmulas químicas como H2O.
Marca texto renderizado por encima de la línea base.Marcadores de notas al pie y exponentes.
Marca un contenedor simple sin significado especial.Envoltorios de maquetación y ganchos de estilo.
Elimina la semántica de un elemento.Imágenes decorativas, tablas de maquetación, elementos divisores.
Marca un elemento como una única imagen.Sprites de iconos, grupos SVG, gráficos dibujados con CSS.
Widget
Marca un control pulsable que dispara una acción.Botones personalizados, botones de icono, disparadores de acción.
Marca un enlace a otro recurso o ubicación.Anclas personalizadas y enlaces de rutas en la aplicación.
Marca un conmutador para una única opción.Casillas personalizadas, interruptores de aceptación de términos.
Marca una opción en un grupo de exclusión mutua.Radios personalizadas dentro de un radiogroup.
Marca un conmutador binario de encendido/apagado.Interruptores de tema, silencio y configuración.
Agrupa las etiquetas de un conjunto de pestañas.La franja de pestañas de un panel con pestañas.
Marca una etiqueta dentro de un tablist.Una pestaña que muestra un panel.
Delimita el panel de contenido de una pestaña.El cuerpo mostrado cuando su pestaña está activa.
Delimita una ventana superpuesta sobre la página.Modales, cajones, popovers que capturan el foco.
Delimita un diálogo que exige respuesta del usuario.Confirmar eliminación, avisos de cambios sin guardar.
Marca una entrada con una ventana emergente de opciones.Autocompletado, búsqueda con selección, listas typeahead.
Marca un control que fija un valor en un rango.Volumen, precio, opacidad, entradas de rango.
Marca una lista de opciones ofrecidas al usuario.Menús desplegables, menús contextuales, paletas de herramientas.
Marca una única opción dentro de un menú.Una fila o elemento de un menú desplegable.
Marca un campo para entrada de texto libre.Entradas personalizadas, campos de búsqueda, cajas de comentarios.
Delimita una lista jerárquica de elementos.Exploradores de archivos, menús anidados, organigramas.
Delimita una lista de opciones seleccionables.Selectores personalizados para una o muchas opciones.
Marca una única opción dentro de un listbox.Una entrada seleccionable de un listbox personalizado.
Agrupa un conjunto de opciones de exclusión mutua.Conjuntos de radios, selectores de plan, respuestas de escala.
Marca un widget de filas y columnas de celdas.Maquetaciones de hoja de cálculo, vistas de mes de calendario.
Marca una cuadrícula cuyas filas se expanden y contraen.Tablas de datos anidados, tablas de hilos de correo.
Marca una opción expandible dentro de un árbol.Un nodo de archivo o carpeta en un explorador.
Marca una ventana emergente que insinúa un control.Sugerencias al pasar el ratón, consejos de foco para botones de icono.
Marca un elemento que muestra el progreso de una tarea.Barras de subida e indicadores de carga.
Marca un control que desplaza una vista de contenido.Asas de desplazamiento para paneles y carruseles.
Marca un control que cambia un valor en pasos.Selectores de cantidad, contadores numéricos.
Marca un campo de texto para introducir términos de búsqueda.Barras de búsqueda y campos de filtro personalizados.
Marca un grupo de controles de uso frecuente.Barras de formato, filas de acciones sobre editores.
Marca una fila de disparadores de menú persistentes.Franjas de menú Archivo y Edición estilo aplicación.
Marca una opción de menú que se activa o desactiva.Conmutadores de opciones de vista dentro de un menú desplegable.
Marca una opción exclusiva dentro de un menú.Elecciones de orden y tema en un menú.
Marca un divisor entre grupos de contenido.Divisores de menú, separadores arrastrables de paneles.
Región activa
Anuncia un mensaje importante y sensible al tiempo.Errores de formulario, avisos urgentes que requieren atención.
Anuncia una actualización informativa sin interrumpir.Confirmación de guardado, progreso, resultados suaves.
Anuncia nuevas entradas en un flujo cronológico.Transcripciones de chat, registros de eventos, fuentes de actividad.
Anuncia contenido de texto en movimiento o desplazamiento.Tickers, barras de noticias desplazables, banners rotativos.
Anuncia un temporizador o cuenta atrás en vivo.Tiempos de espera de sesión, cuentas atrás, cronómetros.