Menu
Contattaci
Le nostre vite sono sempre più dipendenti da Internet, ma la rete purtroppo continua a non essere fruibile da tutti. Molte persone soffrono di disabilità e spesso riscontrano difficoltà ed ostacoli sul web prodotti dalla mancanza di consapevolezza o da disattenzioni.
Dato che i tipi di disabilità che possono inficiare la navigazione sul web sono molteplici, gli sviluppatori dovrebbero valutare una serie di problematiche:
In questo articolo analizzeremo alcuni di questi problemi.
Recentemente ho scoperto che Mark Zuckerberg, Bill Clinton, il Principe William e Keanu Reeves hanno in comune qualcosa, sapete cosa? Sono tutti e quattro daltonici. In particolare sapete perché Facebook è blu? Perché per Zuckerberg è il colore più nitido da vedere!
Prima di parlarvi delle Best Practice da adottare come sviluppatori di siti web, vi ho portato questo esempio e vorrei analizzare un po’ di dati, perché possono esservi utili nel caso vogliate migliorare il vostro lavoro o dobbiate informare i vostri responsabili, colleghi o addirittura clienti e motivare il perché di determinate scelte nella costruzione di un layout.
Iniziando dalle disabilità visive, le statistiche sulla popolazione riportano che in Gran Bretagna 25.000 mila bimbi sono ciechi o ipovedenti …e stiamo parlando dell’Europa! Ogni 5 secondi qualcuno nel mondo diventa cieco o ha problemi alla vista e cambia il suo modo di percepire le cose; i cittadini italiani che convivono con disturbi alla vista sono 43 su 100, dei quali il 33,4% ha dai 65 anni in su, mentre il 17,6% ha 15 anni o meno (Ministero della Salute), mentre al mondo il 50% dei casi di perdita della vista non è reversibile e ci sono ben 30 milioni di nuovi casi ogni anno. Nel mondo, 4,5 milioni di persone vivono con un glaucoma.
Per quanto riguarda le disabilità uditive, 466 milioni di persone sono affette da perdita uditiva invalidante a livello mondiale; in Italia sono 7 milioni gli individui con un calo uditivo e il 45% delle persone che vivono negli Stati Uniti ha delle difficoltà (stimato, dato che probabilmente il 17% non ne parla con nessuno).
Si tratta di dati estremamente importanti che dovrebbero spronarci a rendere il web accessibile a tutti.
Esistono vari gradi di daltonismo; ad esempio la protanopia che è la mancanza della percezione del colore rosso, la deuteranopia che invece inibisce la percezione del verde e si può arrivare anche alla acromatopsia che preclude la percezione di tutti colori.
Nel esempio sottostante, un grafico a torta di diversi colori percepito da persone con vari tipi di daltonismo:
Online troviamo vari tool che ci permettono di simulare i tipi di daltonismo, così da testare in prima persona la percezione del nostro sito e migliorare (dove possibile) i nostri contenuti per renderli fruibili a chiunque.
Un tool molto utile è Sim Daltonism disponibile per Apple Mobile e Desktop.
Un’estensione online per Chrome è NOCOFFEE che permette di simulare la visione di un sito in base a dei parametri da voi selezionabili dal pannello sulla destra.
Un altro strumento che ci può aiutare è Photoshop; probabilmente non tutti sanno che anche PS da la possibilità di simulare alcuni tipi di daltonismo. Ecco come:
Un portale molto interessante e utile è Color-Blindness: potrete trovare vari test per mettere alla prova la vostra vista ma soprattutto potete testare vari siti.
Il tool che ho trovato più utile in quanto rapido e privo di installazione e/o registrazione è Coblis, con il quale ho fatto un po’ di prove per capire come viene effettivamente visualizzato il sito di Giuneco da chi i colori li percepisce diversamente (il rosso soprattutto).
Grazie alla collaborazione di un mio collega daltonico, sono riuscita a comprendere un pochino di più il suo spettro visivo effettuando un test online, ecco il suo ed il mio risultato a confronto:
Il mio collega risulta daltonico al 91%, maggiormente inquadrato sotto la deuteranopia, il che mi ha portato a chiedermi “come vede il sito di Giuneco?”
Ecco le prove effettuate con Coblis. La maggior parte dei normovedenti visualizza il nostro sito così:
Mentre il mio collega, lo vede più o meno così:
Altri invece lo visualizzano così:
Una bella differenza vero? Ve lo aspettavate?
Esistono alcune best practice che possiamo mettere in pratica per migliorare la percezione del web, iniziamo parlando del Markup semantico.
Il Markup semantico consente di rendere riconoscibili diversi aspetti relativi al “significato” di un determinato documento, prendendo in considerazione termini che renderanno ogni singolo elemento distinto e ben identificabile, non solo in base al suo contenuto.
Nella maggior parte dei casi, i tag HTML non semantici hanno lo stesso identico aspetto dei loro omologhi semantici.
Ecco dei normali tag HTML non semantici:
Quasi la totalità di un documento web potrebbe essere scritto utilizzando solamente questi due tag. Il problema è che organizzano il significato ma non lo convogliano: in pratica, al browser non dicono nulla riguardo al contenuto che ospitano.
Al contrario, i seguenti tag sono in grado di organizzare in modo efficiente il contenuto dando, al contempo, significato al markup:
Perché dovrebbe interessarci investire maggior accuratezza nel codice? Perché migliora la SEO, aiuta ad ottenere una collaborazione limpida tra colleghi che sapranno esattamente dove stanno intervenendo, aiutiamo i browser a leggere bene il nostro sito e di conseguenza aiutiamo gli screen reader a interpretare il nostro sito per una navigazione migliore.
Passiamo ora all’utilizzo di attributi Aria. WAI-ARIA – Web Accessibility Initiative-Accessible Rich Internet Applications – è una specifica, cioè una raccolta di indicazioni, prodotta dal W3C, che definisce una serie di attributi HTML addizionali che possono essere applicati agli elementi del DOM per fornire maggior valore semantico e migliorare l’accessibilità ovunque sia necessario. Fornisce all’utente un significato aggiuntivo per correlato all’interazione con il sito, così da agevolare la visita dei nostri utenti che si avvalgono di screen reader per poter navigare.
<!– adding alternative labeling to an image (with non-visible text) –>
<img aria-label=”Descriptive image text” src=”#” />
<!– adding alternative labeling to an image (with visible text) –>
<img aria-labelledby=”image-text-desc” src=”#” />
<div id=”image-text-desc”>A text description of the image, visible on the screen</div>
Le persone ipovedenti non riescono a visualizzare correttamente contenuti molto chiari o molto scuri. Tutto tende ad apparire più o meno alla stessa luminosità, il che rende difficile per loro distinguere i contorni e i bordi. Esistono diverse estensioni per i browser che misurano la differenza di luminosità tra il testo in primo piano e lo sfondo. Se il vostro testo ha un basso contrasto, per questi utenti ipovedenti la visita al vostro sito potrebbe essere un’esperienza alienante, in quanto vedrebbero lo schermo letteralmente vuoto. Un alto contrasto nelle nostre pagine da quindi la possibilità di usufruire correttamente dei nostri contenuti anche agli ipovedenti. Per controllare il “contrast ratio” delle vostre pagine potete usare Color Picker che mediamente consiglia 4.5:1 di contrast ratio se il font è minore di 18px, se il font è più grande può essere anche sui 3:1.
Potrebbe essere difficile per gli utenti daltonici interpretare grafici e diagrammi. Inserendo dei semplici pattern all’interno, aiutiamo a creare modelli che hanno un forte contrasto e dove possibile, possiamo inserire anche il testo per renderlo ancora più esplicativo.
Anche Trello ha la modalità per daltonici nella parte delle etichette, che va ad inserire dei pattern per distinguere meglio le varie label.
Bisogna inoltre ricordarsi di mettere i sottotitoli per i contenuti audio, se il contenuto è importante per la fruizione di un messaggio; chi ha problemi di udito non capirà molto del significato (ad esempio di un video) se mancante di sottotitoli.
Esiste un progetto diretto dalla comunità A11YPROJECT grazie al quale si possono sfatare falsi miti tipo: “gli screen reader non leggono il javascript” …beh, non è così! Il loro sito mette a disposizione esempi pratici su come migliorare la fruibilità (ad esempio su come creare caroselli accessibili e molto molto altro); vi consiglio di esplorarlo perché troverete informazioni utili.
Ci sono anche cose da non fare, mai. Non usare mai l’autoplay: non è solamente una cosa fastidiosa, ma se qualcuno sta ascoltando il nostro sito con uno screen reader gli partirà il video di sottofondo e non capirà più nulla, così facendo gli avremo rovinato l’esperienza di navigazione.
Non bisogna usare video di background; chi ha problemi nel distinguere i contrasti, chi soffre di motion sickess, risulterà ancora più confuso e non riuscirà a leggere i testi del sito. Non bisogna abusare delle icon-font perché difficilmente leggibili dagli screen reader (o almeno bisognerebbe evitare di utilizzare solo icone, andrebbero sempre accompagnate da testi). I bordi colorati nei form, i bottoni, qualsiasi cosa che sul web dovrebbe trasmettere un messaggio positivo o negativo non dovrebbe mai essere composto esclusivamente da “colori” andrebbe sempre accompagnato dal testo. Vi propongo una casistica frequente come esempio (non si tratta della percezione di un daltonico grave ma è la percezione di chi soffre di Deuteranopia, che è la forma di daltonismo più comune); nella colonna a destra è praticamente impossibile capire dove sia l’errore visto che i colori sembrano gli stessi:
Facebook invece supera l’esame e rende accessibili i propri form anche ai daltonici con il supporto di iconcine per segnalare la presenza di un errore:
Bisogna stare molto attenti anche all’usabilità dei nostri siti; Codepen tempo fa aveva un gravissimo bug che comprometteva la fruizione da parte delle persone con glaucoma, cataratta, visione periferica limitata o che banalmente necessitavano dello zoom per leggere meglio, le quali erano praticamente impossibilitate dall’usufruire della funzione “cerca” in quanto cliccando sull’icona cerca in alto a destra, si ritrovavano l’apertura del form per la funzione più in basso e sulla sinistra dello schermo. Per fortuna hanno risolto questo problema.
Occhio anche al font, non tutti i font sono di facile lettura sia per gli ipovedenti che per chi è dislessico. Se stiamo creando un sito con dei font particolari e magari poco leggibili cerchiamo di mettere a disposizione anche un secondo font, magari più chiaro e leggibile, per permettere a chiunque di accedere ai nostri contenuti. Esiste inoltre un font (a pagamento) creato appositamente per chi soffre di dislessia che si chiama DyslexieFont.
Per farvi capire l’importanza di un font adeguato sappiate che Richard Branson, Steven Spielberg e Sylvester Stallone, tutti e tre dislessici, hanno dichiarato che leggere dei font poco chiari da loro grandi difficoltà in quanto le lettere saltano da una parte all’altra impedendo la corretta lettura, ecco un piccolo esempio
Due delle cose più importanti da implementare sono la dimensione del carattere (la maggior parte degli ipovedenti riesce a distinguere molto bene un font di 14 punti o superiore) e l’attribuzione di un testo ALT significativo e una descrizione delle immagini pertinente, in quanto potranno essere letti dagli strumenti di accessibilità. È importante inserire il testo ALT anche per gli elementi grafici in quanto il testo può essere letto da screen-reader e dal display braille.
Esistono tool che possono aiutarci ad esaminare il nostro sito per capire come uno screen reader legge correttamente il nostro sito e se quello che abbiamo fatto è sufficiente per rendere l’esperienza dell’utente completa e gradevole. Ecco uno screenshot esempio di Accesibility Inspector di Mozilla
Altro tool, questa volta di Chrome, è Accesibility Audit che ci segnala tutti i problemi di accessibilità che ha riscontrato nel sito che gli abbiamo chiesto di analizzare, dando una vera e propria to-do-list di cose da sistemare.
Vi starete chiedendo “Ma è così importante migliorare accessibilità e usabilità?” La risposta è semplice; grandi nomi hanno migliorato i loro siti/portali riscontrando grandi benefici, ad esempio Pinterest ha incrementato del 15% il traffico abbassando la percezione del caricamento (lo scorso anno ho parlato delle SVG con questo utilizzo, date un’occhiata!), la BBC invece ha calcolato che perdeva un 10% di utenti per ogni secondo aggiuntivo necessario a caricare il proprio sito. (Fonte: Creative Bloq), secondo le ricerche di DoubleClick di Google il 53% delle visite ai siti per dispositivi mobili viene abbandonato dopo 3 secondi, AliExpress ha ridotto il tempo di caricamento del 36% e ha visto un aumento del 10,5% negli ordini e un aumento del 27% nella conversione per i nuovi clienti. (Fonte: Akamai). Questi dati sottolineano l’importanza di un sito veloce e fruibile da tutti.
Non vi resta che testare il vostro sito per scoprire quali sono le eventuali cause del rallentamento: Test My Site di Think With Google fa al caso vostro.
Esistono dei BIG WINS che se messi in pratica vi permetteranno di essere già a metà dell’opera, forse anche più!
L’algoritmo Brotli, in particolare, è stato creato da Google; aiuta a ridurre le dimensioni di trasferimento per file HTML, CSS, JS e SVG, ma non JPG, PNG, WebP, GIF. Nel 2015 è stato rilasciato come libreria di compressione per ottimizzare la consegna dei contenuti web.
Secondo un’indagine Gzip vs Brotli, Brotli esce vincitore con i seguenti vantaggi:
14% più piccolo rispetto Gzip con JavaScript
21% più piccolo rispetto Gzip con HTML
17% più piccolo rispetto Gzip con CSS
I Content Delivery Networks, o CDN, sono vaste reti di server ospitati in tutto il mondo. Non usare un CDN potrebbe comportare un rallentamento della velocità del sito, specialmente se i visitatori si trovano lontano dalla posizione centrale del server, il che si traduce in una cattiva user experience. Inoltre, se usiamo un server di piccole dimensioni, è possibile che si sovraccarichi e causi il blocco del sito. I CDN risolvono entrambi questi problemi.
Esistono molti tool (come Purgecss, UnCSS, Helium) uno dei più comodi è UnCSS. Tool online, basterà incollare il proprio HTML e il proprio CSS, elaborerà tutto il codice per poi restituircelo pulito da CSS inutilizzato.
possiamo vedere la percentuale di CSS morto/inutilizzato nelle nostre pagine, questo può essere molto utile nel caso si mettano le mani su codice vecchio o di altri.
NON caricate tutta la font family ma solo il font che serve.
Se, ad esempio, di un font vi occorrono solo i numeri e non le lettere, caricate solamente quelli.
Se potete, usate i variable fonts che sono molto più leggeri.
Utilizzate il caricamento Lazy dei font.
Cercate di utilizzare flex, perché float è più pesante da renderizzare; non abusare di border-radius, box-shadow, opacity, transform, filter, position:fixed perché vanno ad appesantire la pagina; infine è importante cercare di non usare acronimi ed abbreviazioni in quanto potrebbero non essere interpretati correttamente dagli screen reader.
Concludo con un’immagine tratta da un video del CSSday del 2016 che ho preso a Matteo Guidotto e Davide Di Pumpo, che non ringrazierò mai abbastanza per avermi fatto prendere coscienza di queste problematiche durante il loro speech al CSSday 2019.
I Siti web sono come i negozi, ristoranti e teatri: devono essere accessibili alle persone. Se tu stai progettando un sito e io non posso accederci in maniera ottimale, come per un negozio, come per un ristorante, come per un teatro NON meriti assolutamente i miei soldi.
Fonti e reference oltre quelle linkate nell’articolo:
