ARIA y accesibilidad: label, role y aria-*
Asocie labels con controles, aplique roles ARIA cuando sea necesario y use aria-label y aria-describedby para ayudar a los lectores de pantalla.
ARIA y accesibilidad: label, role y aria-* es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 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.
¿Por qué ARIA?
ARIA (Accessible Rich Internet Applications) es un conjunto de atributos HTML que comunican el propósito, el estado y las propiedades de los componentes de la interfaz a tecnologías de asistencia como los lectores de pantalla, especialmente en widgets personalizados que no tienen un equivalente nativo en HTML.
La primera regla de ARIA
No use ARIA si un elemento o atributo HTML nativo puede hacer el trabajo. <button> siempre es mejor que <div role="button">. El HTML nativo proporciona accesibilidad de forma gratuita.
Roles de punto de referencia
Los roles de punto de referencia de ARIA permiten a los usuarios de lectores de pantalla saltar a distintas secciones de la página. La mayoría están implícitos en el HTML semántico: <main> → role=main, <nav> → role=navigation. Añada roles explícitos solo cuando no se use un elemento semántico.
<div role="main">...</div> <!-- prefer <main> -->
<div role="navigation">...</div> <!-- prefer <nav> -->
<div role="banner">...</div> <!-- prefer <header> at page level -->aria-label
aria-label proporciona un nombre accesible invisible para un elemento. Úselo cuando no haya una etiqueta de texto visible a la que hacer referencia. Es habitual en botones de icono.
<button aria-label="Close dialog">×</button>
<a href="/rss.xml" aria-label="Subscribe to RSS feed">
<img src="rss-icon.svg" alt="">
</a>aria-labelledby
aria-labelledby señala al texto de otro elemento como etiqueta mediante una referencia a un ID. Se prefiere a aria-label cuando ya existe una etiqueta visible.
<h2 id="billing-title">Billing Information</h2>
<form aria-labelledby="billing-title">
...
</form>aria-describedby
aria-describedby hace referencia a texto descriptivo adicional —como un mensaje de error o una indicación— que complementa la etiqueta. Los lectores de pantalla leen primero la etiqueta y después la descripción.
<input id="pass" type="password" aria-describedby="pass-hint">
<p id="pass-hint">Must be at least 12 characters with a symbol.</p>aria-expanded y aria-haspopup
Los widgets dinámicos necesitan atributos de estado. aria-expanded indica si un widget de revelación (acordeón o menú desplegable) está abierto o cerrado. Actualícelo en JavaScript cuando cambie el estado.
<button aria-expanded="false" aria-controls="menu" id="menu-btn">Menu</button>
<ul id="menu" hidden>...</ul>
<!-- On toggle: -->
btn.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');aria-hidden
aria-hidden="true" elimina un elemento y todos sus elementos secundarios del árbol de accesibilidad. Úselo en elementos decorativos, como iconos SVG que ya tienen una etiqueta proporcionada por texto visible.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save Draft
</button>Regiones dinámicas: aria-live
aria-live indica a los lectores de pantalla que anuncien los cambios de esta región. polite espera a que el usuario termine su acción actual. assertive interrumpe de inmediato (úselo con moderación).
<div aria-live="polite" aria-atomic="true">
<!-- Status messages announced when updated -->
Form saved successfully.
</div>role="alert"
role="alert" equivale implícitamente a aria-live=assertive. Inserte los mensajes de error o las notificaciones importantes en un elemento con este rol para que los lectores de pantalla los anuncien de inmediato.
const errorEl = document.querySelector('[role="alert"]');
errorEl.textContent = 'Email is required.'; // announced immediatelyErrores accesibles en formularios
Cuando un campo contiene un error: use aria-invalid="true", vincule el mensaje de error con aria-describedby y actualice el contenido de role="alert". Este enfoque de tres partes garantiza que los lectores de pantalla comuniquen toda la información necesaria.
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error" role="alert">Please enter a valid email address.</p>Comprobación rápida
¿Qué atributo de ARIA proporciona el nombre accesible de un elemento cuando no hay una etiqueta de texto visible?
Repaso: aspectos esenciales de ARIA
Prefiera el HTML nativo a ARIA. aria-label para botones de icono. aria-labelledby para hacer referencia a etiquetas visibles. aria-describedby para indicaciones y errores. aria-expanded para widgets de revelación. aria-hidden para contenido decorativo. aria-live para actualizaciones dinámicas de estado. aria-invalid + role=alert para errores de formulario.
Preguntas frecuentes
¿La lección «ARIA y accesibilidad: label, role y aria-*» es gratis?
Sí — el texto completo de «ARIA y accesibilidad: label, role y 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 «ARIA y accesibilidad: label, role y aria-*»?
Asocie labels con controles, aplique roles ARIA cuando sea necesario y use aria-label y aria-describedby para ayudar a los lectores de pantalla. 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 2 de 4.
¿Cuánto tiempo toma la lección «ARIA y accesibilidad: label, role y 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
- Controles de formulario: tipos de input, select y textarea
- ARIA y accesibilidad: label, role y aria-*
- HTML5 semántico: elementos semánticos frente a div soup
- Atributos de validación de formularios