Curso HTML 11.3 Formularios accesibles (label, fieldset, legend)

11.3 Formularios accesibles: label, fieldset y legend

La accesibilidad en los formularios garantiza que personas con discapacidad visual, cognitiva o motriz puedan comprender, navegar e interactuar con los controles de entrada. Los elementos <label>, <fieldset> y <legend> proporcionan la semántica necesaria para que los distintos agentes de usuario –especialmente lectores de pantalla– identifiquen correctamente cada control y su función.

1. El elemento <label>

El <label> sirve para describir un control de formulario. Su uso adecuado asocia texto legible con el campo de entrada, facilitando el foco y la lectura por tecnologías asistivas.

Formas de asociación:

• Etiqueta explícita mediante for e id.
• Etiqueta implícita envolviendo el control.

1.1 Etiqueta explícita (recomendada)

  
  
    Correo electrónico:
  
  
    name='email' 
    required             
    aria-required='true' 
    placeholder='usuario@ejemplo.com'
  >

Comentarios:

• for='email' enlaza el texto “Correo electrónico:” con el input cuyo id='email'.
• Al hacer clic en el texto de la etiqueta, el campo recibe el foco automáticamente.
• required y aria-required='true' informan de la obligatoriedad a los usuarios de lectores de pantalla.

1.2 Etiqueta implícita

  
    Nombre completo:
    
  

Comentarios:

• El <label> envuelve al <input>, por lo que la asociación es automática y no hace falta for ni id.
• Útil para formularios simples, aunque para estilos CSS más complejos a veces se prefiere la asociación explícita.

1.3 Labels en controles específicos

• Radio buttons y checkboxes requieren label para cada opción.
• Usar agrupación con fieldset y legend para grupos de opciones relacionadas (ver sección 2).

  

    
Género
    Masculino
    

    Femenino
    
  

2. Agrupación de controles con <fieldset> y <legend>

Cuando un formulario contiene varios controles relacionados (por ejemplo, dirección, datos de contacto, métodos de pago), es recomendable agruparlos con <fieldset>. La primera etiqueta hija de un fieldset idealmente debe ser un <legend>, que actúa como título descriptivo del grupo.

2.1 Estructura básica

  

    
    
Información de contacto

    Teléfono:
    

    Dirección:
    
  

Ventajas:

• Semántica clara: el lector de pantalla anuncia el inicio de un nuevo grupo y su descripción.
• Mejora la organización visual y lógica del formulario.
• Posibilita estilos CSS consistentes (marco por defecto, aunque se puede restilar).

2.2 Agrupación avanzada y anidamiento

Se pueden anidar fieldset para subgrupos:

  

    
Datos personales

    Nombre:
    

    Apellidos:
    

    

      
Contacto de emergencia
      Nombre:
      

      Teléfono:
      
    

  

3. Buenas prácticas adicionales

• Cada input debe tener asociada una label o, en casos especiales, un atributo aria-label o aria-labelledby.
• Para ocultar visualmente una etiqueta pero mantenerla accesible, se usa habitualmente una clase con CSS (por ejemplo .sr-only), situando el texto fuera de la vista.
• Marcar campos obligatorios con un asterisco y, de ser posible, añadir aria-required='true' al control.
• Al mostrar mensajes de error, usar aria-describedby para enlazar el input con el texto de ayuda o error.
• Verificar siempre la navegación únicamente con teclado: Tab, Shift+Tab y navegación por grupos.

Implementando correctamente <label>, <fieldset> y <legend>, se mejora sustancialmente la usabilidad y accesibilidad, garantizando una experiencia inclusiva para todos los usuarios.