aria-describedby para contexto adicional
Añada indicaciones y ayuda que se lean después del nombre.
aria-describedby para contexto adicional es una lección gratuita de Web Accessibility 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 Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Más allá del nombre
A veces un control necesita algo más que un nombre. aria-describedby añade contexto adicional que un lector de pantalla lee después del nombre.
Hace referencia a IDs
Al igual que labelledby, aria-describedby contiene el id de otro elemento. El navegador incorpora como descripción el texto de ese elemento.
<input aria-describedby="hint">
<p id="hint">Use 8+ characters</p>Primero el nombre, después la descripción
Un lector de pantalla pronuncia primero el nombre, hace una breve pausa y después lee la descripción. Este orden ayuda a los usuarios a comprender rápidamente el control.
Perfecto para las indicaciones
Las indicaciones de un campo, como las reglas de formato, deben estar en aria-describedby, para que la orientación se lea automáticamente cuando el campo recibe el foco.
<input aria-describedby="fmt">
<p id="fmt">Format: DD/MM/YYYY</p>No sustituye al nombre
La descripción es información adicional. Si un elemento solo tiene aria-describedby y no tiene nombre, sigue estando efectivamente sin etiquetar.
Combine varios IDs
Proporcione a aria-describedby varios ids separados por espacios y el navegador unirá sus textos, lo que resulta útil para combinar una indicación y un error.
<input aria-describedby="hint err">Los errores también son descripciones
Haga que aria-describedby apunte a un mensaje de validación para que el error se lea junto con el campo, en lugar de quedar aislado en otra parte de la página.
<input aria-describedby="err">
<p id="err">Email is required</p>Mantenga breves las descripciones
Una descripción debe ser una frase breve. El texto largo de aria-describedby se lee completo cada vez, lo que resulta tedioso rápidamente.
Permanece visible
A diferencia de una etiqueta oculta, la indicación referenciada normalmente permanece visible en pantalla y ayuda al mismo tiempo a los usuarios videntes.
La compatibilidad puede variar
La mayoría de los lectores de pantalla admite aria-describedby, pero algunos solo lo anuncian en determinados modos, así que pruebe la indicación con un lector real.
describedby frente a labelledby
Use aria-labelledby para indicar cómo se llama un control y aria-describedby para aportar información adicional sobre él. Cumplen funciones diferentes.
Comprobación rápida
Quiere que se lea una regla de contraseña después del nombre del campo. ¿Qué atributo es adecuado?
Repaso: añadir contexto
Ha aprendido que aria-describedby hace referencia a ids para leer indicaciones y errores después del nombre, complementándolo sin reemplazarlo nunca. 💬
Preguntas frecuentes
¿La lección «aria-describedby para contexto adicional» es gratis?
Sí — el texto completo de «aria-describedby para contexto adicional» 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 Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «aria-describedby para contexto adicional»?
Añada indicaciones y ayuda que se lean después del nombre. Practicas Web Accessibility 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 Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility 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 «aria-describedby para contexto adicional»?
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 Web Accessibility Academy?
Sí. Cada lección de Web Accessibility 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
- El cálculo del nombre accesible, explicado
- aria-label frente a aria-labelledby
- aria-describedby para contexto adicional
- Errores comunes de nomenclatura que silencian controles