Evita etiquetas en controles no etiquetables

Silktide comprueba las etiquetas de formulario que apuntan a otro elemento por su ID, e informa de las etiquetas dirigidas a elementos que no deben tenerla: botones, entradas con comportamiento de botón y elementos que no pueden llevar etiqueta en absoluto. Estos elementos se nombran por su propio texto o valor, y una etiqueta independiente crea nombres en conflicto.

En HTML, un <label> da nombre a un campo de formulario mediante su atributo for. Pero algunos controles ya llevan su propio nombre: el de un botón es su texto, y el de un input de envío es su value. Otros elementos, como un <div> simple o un input oculto, no pueden etiquetarse así en absoluto.

<!-- Problema: el botón ya dice "Guardar"; la etiqueta compite con él -->
<label for="save">Guardar</label>
<button id="save">Guardar</button>

Por qué es importante

Cuando un control tiene dos fuentes para su nombre —su propio texto y una etiqueta que apunta a él—, distintos navegadores y lectores de pantalla resuelven el conflicto de forma diferente. El control puede anunciarse dos veces, anunciarse con el texto equivocado o comportarse de forma inesperada al hacer clic en la etiqueta. Eliminar la etiqueta redundante hace que cada visitante oiga exactamente lo que dice el control.

Cómo solucionarlo

1. Para los botones y las entradas input de tipo botón, elimina el <label> y confía en el propio texto del control o en su value:

<!-- Corregido: el botón se nombra a sí mismo -->
<button id="save">Guardar</button>
<input type="submit" value="Enviar">

2. Si una etiqueta apunta a un input oculto, elimina la etiqueta: los campos ocultos nunca se muestran ni se anuncian, por lo que no necesitan nombre.
3. Si estabas etiquetando un elemento que no es de formulario, como un <div> que actúa como control personalizado, usa ARIA en su lugar: añade al elemento aria-labelledby apuntando al texto que lo nombra.

Cómo lo comprueba Silktide

1. Busca cada elemento <label> con un atributo for en cada página.
2. Localiza el elemento cuyo id coincida. Las etiquetas que apuntan a IDs que no existen se omiten aquí; en su lugar se informan en IDs de etiqueta válidos.
3. Informa de la etiqueta cuando su destino sea uno de:
   • un elemento <button>,
   • un <input> con type button, submit, reset, image o hidden,
   • cualquier elemento que no pueda llevar etiqueta, como un <div> o un encabezado.
4. Las etiquetas que apuntan a campos ordinarios —inputs de texto, <select>, <textarea> y similares— se consideran correctas.

Más información

• Comprender el Criterio de Conformidad 1.3.1: Información y relaciones (WCAG 2.2)
• Técnica H44: Uso de elementos label (WCAG)
• El elemento label (MDN)
• Etiquetas de campos