Accessibilità di base

1. Il concetto, spiegato da zero

Una pagina accessibile può essere compresa e utilizzata da più persone, anche senza mouse o vista.

Usa elementi HTML nativi, alt appropriati, etichette comprensibili e una sequenza di titoli coerente. Mantieni l’ordine naturale di tabulazione e rendi riconoscibili i controlli.

2. Un esempio ragionato

Osserva l’esempio e leggi ogni istruzione nell’ordine. Prima di provarlo, fermati a prevedere cosa succederà; capire il motivo del risultato è più importante che memorizzare la sintassi.

<main>
 <h1>Impostazioni</h1>
 <button type="button" aria-label="Apri le impostazioni">Apri</button>
 <p>Puoi raggiungere il pulsante con Tab.</p>
</main>

Come leggere questo esempio

1. Prima di eseguire, immagina come apparirà il risultato nel browser.
2. Spiega con parole tue in che modo “accessibilità di base” risolve un problema concreto.
3. Rileggi ogni riga del programma e individua i valori che vengono creati o modificati.
4. Modifica un valore; confronta il comportamento e annota che cosa è cambiato.

3. Adesso tocca a te

Obiettivo dell’esercizio: Realizza un’interazione tramite button accessibile da tastiera.

Puoi partire dall’esempio, riprodurlo e poi modificarlo. La soluzione di riferimento è disponibile sotto, ma conviene aprirla soltanto dopo un primo tentativo.

Il risultato comparirà qui.

<main>
 <h1>Impostazioni</h1>
 <button type="button" aria-label="Apri le impostazioni">Apri</button>
 <p>Puoi raggiungere il pulsante con Tab.</p>
</main>

4. Verifica e ripasso

5. Come proseguire

Prima del capitolo successivo, prova a spiegare il concetto a un amico senza leggere il codice. Se non riesci, torna all’esempio e fai una nuova variante: imparare significa anche sperimentare.