Etiqueta legend en HTML: título accesible de un grupo
La etiqueta <legend> en HTML proporciona el título de un grupo <fieldset>. Úsala para explicar qué tienen en común varios controles: una sección de contacto o una pregunta con varias respuestas posibles. El estándar también contempla <legend> para identificar un <optgroup> en selectores personalizables compatibles.
<fieldset>
<legend>Datos de contacto</legend>
<label for="correo">Correo</label>
<input id="correo" name="correo" type="email">
</fieldset>«Datos de contacto» identifica el conjunto; «Correo» identifica el campo. El navegador suele colocar la leyenda sobre el borde del grupo. Para probar este fragmento, puedes sustituir el <form> del documento completo de abajo por este <fieldset> y abrir el archivo localmente.
Sintaxis y contexto válido
Escribe <legend> y </legend>: ambas etiquetas son necesarias. En el patrón principal, coloca una única leyenda como primer elemento hijo directo de <fieldset>, antes de los campos y sin un <div> intermedio.
Admite contenido de frase, como texto, <span> o <strong>, y también encabezados como <h2>. Si incluyes un encabezado, elige su nivel según la estructura de la página; una leyenda de texto no se convierte por sí sola en un encabezado. No admite contenedores arbitrarios como párrafos o listas. El HTML Living Standard define estos contextos y restricciones.
Legend frente a label
La pregunta compartida va en <legend>; cada respuesta conserva su <label>. En «¿Cómo asistirás?», la leyenda explica el propósito del grupo y las etiquetas «En línea» y «Presencial» nombran los radios concretos.
¿Legend lleva for? No. Su relación proviene de ser hija del grupo permitido. El atributo for de <label> sí relaciona una etiqueta individual con el id de un control. Consulta la guía de <label> para esas asociaciones.
Tampoco equivale a <caption>, que titula una tabla, ni reemplaza un encabezado de página. Para los controles relacionados, utiliza un <fieldset> con su leyenda; para un título decorativo fuera de ese contexto, elige el elemento que corresponda al contenido.
Ejemplo práctico: dos preguntas independientes
Guarda este documento como preferencias.html en UTF-8 y ábrelo en el navegador. Incluye todo lo necesario: no requiere CSS, JavaScript, recursos adicionales ni servidor. Es una demostración local de selección; no hay botón de envío y no se guardan las respuestas.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Preferencias para un taller</title>
</head>
<body>
<h1>Preferencias para un taller</h1>
<p>Elige una modalidad y un horario.</p>
<form>
<fieldset>
<legend>¿Cómo asistirás?</legend>
<p>
<input id="legend-online" type="radio" name="modalidad"
value="online" checked>
<label for="legend-online">En línea</label>
</p>
<p>
<input id="legend-presencial" type="radio" name="modalidad"
value="presencial">
<label for="legend-presencial">Presencial</label>
</p>
</fieldset>
<fieldset>
<legend>¿Qué horario prefieres?</legend>
<p>
<input id="legend-manana" type="radio" name="horario"
value="manana" checked>
<label for="legend-manana">Horario de mañana</label>
</p>
<p>
<input id="legend-tarde" type="radio" name="horario"
value="tarde">
<label for="legend-tarde">Horario de tarde</label>
</p>
</fieldset>
<p><button type="reset">Restablecer preferencias</button></p>
</form>
</body>
</html>Verás dos grupos con preguntas distintas. Inicialmente están seleccionados «En línea» y «Horario de mañana». Los radios de modalidad comparten name="modalidad"; los de horario comparten name="horario". Esos nombres producen la selección exclusiva dentro de cada conjunto. <legend> aporta el título, pero no determina qué radios se excluyen.
- Pulsa Tab para entrar en el primer grupo. Usa las flechas para elegir «Presencial» y comprueba que el horario siga seleccionado.
- Pulsa Tab para pasar al segundo grupo y elige «Horario de tarde» con las flechas. Debe mantenerse la modalidad elegida. Shift+Tab permite volver al grupo anterior; Espacio selecciona un radio que tenga el foco.
- Activa «Restablecer preferencias» con el teclado: vuelven las dos selecciones iniciales. Repite con JavaScript desactivado; todo el ejemplo conserva su funcionamiento nativo.
- Con tu lector de pantalla, recorre ambos grupos y comprueba que puedas distinguir la pregunta del nombre de cada opción. El anuncio exacto y la frecuencia con que se repite la leyenda varían según el navegador, el lector y su configuración.
Cambia la primera pregunta por «Modalidad del taller»: cambia el título del grupo, mientras las opciones y la selección siguen funcionando. Si retiras esa <legend>, sus radios conservan las etiquetas y la exclusión por name, pero el grupo pierde su título nativo. Si asignas el mismo name a los cuatro radios, competirán entre sí aunque estén en dos <fieldset> distintos.
Atributos, presentación y accesibilidad
<legend> no tiene atributos específicos vigentes; admite los globales, como id, class y lang. El antiguo align es obsoleto: utiliza CSS para la presentación. color y font-weight son propiedades CSS, no atributos HTML de esta etiqueta.
En JavaScript, leyenda.textContent permite cambiar su texto. La propiedad de solo lectura leyenda.form devuelve el formulario asociado a su <fieldset>, cuando existe; no equivale a un atributo form que debas escribir en <legend>. MDN recoge sus atributos y su interfaz DOM.
Mantén el título breve y las instrucciones largas fuera de la leyenda. Conserva etiquetas individuales comprensibles y no añadas roles redundantes al grupo. Cambiar el tamaño, el color o el borde no elimina la relación semántica. La orientación de WAI sobre agrupación de controles explica por qué la pregunta y las etiquetas deben seguir siendo útiles aunque el lector de pantalla anuncie la leyenda de otra manera.
¿Legend solo existe en fieldset?
Es su uso principal, pero el estándar vigente también permite <legend> como primer elemento hijo de un <optgroup>. En ese contexto identifica un grupo de opciones de un <select> personalizable; su texto tiene prioridad sobre el atributo label de <optgroup>.
Aquí solo admite contenido de frase: sin contenido interactivo ni descendientes con tabindex. La posibilidad de incluir encabezados dentro de una leyenda de <fieldset> no se extiende a este caso. MDN explica su uso en selectores personalizables.
Para un selector clásico, conserva <optgroup label="Nombre del grupo">. No dependas únicamente de la leyenda para navegadores que no admitan el nuevo contexto; si aplicas esa mejora, conserva también un label equivalente y comprueba el resultado en los navegadores de tu público.
Errores frecuentes y compatibilidad
Si el título no identifica correctamente el grupo, revisa su posición y su padre: una leyenda después de los campos, dentro de otro contenedor o suelta como encabezado decorativo no sigue el patrón válido. Repetir varias leyendas no crea varios títulos de grupo; divide las preguntas en grupos separados.
Consulta del 5 de octubre de 2026: MDN clasifica <legend> como ampliamente disponible para su uso tradicional. Eso no garantiza el nuevo contexto de <optgroup>.
Los selectores personalizables siguen teniendo disponibilidad limitada según MDN. Chrome publicó esta personalización desde la versión 135. Los datos de compatibilidad de appearance: base-select registran Chrome 135, Safari 27 y Firefox 149 con preferencias experimentales; el soporte de esa propiedad por sí solo no demuestra que todos los detalles de <legend> y <optgroup> funcionen igual. Verifica el contexto completo antes de utilizarlo.