Asociaciones únicas de etiquetas
Silktide comprueba las etiquetas de formulario que nombran su campo usando un ID y avisa de las etiquetas que comparten el mismo ID con otra etiqueta. Cada campo debe tener exactamente una etiqueta que apunte a él, para que siempre se anuncie de la misma manera.
En , un <label> se vincula con su campo de formulario estableciendo el atributo for de la etiqueta al id del campo. Cuando dos o más etiquetas usan el mismo valor for, todas señalan al mismo campo, normalmente porque se copió y pegó un formulario y los ID no se actualizaron.
<!-- Problema: ambas etiquetas apuntan a id=\"name\" -->
<label for=\"name\">Tu nombre</label>
<input id=\"name\">
<label for=\"name\">Nombre de la empresa</label>
<input id=\"company\">
Por qué es importante
La tiene que elegir qué etiqueta anunciar para el campo, y distintos eligen de forma diferente: algunos leen la primera, otros leen ambas. Mientras tanto, el campo para el que estaba pensada la segunda etiqueta se queda sin etiqueta, por lo que se anuncia como un campo sin nombre. Hacer clic en una etiqueta también sitúa el foco en su campo, de modo que un visitante que haga clic en "Nombre de la empresa" puede encontrarse escribiendo en la casilla equivocada.
Cómo solucionarlo
- Asigna a cada campo del formulario un
idúnico. - Haz que el atributo
forde cada etiqueta apunte al ID del único campo que describe:
<!-- Corregido: cada etiqueta apunta a su propio campo -->
<label for=\"name\">Tu nombre</label>
<input id=\"name\">
<label for=\"company\">Nombre de la empresa</label>
<input id=\"company\">
- Si varios fragmentos de texto describen realmente un mismo campo, conserva un único
<label>y vincula el texto adicional conaria-describedbyen lugar de usar una segunda etiqueta.
Cómo lo comprueba Silktide
- Encuentra en cada página todos los elementos
<label>con atributofor. - Agrupa las etiquetas por su valor de
for. - Donde dos o más etiquetas compartan el mismo valor, informa de cada etiqueta del grupo.
Solución de problemas
Las etiquetas están en formularios distintos
Los ID deben ser únicos en toda la página, no solo dentro de un formulario. Dos formularios que contengan cada uno <label for=\"email\"> en la misma página siguen entrando en conflicto; cambia los ID para que difieran, por ejemplo signup-email y newsletter-email.