0Pricing
Frontend Academy · Lección

Roles y atributos ARIA

Aplique roles de referencia, regiones dinámicas y atributos aria-* para mejorar los componentes cuando el HTML nativo no sea suficiente.

Roles y atributos ARIA es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué es ARIA?

ARIA (Accessible Rich Internet Applications) es un conjunto de atributos HTML que describen el rol, el estado y las propiedades de los elementos para las tecnologías de asistencia. Es el puente para los widgets personalizados que no se pueden expresar con HTML nativo.

Primera regla de ARIA: no utilice ARIA

Si un elemento nativo hace lo que necesita, utilícelo. <button> es preferible a <div role="button">. Utilizar ARIA de forma incorrecta es peor que no utilizarla: hace que algo parezca accesible, pero deja a los usuarios sin salida.

Categorías de atributos ARIA

Hay tres categorías: roles (qué es algo), propiedades (relativamente estáticas: aria-label, aria-describedby) y estados (dinámicos: aria-expanded, aria-pressed, aria-checked).

Roles landmark

Identifican las regiones principales de la página. La mayoría tiene equivalentes en HTML5, que debe priorizar.

<!-- HTML5 (preferred): -->
<nav>...</nav>
<main>...</main>
<aside>...</aside>

<!-- ARIA equivalents (use only when HTML5 won't work): -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="complementary">...</div>

aria-label y aria-labelledby

aria-label: proporciona un nombre accesible mediante una cadena de texto. aria-labelledby: utiliza como nombre el texto de referencia de otro elemento. Úselos cuando no haya texto visible o este sea insuficiente.

<!-- Icon-only button needs a label: -->
<button aria-label="Close dialog">
  <svg>...</svg>
</button>

<!-- Section labelled by its heading: -->
<section aria-labelledby="settings-title">
  <h2 id="settings-title">Settings</h2>
  ...
</section>

aria-describedby para indicaciones

aria-describedby vincula un elemento con una descripción más larga. Es útil para indicaciones de formularios, mensajes de error y tooltips.

<label for="password">Password</label>
<input id="password" type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 12 characters with a number and symbol.</p>

aria-expanded para contenido desplegable

Los botones que alternan la visibilidad de un panel deben exponer aria-expanded = true/false.

<button aria-expanded="false" aria-controls="faq-1" onclick="toggle()">
  How do I cancel?
</button>
<div id="faq-1" hidden>
  Visit Settings &gt; Billing to cancel.
</div>

aria-pressed para botones de alternancia

Los botones con estado activado/desactivado (silenciar, negrita) utilizan aria-pressed.

<button aria-pressed="true" onclick="toggleBold()">
  Bold
</button>

Regiones dinámicas: aria-live

El contenido que se actualiza dinámicamente (notificaciones, resultados de búsqueda, resúmenes de errores) debe estar en una región dinámica para que los lectores de pantalla anuncien los cambios. polite espera una pausa; assertive interrumpe.

<!-- Toast container -->
<div aria-live="polite" aria-atomic="true" id="toast-region"></div>

<!-- Critical alert -->
<div role="alert">Session expired. Please log in again.</div>

role="alert" como abreviatura

role="alert" es la forma abreviada de una región dinámica asertiva con aria-atomic. Utilícelo con moderación: cada alerta interrumpe al usuario.

aria-hidden para contenido decorativo

aria-hidden="true" elimina un elemento del árbol de accesibilidad. Utilícelo en iconos decorativos situados junto a etiquetas de texto; de lo contrario, los lectores de pantalla los anunciarán de forma redundante.

<button>
  <svg aria-hidden="true" focusable="false">...</svg>
  Save
</button>

Pruebe con un lector de pantalla

La única forma de saber si ARIA funciona es probarla. VoiceOver (macOS/iOS, gratuito), NVDA (Windows, gratuito), TalkBack (Android, gratuito). Diez minutos con VoiceOver revelan más que cualquier herramienta de auditoría.

Comprobación rápida

¿Qué atributo ARIA debe establecer en un botón que solo contiene un icono y no tiene una etiqueta de texto visible?

Resumen: ARIA

ARIA describe el rol, las propiedades y el estado para las tecnologías de asistencia. Priorice el HTML nativo antes de recurrir a ARIA. aria-label/aria-labelledby proporcionan nombres accesibles. aria-describedby sirve para indicaciones. aria-expanded/aria-pressed sirven para alternancias. aria-live sirve para anuncios dinámicos. aria-hidden sirve para el contenido decorativo. Pruebe siempre con un lector de pantalla real.

Preguntas frecuentes

¿La lección «Roles y atributos ARIA» es gratis?

Sí — el texto completo de «Roles y atributos ARIA» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Roles y atributos ARIA»?

Aplique roles de referencia, regiones dinámicas y atributos aria-* para mejorar los componentes cuando el HTML nativo no sea suficiente. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Roles y atributos ARIA»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Niveles WCAG A AA AAA
  2. HTML semántico como base
  3. Roles y atributos ARIA
  4. Navegación con teclado y gestión del foco
← Volver a Frontend Academy