Accessibilità per gli sviluppatori: scrivere codice inclusivo
Gli sviluppatori sono gli architetti dell'accessibilità a livello di implementazione. Mentre i designer stabiliscono le basi visive e di interazione, è il codice che determina in ultima analisi se un sito web funziona con la navigazione da tastiera, comunica correttamente con gli screen reader e mantiene l'accessibilità tra browser e dispositivi.
La buona notizia è che la maggior parte delle best practice di accessibilità si allinea con le best practice generali per un codice pulito, semantico e conforme agli standard. Scrivere codice accessibile non significa aggiungere complessità — significa scrivere codice correttamente fin dall'inizio.
Prima l'HTML semantico
La cosa più importante che puoi fare per l'accessibilità è utilizzare correttamente gli elementi HTML semantici. L'HTML5 fornisce un ricco vocabolario di elementi che portano significato intrinseco e funzionalità di accessibilità. Un elemento <button> è automaticamente focalizzabile, attivabile con la tastiera e annunciato come pulsante dagli screen reader. Un <div> con un gestore onclick non ha nessuna di queste funzionalità senza un lavoro aggiuntivo significativo.
Usa <nav> per le regioni di navigazione, <main> per il contenuto principale, <header> e <footer> per le rispettive sezioni, <section> e <article> per le aree di contenuto, <h1> fino a <h6> per le intestazioni nell'ordine gerarchico corretto, <ul> e <ol> per le liste, <table> con <th> per i dati tabulari, <label> con attributi for per i controlli dei moduli, e gli elementi nativi <button> e <a> per i controlli interattivi.
Questi elementi creano un albero di accessibilità che le tecnologie assistive utilizzano per presentare il contenuto agli utenti. Quando li usi correttamente, gran parte dell'accessibilità viene gestita automaticamente.
Struttura delle intestazioni
Le intestazioni creano la struttura del contenuto della tua pagina. Gli utenti di screen reader navigano frequentemente tramite le intestazioni per comprendere l'organizzazione del contenuto e trovare sezioni specifiche. Ogni pagina dovrebbe avere esattamente un <h1>, e le intestazioni dovrebbero seguire una gerarchia logica senza saltare livelli — un <h3> non dovrebbe seguire un <h1> senza un <h2> intermedio.
Non usare mai gli elementi intestazione per la formattazione visiva. Se hai bisogno di testo grande e in grassetto che non è un'intestazione, usa il CSS su un elemento diverso. Al contrario, se un contenuto funziona come intestazione, contrassegnalo come tale indipendentemente dalla sua presentazione visiva.
Accessibilità da tastiera
Tutte le funzionalità devono essere utilizzabili attraverso la sola interfaccia da tastiera. Ciò significa che ogni elemento interattivo — link, pulsanti, controlli dei moduli, menu, finestre modali, slider, schede — deve essere raggiungibile tramite il tasto Tab (o Shift+Tab per tornare indietro), attivabile con Invio o Spazio, e chiudibile dove appropriato.
Non creare mai trappole da tastiera dove gli utenti possono entrare con Tab in un elemento ma non possono uscirne. Le finestre di dialogo modali dovrebbero intrappolare il focus all'interno del dialogo quando è aperto e restituire il focus all'elemento che l'ha attivato quando viene chiuso, ma premere Escape dovrebbe sempre chiudere il dialogo.
Assicurati che l'ordine del focus segua una sequenza logica che corrisponda al layout visivo. L'ordine del DOM dovrebbe generalmente corrispondere alla presentazione visiva. Evita di usare valori positivi di tabindex, che sovrascrivono l'ordine naturale del focus e creano confusione. Usa tabindex="0" per rendere focalizzabili gli elementi non interattivi quando necessario, e tabindex="-1" per gli elementi che dovrebbero essere focalizzabili solo programmaticamente.
Lingua della pagina
Imposta la lingua predefinita di ogni pagina usando l'attributo lang sull'elemento <html>. Questo indica agli screen reader quali regole di pronuncia utilizzare. Se la lingua cambia all'interno del contenuto — ad esempio, una frase francese in una pagina italiana — contrassegna il cambio con un attributo lang sull'elemento contenitore.
Accessibilità dei moduli
I moduli sono il punto in cui gli utenti forniscono input e sono una fonte frequente di problemi di accessibilità. Ogni controllo del modulo deve avere un'etichetta associata programmaticamente, tipicamente usando l'elemento <label> con un attributo for corrispondente all'id del controllo. Raggruppa i controlli correlati usando <fieldset> e <legend>.
Quando vengono rilevati errori di input, identifica il campo in errore e descrivi l'errore nel testo. Fornisci suggerimenti per la correzione dove possibile. Per i campi che accettano formati specifici, fornisci istruzioni chiare sul formato previsto. Usa l'attributo autocomplete per abilitare il completamento automatico del browser per i campi comuni come nome, email, indirizzo e numero di telefono.
I messaggi di stato che non ricevono il focus — come "articolo aggiunto al carrello" o "3 risultati trovati" — devono essere annunciati agli utenti di screen reader attraverso le regioni live ARIA o i ruoli di stato.
Testo alternativo
Ogni immagine non decorativa deve avere un testo alternativo significativo che descriva il suo contenuto o la sua funzione. Per le immagini informative, descrivi ciò che l'immagine trasmette. Per le immagini funzionali (come un logo che rimanda alla homepage), descrivi la funzione. Per le immagini decorative che non aggiungono informazioni, usa un attributo alt vuoto (alt="") in modo che gli screen reader le saltino completamente.
Le immagini complesse come grafici, diagrammi o schemi potrebbero necessitare di descrizioni più lunghe fornite tramite una didascalia, un testo adiacente o una descrizione dettagliata collegata.
WAI-ARIA
La specifica Accessible Rich Internet Applications fornisce semantica aggiuntiva per le situazioni in cui l'HTML nativo non è sufficiente. ARIA ti consente di comunicare ruoli, stati e proprietà alle tecnologie assistive per i widget personalizzati e i contenuti dinamici.
Tuttavia, ARIA dovrebbe essere usato con giudizio. La prima regola di ARIA è: se puoi usare un elemento HTML nativo che ha la semantica e il comportamento di cui hai bisogno, fallo. ARIA non aggiunge funzionalità — aggiunge solo semantica. Un <div role="button"> ha comunque bisogno di JavaScript per la gestione della tastiera, mentre un <button> nativo la gestisce automaticamente.
Usa i ruoli ARIA landmark (o i loro equivalenti HTML5) per definire le regioni della pagina. Usa aria-label e aria-labelledby per fornire nomi accessibili dove il testo visibile non è sufficiente. Usa aria-expanded, aria-selected, aria-checked e altri attributi di stato per comunicare lo stato attuale dei widget interattivi. Usa le regioni aria-live per annunciare aggiornamenti di contenuto dinamico.
Design responsive e ridistribuzione
Il contenuto deve essere presentabile senza perdita di informazioni a una larghezza di 320 pixel CSS senza richiedere lo scorrimento orizzontale. Questo garantisce che gli utenti che ingrandiscono al 400% su un display desktop standard possano ancora accedere a tutto il contenuto. Progetta i tuoi layout per ridistribuire il contenuto in una singola colonna a larghezze ridotte anziché richiedere lo scorrimento in due dimensioni.
Skip link
Fornisci un meccanismo per gli utenti da tastiera per saltare i blocchi di contenuto ripetuti, come i menu di navigazione, e andare direttamente al contenuto principale. L'implementazione più comune è un link "Vai al contenuto principale" che è il primo elemento focalizzabile della pagina e diventa visibile quando riceve il focus.
Checklist di test per lo sviluppatore
Prima di distribuire qualsiasi funzionalità, verifica: tutte le funzionalità funzionano con la sola tastiera; l'ordine del focus è logico; il focus è visibile su tutti gli elementi interattivi; tutte le immagini hanno un testo alternativo appropriato; tutti i controlli dei moduli hanno etichette; la lingua della pagina è impostata; la gerarchia delle intestazioni è corretta; ARIA è usato correttamente e solo quando necessario; il contenuto si ridistribuisce a 320px di larghezza; e gli aggiornamenti di contenuto dinamico sono annunciati agli screen reader.
In questa sezione
Il tuo sito web è accessibile?
Scansiona il tuo sito web gratuitamente e ottieni il tuo punteggio WCAG in pochi minuti.
Scansiona il tuo sito gratis