Introduzione
Gli attributi globali HTML possono essere utilizzati su gran parte degli elementi della pagina. In questo tutorial li useremo per costruire un piccolo modulo di prenotazione accessibile, con messaggi di errore, riepilogo dei dati e un’area per mostrare lo stato dell’operazione.
L’esempio si concentra su cinque attributi importanti:
- id: identifica un elemento in modo univoco e permette di collegarlo ad altri elementi;
- class: assegna uno o più gruppi logici a un elemento, utili soprattutto per CSS e JavaScript;
- style: applica uno stile CSS direttamente all’elemento;
- title: fornisce informazioni aggiuntive, ma non deve sostituire un’etichetta visibile;
- tabindex: controlla la possibilità di raggiungere un elemento tramite tastiera.
L’obiettivo non è solo rendere il modulo gradevole, ma anche comprensibile e utilizzabile da chi naviga senza mouse o usa tecnologie assistive.
Codice completo
<section id="prenotazione" class="booking-panel" aria-labelledby="titolo-prenotazione">
<h2 id="titolo-prenotazione">Prenota una consulenza</h2>
<p class="intro">
Compila il modulo per richiedere un appuntamento di 30 minuti.
</p>
<div
id="messaggio-errore"
class="form-message error"
role="alert"
tabindex="-1"
hidden>
Controlla i campi obbligatori prima di continuare.
</div>
<form id="form-prenotazione" class="booking-form">
<div class="field-group">
<label for="nome">Nome e cognome</label>
<input
id="nome"
class="form-control required"
name="nome"
type="text"
autocomplete="name"
required
title="Inserisci il tuo nome e cognome">
</div>
<div class="field-group">
<label for="email">Indirizzo email</label>
<input
id="email"
class="form-control required"
name="email"
type="email"
autocomplete="email"
required
title="Esempio: [email protected]">
</div>
<div class="field-group">
<label for="giorno">Giorno preferito</label>
<input
id="giorno"
class="form-control"
name="giorno"
type="date"
title="Seleziona una data futura">
</div>
<button
id="invia-richiesta"
class="button button-primary"
type="submit"
title="Invia il modulo di prenotazione">
Invia richiesta
</button>
</form>
<div
id="stato-prenotazione"
class="status-box"
style="display: none;"
role="status"
aria-live="polite"
tabindex="-1">
Richiesta inviata. Riceverai una conferma via email.
</div>
</section>Spiegazione
L’attributo id
Ogni id deve essere univoco all’interno della pagina. Nell’esempio, id="nome" collega l’elemento input alla sua etichetta tramite for="nome". Questo collegamento è essenziale: quando l’utente seleziona l’etichetta, il campo associato riceve il focus.
Gli identificatori messaggio-errore e stato-prenotazione permettono inoltre di trovare facilmente questi elementi con JavaScript.
L’attributo class
Le classi descrivono gruppi di elementi che condividono una funzione o uno stile. La classe form-control può essere applicata a tutti i campi del modulo, mentre button-primary identifica lo stile principale del pulsante.
A differenza di id, una stessa classe può essere riutilizzata più volte. È quindi adatta per costruire regole CSS coerenti e mantenibili.
L’attributo style
Nel codice, style="display: none;" nasconde inizialmente il messaggio di conferma. L’uso di style è utile per modifiche molto specifiche o temporanee, ma non dovrebbe diventare il metodo principale per gestire tutto il CSS.
In un progetto reale è preferibile usare una classe come is-visible, aggiunta o rimossa tramite JavaScript. In questo modo struttura, comportamento e presentazione restano separati.
L’attributo title
L’attributo title aggiunge una descrizione, spesso mostrata dai browser quando il puntatore resta sopra un elemento. Può essere utile per spiegare un pulsante o fornire un esempio, ma non sostituisce una label visibile e non è sempre facilmente disponibile su dispositivi touch.
L’attributo tabindex
tabindex="-1" impedisce la navigazione normale con il tasto Tab, ma consente di spostare il focus sull’elemento tramite JavaScript. È ideale per portare l’attenzione dell’utente sul riepilogo di un errore o sul messaggio di conferma.
tabindex="0", invece, inserisce un elemento nella normale sequenza di navigazione da tastiera. È consigliabile usarlo solo quando un elemento interattivo personalizzato deve diventare raggiungibile. Bisogna evitare valori positivi come tabindex="1", perché possono creare un ordine di focus confuso.
Best practice
- Usa un
iddescrittivo e univoco, evitando nomi generici comebox1; - preferisci le
classper gli stili riutilizzabili e gliidper collegamenti o riferimenti precisi; - limita l’uso di
styleinline, soprattutto quando lo stesso stile deve essere applicato a più elementi; - non affidarti esclusivamente a
titleper comunicare istruzioni importanti; - mantieni sempre una
labelassociata a ogni campo del modulo; - usa
tabindex="-1"per gestire il focus programmatico senza alterare l’ordine naturale della pagina; - non usare
tabindexpositivo, salvo casi eccezionali e attentamente valutati; - mantieni un contrasto sufficiente tra testo e sfondo anche quando utilizzi classi CSS per gli stati di errore;
- usa
role="alert"per errori urgenti earia-live="polite"per aggiornamenti non urgenti; - verifica il modulo usando soltanto tastiera, ingrandimento del testo e uno screen reader.
Riepilogo
Gli attributi globali diventano particolarmente utili quando vengono combinati con una struttura HTML semantica. In un modulo di prenotazione, id collega etichette e campi, class organizza gli stili, style può gestire un cambiamento puntuale, title offre un’informazione supplementare e tabindex consente di controllare il focus senza compromettere la navigazione da tastiera.
La regola principale è rispettare il comportamento naturale del browser: usa elementi nativamente interattivi, come button e input, e ricorri a tabindex solo quando hai una necessità concreta.