Etiquetas de campos
Silktide comprueba que todos los campos de formulario y botones de sus páginas tengan un nombre que el software pueda leer. Las personas que no pueden ver el formulario dependen de estos nombres para saber qué solicita cada campo.
Una persona que ve determina el significado de un campo a partir del texto cercano. Esta
asociación visual no tiene ningún significado en el código: el nombre debe estar asociado al
propio campo, normalmente con un elemento <label> en
.
<!-- Problema: el texto parece una etiqueta, pero no está asociado al campo -->
<p>Nombre completo</p>
<input type="text">
Por qué es importante
Un anuncia cada campo mediante su a medida que la persona recorre un formulario. Un campo sin nombre se anuncia simplemente como «editar texto»: la persona tiene que adivinar qué escribir a partir del contexto y, en un formulario largo, esto se vuelve imposible rápidamente. Los campos sin etiqueta son uno de los motivos más habituales por los que un formulario no se puede completar sin ver, lo que supone registros, pedidos y consultas perdidos.
Cómo solucionarlo
- Asocie un
<label>a cada campo, ya sea mediante un ID o envolviéndolo:
<!-- Asociado mediante ID -->
<label for="name">Nombre completo</label>
<input type="text" id="name">
<!-- O envolviendo el campo -->
<label>Nombre completo <input type="text"></label>
- Los botones se nombran a sí mismos mediante su texto o
value; no necesitan un elemento de etiqueta:
<button>Enviar mensaje</button>
<input type="submit" value="Enviar mensaje">
- Cuando una etiqueta visible no sea práctica, utilice un
atributo , como
aria-labeloaria-labelledby. Tenga en cuenta que esto solo ayuda a la : las personas que ven no lo verán.
No confíe en el texto de placeholder como etiqueta: desaparece en cuanto la
persona empieza a escribir y no se trata de forma coherente como un nombre.
Cómo lo comprueba Silktide
- Busca los controles de formulario en cada página: campos de entrada, áreas de texto, listas desplegables y
botones, además de elementos a los que se haya asignado un rol de control de formulario con ARIA (como
role="button"orole="checkbox"). - Omite los controles que no necesitan un nombre: campos de entrada ocultos, campos insertados por widgets de terceros conocidos (como servicios o los formularios ocultos que los scripts de seguimiento y traducción añaden para su propio uso) y elementos cuyo rol ARIA no requiere una etiqueta.
- Determina el nombre accesible de cada control a partir de su etiqueta, atributos ARIA, texto del botón o valor.
- Informa de cada control cuyo nombre accesible esté vacío.
Resolución de problemas
El campo tiene texto junto a él
El texto cercano no da nombre a un campo a menos que esté conectado mediante código: utilice un
<label> con un atributo for o incluya el campo dentro de la etiqueta.
El campo es decorativo o está gestionado por un complemento
Los campos insertados por widgets que no controla pueden ser difíciles de corregir directamente. Compruebe si el complemento ofrece una opción de accesibilidad o una actualización; si el campo realmente no afecta a las personas visitantes, puede el resultado.