Associazioni univoche delle etichette

Silktide controlla le etichette dei moduli che identificano il relativo campo tramite un ID e segnala le etichette che condividono lo stesso ID con un'altra etichetta. Ogni campo dovrebbe avere esattamente un'etichetta associata, in modo da essere sempre annunciato nello stesso modo.

In , un elemento <label> è collegato al proprio campo del modulo impostando l'attributo for dell'etichetta sull'id del campo. Quando due o più etichette usano lo stesso valore for, dichiarano tutte lo stesso campo, solitamente perché un modulo è stato copiato e incollato e gli ID non sono mai stati aggiornati.

<!-- Problema: entrambe le etichette puntano all'id="name" -->
<label for="name">Il tuo nome</label>
<input id="name">

<label for="name">Nome dell'azienda</label>
<input id="company">

Perché è importante

La deve scegliere quale etichetta annunciare per il campo e i diversi fanno scelte diverse: alcuni leggono la prima, altri le leggono entrambe. Nel frattempo, il campo a cui era destinata la seconda etichetta rimane senza etichetta, quindi viene annunciato come campo senza nome. Fare clic su un'etichetta mette inoltre a fuoco il relativo campo, quindi un visitatore che fa clic su "Nome dell'azienda" potrebbe ritrovarsi a digitare nella casella sbagliata.

Come risolvere il problema

Assegna a ogni campo del modulo un id univoco.
Fai puntare l'attributo for di ogni etichetta all'ID dell'unico campo che descrive:

<!-- Corretto: ogni etichetta punta al proprio campo -->
<label for="name">Il tuo nome</label>
<input id="name">

<label for="company">Nome dell'azienda</label>
<input id="company">

Se più parti di testo descrivono realmente un unico campo, mantieni un solo <label> e collega il testo aggiuntivo con aria-describedby invece di usare una seconda etichetta.

Come esegue il controllo Silktide

Trova ogni elemento <label> con un attributo for in ciascuna pagina.
Raggruppa le etichette in base al relativo valore for.
Quando due o più etichette condividono lo stesso valore, segnala ogni etichetta del gruppo.

Risoluzione dei problemi

Le etichette si trovano in moduli separati

Gli ID devono essere univoci nell'intera pagina, non solo all'interno di un singolo modulo. Due moduli che contengono ciascuno <label for="email"> nella stessa pagina continuano a creare un conflitto: rinomina gli ID in modo che siano diversi, ad esempio signup-email e newsletter-email.