Evitare le etichette sui controlli non etichettabili

Silktide controlla le etichette dei moduli che fanno riferimento a un altro elemento tramite ID e segnala le etichette associate a elementi che non dovrebbero averne una: pulsanti, input simili a pulsanti ed elementi che non possono avere un'etichetta. Questi elementi hanno come nome il proprio testo o valore e un'etichetta separata crea nomi in conflitto.

In HTML, un elemento <label> assegna un nome a un campo del modulo tramite il suo attributo for. Tuttavia, alcuni controlli hanno già un proprio nome: il nome di un pulsante è il suo testo, mentre il nome di un input di invio è il suo value. Altri elementi, come un semplice <div> o un input nascosto, non possono essere etichettati in questo modo.

<!-- Problema: il pulsante contiene già "Save"; l'etichetta entra in conflitto con esso -->
<label for="save">Save</label>
<button id="save">Save</button>

Perché è importante

Quando un controllo ha due fonti per il proprio nome - il testo stesso e un'etichetta che vi fa riferimento - browser e screen reader diversi risolvono il conflitto in modi diversi. Il controllo potrebbe essere annunciato due volte, con il testo sbagliato oppure comportarsi in modo imprevisto quando si fa clic sull'etichetta. Rimuovere l'etichetta ridondante fa sì che ogni visitatore senta esattamente ciò che dice il controllo.

Come risolvere il problema

1. Per i pulsanti e gli input simili a pulsanti, rimuovi l'elemento <label> e affidati al testo o al value del controllo:

<!-- Corretto: il pulsante definisce autonomamente il proprio nome -->
<button id="save">Save</button>
<input type="submit" value="Submit">

2. Per un'etichetta associata a un input nascosto, rimuovi l'etichetta: i campi nascosti non vengono mai visualizzati né annunciati, quindi non hanno bisogno di un nome.
3. Se stavi assegnando un'etichetta a un elemento che non appartiene a un modulo, come un <div> che funge da controllo personalizzato, usa ARIA: assegna all'elemento aria-labelledby che faccia riferimento al testo che gli assegna un nome.

Come esegue i controlli Silktide

1. Trova ogni elemento <label> con un attributo for in ciascuna pagina.
2. Cerca l'elemento il cui id corrisponde. Le etichette che fanno riferimento a ID inesistenti vengono ignorate in questo controllo: sono segnalate invece da ID validi delle etichette.
3. Segnala l'etichetta quando il suo elemento di destinazione è uno dei seguenti:
   • un elemento <button>;
   • un <input> con tipo button, submit, reset, image o hidden;
   • qualsiasi elemento che non può avere un'etichetta, come un <div> o un'intestazione.
4. Le etichette associate a campi comuni - input di testo, <select>, <textarea> e simili - superano il controllo.

Per saperne di più

• Understanding Success Criterion 1.3.1: Info and Relationships (WCAG 2.2)
• Technique H44: Using label elements (WCAG)
• The label element (MDN)
• Etichette dei campi