Benvenuta/o o bentornata/o alla seconda lezione sull'accessibilità web!
Riprendiamo subito elencando le strategie da attuare per aiutare i nostri utenti non vedenti.
Cecità totale o parziale
- Contrasto con lo sfondo: per rendere ben visibili i caratteri dei testi. Il classico sfondo bianco con scritta nera sono un esempio, ma se vuoi distaccarti un po' puoi usare beige, grigio e colori molto chiari per il background e blu, grigio scuro o medio e altri colori scuri per i testi.
- Pattern delicato: puoi personalizzare il background del sito con un pattern (vedi Glossario) a patto che non sia composto da elementi che distraggano o sforzino la vista. Potresti inserire la trama di un tessuto oppure un pattern con dei disegni, potrebbero essere sia tono su tono che di colori totalmente differenti, l'importante è che non richiamino l'attenzione su di sé.
- Font leggibili: utilizza font (caratteri tipografici) semplici. No ai ghirigori.
- Usa colori appropriati: puoi aiutare il lettore ipovedente a comprendere il compito di un tasto attraverso i colori. Ad esempio il rosso e il grigio sono usati per i tasti che comportano un diniego o un'azione "distruttiva" (tipo "Cancella" o "No"), mentre il verde dà un senso di sicurezza e assenso ("Salva" o "Crea Account").
- Giuste dimensioni: consiglio che vale per i caratteri dei testi, per i bottoni, i link e per qualunque elemento che vada letto e compreso.
- Collocazioni adeguate: per essere visti gli elementi devono trovarsi vicini ad elementi a loro collegati o ben distanziati da altri. Ad esempio, metti ben vicino alla barra di ricerca il bottone che permette di utilizzarla.
- Rendi le immagini "leggibili": gli utenti ciechi e ipovedenti sono spesso dotati di screen reader (software che leggono i contenuti di un sito per riportarli vocalmente o tramite display braille all'utente). Perciò associa ad ogni immagine un testo descrittivo che la renda leggibile dall'applicazione.
- Layout ordinato: per renderlo leggibile sia dall'utente che dagli screen reader.
- Attribuisci correttamente i tag: i tag te li spiegherò più avanti, perché hanno a che fare con la codifica. Ti basti sapere che durante la codifica devi usare delle parole chiave per inserire gli elementi nelle pagine web. Questi codici descrivono il ruolo degli elementi inseriti e usarli con criterio ne permette la corretta lettura da parte degli screen reader.
- Per più periferiche: il sito deve essere utilizzabile sia con il mouse che non la tastiera.
- Testi esplicativi: vale in particolare per i link, i bottoni e i titoli. L'utente deve comprendere bene il ruolo di ogni singolo elemento, soprattutto se cliccandoci sopra compie un'azione. Ad esempio, un bottone che porta ad un'altra pagina non può avere sopra la scritta "Clicca qui". "Per continuare a leggere" o "Altro" sono molto più facili da comprendere. In questa maniera i testi saranno letti dagli screen reader e interpretati correttamente dall'utente.
- Consenti lo zoom: gli elementi devono poter essere comprensibili se ingranditi del 200%.
Daltonismo
- Testi + Colori: non lasciare mai soltanto ai colori il compito di comunicare con l'utente.
Ecco qui sotto un'immagine modificata così che tu possa comprendere come vedono coloro che soffrono dei vari tipi di daltonismo:
Concludo qui con la seconda lezione sull'accessibilità.
Nella prossima farò una lista con le strategie da attuare per favorire coloro che soffrono di disabilità fisica e motoria.
A presto!