Rendendo il tuo sito web accessibile alle persone con disabilità, si finisce per rendere accessibile a tutti. In effetti, rendere il tuo sito Web più accessibile potrebbe persino aiutare le persone a trovare il tuo sito web nei motori di ricerca. Perché? Perché i motori di ricerca utilizzano alcuni degli stessi segnali che gli screen reader fanno per trovare e comprendere il contenuto del tuo sito web.
Ma esattamente come si crea un sito web accessibile senza diventare un esperto di codifica?
Ecco alcuni suggerimenti e trucchi che quasi chiunque abbia una conoscenza HTML di base può utilizzare per migliorare l'accessibilità del proprio sito web.
Strumenti di accessibilità al web
W3C ha una fantastica lista di strumenti di accessibilità al web che puoi usare come correttore per individuare potenziali problemi con il tuo sito web. Detto questo, consiglio comunque di fare un po 'di esplorazione con uno screen reader e di provarlo da solo.
Comprendere i lettori di schermo
Uno dei modi più importanti per migliorare l'accessibilità del tuo sito web è assicurarsi che possa essere compreso dagli screen reader. Gli screen reader usano una voce sintetizzata per leggere il testo sullo schermo. Sembra abbastanza semplice; tuttavia, gli screen reader o altre tecnologie di assistenza potrebbero non comprendere il tuo sito web nel modo in cui lo hai attualmente impostato.
La prima cosa che potresti voler fare è provare uno screen reader e vedere come va. Se sei su un Mac, prova a utilizzare VoiceOver.
- Vai a Preferenze di Sistema.
- Selezionare Accessibilità.
- Selezionare Voce fuoricampo.
- Selezionare la casella per Abilitare VoiceOver.
Puoi accenderlo e spegnerlo usando il comando-F5.
Se si utilizza un computer Windows, è possibile scaricare NVDA. Puoi impostarlo per attivare e disattivare il controllo di scelta rapida + alt + n.
Entrambi gli screen reader funzionano consentendo all'utente di navigare con la tastiera (questo ha senso - se non si riesce a vedere, usare un mouse sarebbe una sfida) e creando un'area di messa a fuoco per la navigazione. La messa a fuoco è essenzialmente in cui la tastiera è "puntata", ma in genere viene visualizzata come una casella evidenziata attorno all'oggetto di messa a fuoco anziché a un cursore.
È possibile modificare sia il tono della voce che la velocità con cui la voce legge se le impostazioni predefinite sono fastidiose (e dopo circa cinque minuti di ascolto di una normale lettura vocale lenta, di solito lo sono). I non vedenti di solito leggono i siti Web con i loro lettori di schermo impostati ad alta velocità.
Può aiutare a chiudere gli occhi mentre lo fai, ma può anche aiutare a tenerli aperti e confrontare. Alcune delle cose che potresti notare immediatamente quando provi ad ascoltare il tuo sito web è che parte del testo potrebbe essere fuori uso. Intestazioni e tabelle possono essere confusi. Le immagini possono essere saltate o possono dire "immagine" o qualcosa di altrettanto inutile. Le tabelle tendono ad essere lette come una serie di elementi senza contesto.
Puoi, si spera, risolvere questo problema.
Alt-tag o attributo alternativo
L'alt-tag o l'attributo alternativo (alt) è usato in HTML per descrivere un'immagine. In HTML, assomiglia a qualcosa del genere:
Anche se crei il tuo sito Web con uno strumento visivo che nasconde il tuo codice HTML, avrai quasi sempre la possibilità di inserire una descrizione dell'immagine. Non puoi inserire nulla (alt = "") ma sarebbe meglio dare a ogni immagine una descrizione utile. Se tu fossi cieco, cosa avresti bisogno di sapere sull'immagine? "Donna" non è di grande aiuto, ma forse "Diagramma di flusso del disegno della donna che include accessibilità, usabilità, branding e design".
Titolo del testo
I siti Web non sempre visualizzano il tag del titolo HTML, ma è utile per gli screen reader. Assicurati che ciascuna delle pagine del tuo sito web abbia un titolo descrittivo (ma non eccessivamente dettagliato) che indichi ai visitatori di cosa tratta la pagina.
Fornisci al tuo sito web una buona gerarchia delle informazioni
Suddividi frammenti di testo di grandi dimensioni con le intestazioni e, se possibile, utilizza le intestazioni con la gerarchia H1, H2, H3 in modo appropriato. Non solo rende il tuo sito Web più semplice per i lettori di schermo, ma rende anche più semplice per tutti gli altri. È anche un ottimo segnale per Google e altri motori di ricerca per aiutarli a indicizzare meglio il tuo sito web.
Allo stesso modo, dovresti assicurarti che il tuo sito web sia in un ordine di contenuto logico e che non siano visualizzate caselle di informazioni non correlate. Se utilizzi annunci, osserva che i tuoi annunci non sono eccessivamente invadenti e interrompono il testo sul tuo sito web troppo spesso.
Crea tabelle migliori
Se si utilizzano tabelle HTML, è possibile aggiungere didascalie alle tabelle utilizzando il tag per renderle più facili da comprendere dai lettori di schermate piuttosto che creare il titolo di una tabella in grassetto. Puoi anche aggiungere l'elemento "scope" e etichettare chiaramente nuove righe e colonne nella tua tabella in modo che gli screen reader non si limitino a snocciolare una serie di celle di una tabella senza dare alcun contesto.
Navigazione tramite tastiera
In generale, tutto ciò che inserisci sul tuo sito web dovrebbe essere qualcosa che qualcuno potrebbe concepibilmente usare solo con una tastiera. Ciò significa che i pulsanti di navigazione non dovrebbero essere pulsanti a discesa animati se non puoi utilizzarli con uno screen reader (provalo e vedi se non sei sicuro - alcuni pulsanti sono programmati per l'uso con la tastiera.)
Sottotitoli
Se aggiungi video o elementi audio al tuo sito web, dovrebbero avere didascalie. HTML5 e molti servizi di streaming video (come YouTube) offrono supporto per sottotitoli. I sottotitoli sono utili non solo per l'accessibilità, ma anche per gli utenti che potrebbero sfogliare il tuo sito Web da qualche parte dove non possono riprodurre audio, ad esempio in un ufficio o in un luogo rumoroso.
Per podcast o altri elementi audio, prendere in considerazione la possibilità di fornire una trascrizione di testo. Non solo è utile per le persone che non possono ascoltare l'audio, poiché il testo renderà più semplice per Google e altri motori di ricerca indicizzare tali contenuti e aiutare il tuo posizionamento su Google.
ARIA
Se si desidera raggiungere il livello avanzato di accessibilità, le specifiche HTML5 ARIA o WAI-ARIA mirano ad essere il nuovo standard in futuro. Tuttavia, questo è un manuale tecnico complesso (e in evoluzione), quindi quello che potresti fare è usare un validatore ARIA per scansionare per vedere se il tuo sito web ha problemi che puoi risolvere. Mozilla ha anche una guida più accessibile per iniziare con ARIA.
