UX e disabilità
Table of Contents
UX e disabilità: come progettare siti accessibili a persone vedenti/ipovedenti
Un sito web multilingua o un ecommerce non è più solo la vetrina del nostro business o del nostro lavoro. Poteva essere vero una decina di anni fa, ma non oggi. Anche il sito web deve essere uno strumento per concludere affari, come ci aspetteremmo nella vita reale, da un ufficio o un negozio accessibile ai clienti. Perciò anche il sito va considerato come parte integrante dell’attività produttiva e deve produrre fatturato, in un modo che si adatti alle caratteristiche del web ed al modo di utilizzare lo spazio online da parte degli utenti.
Un buon sito deve porsi come obiettivo aumentare il numero di potenziali clienti che vengono a conoscenza delle nostre offerte, cercando di trasformare le visite in azioni che ci portino alla vendita dei nostri prodotti e servizi e così via. Per fare ciò, dobbiamo tenere conto di molti fattori, partendo dalla creazione dell’ ecommerce.
Bello significa funzionale
Cominciamo col dire che bello deve essere sinonimo di facile da usare: facilmente comprensibile, gradevole esteticamente ma soprattutto funzionale.
Ulteriore aspetto da non sottovalutare: gli organi di senso dei nostri utenti. Diamo per scontato che la vista sia il senso più utilizzato, se non l’unico, per la consultazione di un sito multilingua. Ma dobbiamo ricordarci che il nostro spazio è potenzialmente visibile in tutto il mondo ed, in tutto il mondo, secondo i dati dell’Organizzazione Mondiale della Sanità, esistono quasi 40 milioni di non vedenti, che salgono a 250 milioni includendo altre disabilità più o meno gravi.
Non dobbiamo sottovalutare poi le difficoltà di visualizzazione creata da scarsa luminosità degli ambienti, dall’uso di vecchi schermi o da miopie, presbiopie, astigmatismo dei nostri utenti. Ogni 100 visite al nostro sito, dunque, una non trascurabile percentuale è fatta da persone con problemi di vista. Ecco perché nella fase di progettazione di un sito è necessario e fondamentale preoccuparsi dell’accessibilità dello stesso anche da parte di chi ha problemi di vista. Con questo articolo approfondiremo proprio questo argomento.
Leggi anche: Web design: l'importanza della User Experience
Cosa è l’accessibilità web?
Vi siete mai chiesti come faccia una persona non vedente o ipovedente a navigare online? Ciò è possibile attraverso l’uso di alcuni strumenti tecnologici di assistenza, come gli screen-reader o i display in braille collegati al computer.
Lo screen-reader, nella sostanza, invia il testo e tutto ciò che risulta leggibile nella pagina, ad un sistema di sintesi vocale che lo trasforma in voce. Anche le immagini e i link vengono descritti dalla voce. Nei pc, inoltre, sono presenti altri strumenti che aiutano le persone con difficoltà di vista, come l’assistente vocale, lo zoom, l’ingrandimento dei caratteri, la possibilità di gestire il contrasto cromatico e la luminosità, l’associazione di suoni, alert e feedback tattili per segnalare le diverse aree.
Tutto ciò però può funzionare solo se l’App o il sito che la persona con forti difficoltà di vista vuole consultare, in fase di progettazione e sviluppo sia stata pensata già per essere compatibile con gli screen reader. Ciò significa, ad esempio, etichettare in maniera comprensibile e sintetica ogni tipo di elemento riportato sullo schermo, descrivere le azioni disponibili, immettere testo alternativo per dare voce alle immagini e così via.
Questo però non vuol dire che ogni progettazione debba cercare di capire quale sia il modo migliore per descrivere ed etichettare. Esistono degli standard internazionali da applicare, che aiutano gli sviluppatori dei siti. In particolare, vi sono algoritmi e standard, che in genere i programmatori ed i designer di siti conoscono, stabiliti dall’organizzazione internazionale che stabilisce le regole di sviluppo dei siti ecommerce o siti web, vale a dire il W3C (World Wide Web Consortium). Tale indicazioni sono relative, ad esempio, al rapporto ottimale tra il colore dello sfondo della pagina e quello dei testi affinché siano leggibili. Esiste anche un sito in cui è possibile verificare il rispetto di tali standard, inserendo il codice colore del testo del nostro sito comparato con diverse tonalità di sfondo: più prove colore saranno superate positivamente, più si renderà leggibile il testo. Ma non c’è solo questo aspetto, seppure importantissimo da tenere in considerazione.
Condividi questo articolo :
Consigli per un sito veramente accessibile
Partiamo da una constatazione: nella progettazione di un sito, il professionista cui vi dovrete necessariamente rivolgere per avere un lavoro che sia davvero user friendly non sceglierà la grandezza, il colore del testo o lo sfondo in base ai gusti personali del cliente o suoi. D’accordo, ci tenete tantissimo che i colori aziendali, soprattutto quelli del marchio siano ripresi dal sito. Ma ciò non deve mai andare a discapito dell’obiettivo primario del vostro spazio web, cioè dare informazioni a tutti gli utenti nella maniera più leggibile e comprensibile.
Potrebbe essere l’occasione per accorgersi, ad esempio, che il proprio marchio non risponde a questi requisiti e che ha bisogno di un restyling. Vale la stessa indicazione per la scelta del tipo di carattere, come per le parole da usare per creare una corretta etichetta che aiuti il sintetizzatore vocale. Le scelte, più che personali, sono dettate da indicazioni di esperti e possono davvero aiutare anche il vostro cliente con forti difficoltà visive. Se ne accorgerà e vi ringrazierà ripagandovi con l’assoluta fedeltà.
1 – Contrasto di colore adeguato tra lo sfondo e il testo
La determinazione della visibilità del colore e della leggibilità dei testi di un sito si basa su degli algoritmi che riguardano la differenza colore e il Contrast Ratio. Questi due parametri servono per comparare i colori dell’elemento in primo piano con quello di sfondo. Naturalmente si possono trovare online numerosi suggerimenti su come procedere. Il W3C suggerisce ad esempio, di impostare il proprio sito con soglia differenza di luminosità: 125 e soglia differenza colore: 500.
In ogni caso, prima di andare online, un professionista sa che dovrà testare più volte la leggibilità dei contenuti. A questo proposito sono disponibili numerosi tool online che permettono di verificare in maniera preventiva i contrasti in relazione alle principali disabilità visive.
2 – Carattere tipografico di grandezza sufficiente e leggibile
Anche i neofiti sanno che i caratteri tipografici (font, in inglese) non sono tutti uguali. Possiamo grossolanamente suddividerli in due grandi categorie: i font “senza grazie” (avete presente il carattere Arial?), più adatti al Web e i caratteri con “grazie” (come il Times), più eleganti da vedere su carta. Perciò fate molta attenzione al carattere utilizzato, ma anche alla spaziature tra le lettere della stessa parola, tra le parole sulla stessa riga e tra le righe del paragrafo. Per quanto riguarda la grandezza, mai scendere sotto i 14 pt.
3 – Etichettatura corretta delle immagini del sito
Lo screen-reader è lo strumento che ha il compito di rendere leggibile qualsiasi elemento presente in una pagina web, comprese immagini e link. Una buona progettazione, dunque, dovrà prevedere di etichettare tutto con precisione. Cosa significa? Lo sanno i programmatori ed i designer di siti professionisti, ma possiamo intuirlo: si tratta di inserire i tag ALT delle immagini e la relativa descrizione. Ciò vale anche per i link collegati ai pulsanti. In caso di dubbi, è cosa buona e giusta consultare lo spazio web appositamente dedicato e realizzato dall’Unione Italiana dei Ciechi e degli Ipovedenti.
Dicono di noi:
Altri consigli
Naturalmente un buon progettista sa bene quali sono gli elementi di criticità di un sito che si possono migliorare in funzione dell’utilizzo da parte di clienti ipovedenti o non vedenti. Vi suggerirà, ad esempio, di stare molto attenti all’utilizzo di sigle ed acronimi, che lo screen reader legge senza interruzioni anziché lettera per lettera. Perciò è opportuno inserire tra parentesi il significato completo della sigla (cosa che apprezzano anche i lettori senza difficoltà di vista, per altro). Un altro modo per aiutare il lettore è la costruzione di una sitemap semplice, con indicazioni che compaiono solitamente nella parte superiore della pagina, le più chiare possibili (pensiamo a qualcosa come Home > Categoria X > Sottocategoria Y > Articolo Z). Così come nella realizzazione dei form meglio scrivere “Inserisci qui il tuo nome” anziché la semplice voce “Nome” e così via.