form-control-single-label
Los controles de formulario no deberían tener varias etiquetas
Comprueba que un control de formulario esté asociado con, como máximo, un <label> (por envoltura o mediante label[for]).
Ámbito de aplicación. Se aplica a los controles de formulario etiquetables (input, excluyendo hidden/submit/reset/button/image; select; textarea).
Resultado esperado. Como máximo un <label> que pueda contribuir al nombre accesible del control está asociado con él, según define HTML el control etiquetado: un <label for="..."> cuyo valor es el id del primer elemento con ese id en el propio árbol de la etiqueta, o un <label> envolvente sin for cuyo primer descendiente etiquetable es el control (una etiqueta que tanto envuelve como se autorreferencia mediante for cuenta una sola vez). Se califica según si las etiquetas sobrantes compiten por el nombre:
passcuando una anulación (aria-labelledby / aria-label) sustituye a todos los <label> nativos: en ese caso las etiquetas no contribuyen en nada al nombre, por lo que no pueden ser ambiguas. Un desajuste entre la etiqueta visible y el nombre es competencia del SC 2.5.3 Label in Name, no de esta regla.cantTellcuando dos o más etiquetas no vacías compiten y no hay anulación: los navegadores unen su texto, en el orden del DOM, en un solo nombre, y solo una persona puede saber si ese nombre unido sigue teniendo sentido ("Address Mailing address") o resulta ruido.cantTellcuando una etiqueta no vacía se une a alguna asociación de etiqueta vacía y no hay anulación: el nombre normalmente se resuelve en la etiqueta real, pero el manejo de la asociación vacía no está garantizado en todos los agentes de usuario.
Las asociaciones todas vacías sin anulación son un caso de nombre ausente (la regla hermana form-control-programmatic-label-present), no una ambigüedad, por lo que esta regla permanece en silencio.
Qué informa un hallazgo.
labelCount: cuántas etiquetas están asociadas con el control. En el caso de etiquetas en competencia, solo se cuentan las no vacías; en el caso de etiqueta vacía, también se cuentan las vacías.contributingLabelCount(el caso de etiqueta vacía): cuántas de esas etiquetas tienen texto y, por tanto, dan al control su nombre.
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<label>Name <input type="text"></label>
Una única etiqueta envolvente; solo se aplica un mecanismo de etiquetado.
<label for="address">Address</label><label for="address">Mailing address</label><input id="address" type="text">
Dos elementos label[for] separados apuntan ambos al mismo control. Los navegadores los unen en un solo nombre, "Address Mailing address", y solo una persona puede saber si sigue leyéndose bien.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
FORM_FIELD_EXTRA_EMPTY_LABEL
- Localizar el campo que indica el informe y anotar su etiqueta con texto y la etiqueta vacía que también apunta a él.
- Abrir el panel Accesibilidad de las herramientas para desarrolladores del navegador y comprobar que el nombre del campo es el texto de la etiqueta real.
- Con un lector de pantalla, llegar al campo con Tab y escuchar el nombre.
Se cumple. El nombre del campo es el texto de la etiqueta real, y la vacía no hace perder nada.
No se cumple. El campo no recibe ningún nombre, o recibe uno incompleto, por la etiqueta vacía, lo que incumple WCAG 3.3.2 (y 4.1.2).
FORM_FIELD_MULTIPLE_LABELS
- Localizar el campo que indica el informe y anotar el texto de cada etiqueta que apunta a él.
- Abrir el panel Accesibilidad de las herramientas para desarrolladores del navegador y leer el nombre accesible del campo, que une todas las etiquetas.
- Con un lector de pantalla, llegar al campo con Tab y escuchar el nombre.
- Decidir si el nombre unido sigue diciendo con claridad qué hay que introducir.
Se cumple. El nombre unido es claro: las etiquetas se repiten entre sí o la adicional es solo un indicador como «obligatorio».
No se cumple. El nombre unido es confuso o engañoso, como dos etiquetas sin relación encadenadas, lo que incumple WCAG 3.3.2 (y puede incumplir 2.5.3 y 4.1.2).