0Pricing
HTML Academy · Lezione

L’elemento label e l’accessibilità

Associare le label agli input per supportare gli screen reader

L’elemento label e l’accessibilità è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Perché le label sono importanti

L'elemento <label> associa una descrizione testuale a un controllo del modulo:

  • I lettori di schermo annunciano la label quando l'input riceve il focus
  • Fare clic sulla label attiva l'input associato
  • Senza una label, gli utenti dei lettori di schermo non sanno a cosa serve un campo

Label esplicita con for

L'attributo for collega una label a un input tramite id:

<label for="email">Email address</label>
<input type="email" id="email" name="email">

<!-- for="email" matches id="email" -->
<!-- Clicking "Email address" moves focus to the input -->
<!-- Required for proper accessibility -->

Label implicita (con input incorporato)

Inserire l'input all'interno della label crea un'associazione implicita:

<!-- No for/id needed — input is inside label -->
<label>
  Email address
  <input type="email" name="email">
</label>

<!-- Works fine but explicit association is more robust
     (especially when label and input are far apart in the DOM) -->

Separare label e input

Quando label e input non possono essere adiacenti, usi aria-labelledby:

<h2 id="section-title">Billing Details</h2>
<input type="text" name="name" aria-labelledby="section-title">
<!-- The heading serves as the accessible label for the input -->

aria-label come alternativa

Quando non è possibile usare una label visibile, usi aria-label:

<!-- Search form with icon button -->
<form>
  <input type="search" name="q" aria-label="Search the site">
  <button type="submit" aria-label="Submit search">
    <svg><!-- magnifier icon --></svg>
  </button>
</form>

Una label per ogni input

Ogni input dovrebbe avere esattamente una label. Gli input multipli dovrebbero avere label separate:

<!-- BAD: one label for multiple inputs -->
<label>First and last name
  <input type="text" name="first">
  <input type="text" name="last">
</label>

<!-- GOOD: separate labels -->
<label for="first">First name</label>
<input type="text" id="first" name="first">

<label for="last">Last name</label>
<input type="text" id="last" name="last">

Indicazione dei campi obbligatori

Indichi accessibilmente i campi obbligatori:

<!-- Visual + accessible required indicator -->
<label for="email">
  Email address
  <span aria-hidden="true">*</span>         <!-- visual asterisk -->
  <span class="sr-only">(required)</span>    <!-- screen reader text -->
</label>
<input type="email" id="email" name="email" required>

Fieldset e legend per i gruppi

Raggruppi gli input correlati con <fieldset> e <legend>:

<fieldset>
  <legend>Shipping address</legend>

  <label for="addr-street">Street</label>
  <input type="text" id="addr-street" name="street" autocomplete="address-line1">

  <label for="addr-city">City</label>
  <input type="text" id="addr-city" name="city" autocomplete="address-level2">
</fieldset>

Fieldset per i gruppi di pulsanti radio

I gruppi di pulsanti radio richiedono sempre un fieldset e una legend:

<fieldset>
  <legend>Preferred contact method</legend>

  <label>
    <input type="radio" name="contact" value="email"> Email
  </label>
  <label>
    <input type="radio" name="contact" value="phone"> Phone
  </label>
  <label>
    <input type="radio" name="contact" value="text"> Text message
  </label>
</fieldset>

Il placeholder non è una label

Un placeholder scompare quando l'utente digita: non può sostituire una label:

<!-- BAD: placeholder used as a label -->
<input type="email" placeholder="Email address">
<!-- Screen readers may announce the placeholder, but many skip it -->
<!-- User cannot see the field purpose while typing -->

<!-- GOOD: -->
<label for="email">Email address</label>
<input type="email" id="email" placeholder="you@example.com">

Label nascoste visivamente

Se il design non prevede una label visibile, la nasconda visivamente mantenendola disponibile per i lettori di schermo:

<label for="search" class="sr-only">Search</label>
<input type="search" id="search" placeholder="Search...">

/* sr-only utility class: */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

Verifica rapida

Come si associa una label a un input usando un'associazione esplicita?

Riepilogo: accessibilità delle label

Elementi essenziali delle label:

  • Ogni input ha sempre bisogno di una label
  • <label for="id"> — associazione esplicita
  • Inserire l'input nella label = associazione implicita
  • aria-labelledby collega un elemento qualsiasi tramite id
  • aria-label per i pulsanti composti solo da icone e privi di testo visibile
  • <fieldset> + <legend> per i controlli raggruppati

Domande Frequenti

La lezione «L’elemento label e l’accessibilità» è gratuita?

Sì — il testo completo di «L’elemento label e l’accessibilità» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «L’elemento label e l’accessibilità»?

Associare le label agli input per supportare gli screen reader Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «L’elemento label e l’accessibilità»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. L’elemento form: action, method ed enctype
  2. Tipi di input: text, password, email, number e tel
  3. L’elemento label e l’accessibilità
  4. L’elemento button: submit, reset e button
← Torna a HTML Academy