Detto ci\u00f2, nel profondo, sono una segreta idealista. Voglio che tutto funzioni bene per tutti ed \u00e8 da qui che scaturisce la mia ossessione per l’accessibilit\u00e0.<\/p>\n
L’accessibilit\u00e0 di chi, per\u00f2?<\/h2>\n
L’accessibilit\u00e0 non include solo il miglioramento dell’accesso alle persone con difficolt\u00e0 visive, uditive, fisiche, di parola, cognitive, del linguaggio, dell’apprendimento e neurologiche: ha un impatto su tutti noi<\/a>. Ricordate che oltre a quelli che ne sono affetti in maniera permanente, molte pi\u00f9 persone hanno difficolt\u00e0 temporanee a causa di una ferita o di effetti ambientali. L’accessibilit\u00e0 non \u00e8 una questione di nicchia: \u00e8 una questione che riguarda tutti.<\/p>\n Ci sono molte utili linee guida per l’accessibilit\u00e0 nelle Web Content Accessibility Guidelines (WCAG) 2.0<\/a>, ma sebbene il W3C stia lavorando<\/a> per meglio affrontare i complessi bisogni di utenti neurodiversi<\/a>, non ci sono soluzioni semplici. Come gestiamo i bisogni di accessibilit\u00e0 per cui non ci sono risposte definitive? E cosa succede se la soluzione per un gruppo di persone lede un altro gruppo?<\/em><\/p>\n Questa \u00e8 una grossa domanda ed \u00e8 vicina al mio cuore. Sono dislessica e una delle raccomandazioni che ho trovato estremamente utili per ridurre lo stress visivo \u00e8 il basso contrasto tra il testo e il colore di sfondo. Questo, per\u00f2, significa che spesso non soddisfiamo i requisiti di accessibilit\u00e0 per le persone che hanno disabilit\u00e0 visive<\/a>. Una volta che la si esamina bene, ci si rende conto che l’accessibilit\u00e0 ha piccole e grandi conflittualit\u00e0 un po’ ovunque. Considerate che:<\/p>\n Potreste fare l’assunzione che le persone che hanno una disabilit\u00e0 temporanea o a lungo termine sfruttino loro stesse le medesime feature di accessibilit\u00e0 del browser, ma vi sbagliereste. Gli utenti con difficolt\u00e0 minori o infrequenti potrebbero non aver nemmeno scoperto quei workaround.<\/p>\n Con ogni cambiamento che facciamo, abbiamo bisogno di controllare continuamente che non intralci l’esperienza di qualcun altro. Per farvi comprendere meglio, lasciate che vi racconti una storia sui font.<\/p>\n<\/div>\n In Wellcome<\/a>, stavamo sviluppando contemporaneamente un nuovo brand e il redesign del nostro sito web. Questo nuovo brand doveva riflettere le cose meravigliose che facciamo in Wellcome, una grande organizzazione no profit che supporta scienziati e ricercatori. Volevamo dipingere un’immagine di un’organizzazione energica che cerca nuovi talenti e rappresenta l’ampia ricerca contemporanea. E, ovviamente, dovevamo fare tutto questo senza compromessi con l’accessibilit\u00e0. Come avremmo potuto approcciare al meglio un rebrand attraverso le lenti dell’inclusione?<\/p>\n Per farlo, abbiamo deciso di rendere il pi\u00f9 trasparente possibile il nostro processo di design. Il design non \u00e8 un’arte oscura: \u00e8 una serie di decisioni. Condividere presto e spesso porta il beneficio del feedback e permette a noi di vedere il lavoro da prospettive diverse. Offre anche l’opprtunit\u00e0 di documentare e comunicare le decisioni di design.<\/p>\n Quando abbiamo cominciato a mostrare il nuovo sito web a varie persone, alcune di loro hanno dato dei feedback molto specifici sul carattere tipografico che avevamo scelto. Abbiamo cos\u00ec capito che il nostro nuovo font per i titoli, Progress Two<\/a>, avrebbe potuto essere molto meno che l’ideale per i lettori con la dislessia. Mi si \u00e8 spezzato il cuore. Da dislessica, mi sono sentita come se avessi deluso i miei compagni.<\/p>\n La mia intera carriera ruotava attorno all’adozione di accessibilit\u00e0, leggibilit\u00e0 e chiarezza<\/a>. Avevo lavorato al nuovo sviluppo del sito per pi\u00f9 di un anno. Con chiarezza e semplicit\u00e0 come principi guida, stavamo mettendo da parte il gergo, il testo piccolo e illeggibile e le molecole decorative. <\/p>\n E adesso questo. Stavamo davvero per scegliere un carattere che avrebbe disfatto tutto il nostro duro lavoro e avrebbe reso difficile la lettura per alcune persone? Dopo un attimo di panico mi sono messa a fare delle ricerche.<\/p>\n<\/div>\n La risposta breve \u00e8: non c’\u00e8 una risposta corretta. Esiste una variet\u00e0 sconcertante di articoli di ricerca spesso contraddittori tra loro cos\u00ec come ho scoperto che esistono aziende che cercano di vendere soluzioni \u201ca prezzi ragionevoli\u201d che non risolvono necessariamente alcunch\u00e9.<\/p>\n Thomas Bohm fa un’utile panoramica dei caratteri che vengono facilmente mal interpretati<\/a> e la Dyslexia Association (BDA) ha pubblicato un elenco di linee guida per caratteri dyslexia-friendly<\/a>. Le linee guida della BDA sui caratteri tipografici hanno praticamente eliminato tutti i font che avevamo sulla nostra breve lista. Anche caratteri popolari come Arial e Helvetica non riescono a spuntare tutti i box sulla lista della BDA, sebbene i sans serif pi\u00f9 comuni tendono ad andare bene nei test, stando ad alcuni studi (PDF)<\/a>.<\/p>\n E non \u00e8 solo la dislessia ad essere sensibile alla tipografia: recentemente, c’\u00e8 stato un partecipante ad un nostro test di usabilit\u00e0 che ha spiegato che alcune persone nello spettro dell’autismo hanno anch’esse difficolt\u00e0 con certi font. E l\u00ec sta il problema: c’\u00e8 una grande variet\u00e0 all’interno della neurodiversit\u00e0. Quello che funziona per me non funziona per chiunque abbia la dislessia, non tutti nello spettro dell’autismo hanno problemi con i font, ma alcuni li hanno eccome.<\/p>\n Sulle prime, la mia ricerca mi ha scoraggiato e ne sono stata sopraffatta. La cosa carina delle linee guida, per\u00f2, \u00e8 che danno un punto di partenza.<\/p>\n<\/div>\n Alcune persone trovano utili i font progettati specificatamente per la dislessia, ma non c’\u00e8 una soluzione unica per tutti<\/a>. Personalmente, trovo difficile leggere un font come Open Dyslexic<\/a>: dal momento che il nostro obiettivo era di essere quanto pi\u00f9 inclusivi possibile, abbiamo alla fine deciso che Open Dyslexic non era la scelta giusta per Wellcome. L’approccio pi\u00f9 pratico (e universale) sarebbe stato di costruire un sito standard-compliant che avrebbe permesso agli utenti di sovrascrivere gli stili con i loro font e\/o colori preferiti<\/a>. E in realt\u00e0, gli utenti dovrebbero sempre essere in grado di sovrascrivere gli stili. Ma sebbene la personalizzazione sia grandiosa se sapete cosa funziona per voi, nella mia esperienza (in qualit\u00e0 di persona a cui \u00e8 stata diagnosticata la dislessia piuttosto in l\u00e0 negli anni), non ho sempre saputo perch\u00e9 qualcosa era difficile, n\u00e9 tantomeno cosa avrebbe potuto essermi d’aiuto. Volevo vedere se ci fosse qualcosa in pi\u00f9 che avremmo potuto fare per i nostri utenti.<\/p>\n Mariane Dear<\/a>, la nostra senior graphic designer, stava gi\u00e0 negoziando con il type designer (Gareth Hague<\/a> di Alias) delle modifiche di alcuni aspetti di Progress Two. E se potessimo incorporare alcune delle raccomandazioni della BDA? E se potessimo creare qualcosa che sembri unico e memorabile ma pi\u00f9 dyslexia-friendly? Sarebbe fantastico. E questo \u00e8 quello che ci siamo messi a fare.<\/p>\n<\/div>\n Quando ho visto Progress Two per la prima volta, non mi piaceva particolarmente, ma ho dovuto ammettere che soddisfaceva le aspirazioni di fiducia ed energia del nostro progetto di rebranding. E sebbene all’inizio non lo amassi, penso che la nostra nuova versione personalizzata, Wellcome Bold, sia \u201cmaturata\u201d senza perdere la sua personalit\u00e0 unica e alla fine me ne sono innamorata.<\/p>\n Abbiamo usato la checklist della BDA come punto di partenza per analizzare e gestire la leggibilit\u00e0 dei caratteri e come potevano essere migliorati.<\/p>\n Se la lettera maiuscola I<\/em>, la minuscola l<\/em> e il numero 1<\/em> sono troppo simili, alcuni lettori potrebbero confondersi. Abbiamo scoperto che la lettera maiuscola I<\/em> e la minuscola l<\/em> di Progress Two non erano sufficientemente diverse, quindi Hague ha aggiunto un piccolo uncino alla fine della l<\/em>.<\/p>\n In alcuni caratteri, particolarmente se non sono impostati bene, pu\u00f2 sembrare che la r<\/em> e la n<\/em> insieme sembri formare una m<\/em><\/a>: per esempio, modern<\/em> potrebbe essere letto come modem<\/em>. Interrompere il flusso tra le due forme le differenzia meglio.<\/p>\n I counter<\/em> sono le aperture nel mezzo dei caratteri. In generale, pi\u00f9 grandi i counter, pi\u00f9 distinte le lettere.<\/p>\n Dal momento che alcune persone con la dislessia percepiscono le lettere come rovesciate o speculari, la DBA raccomanda che la b<\/em> e la d<\/em> e la p<\/em> e la q<\/em> siano facilmente distinguibili.<\/p>\n La maggior parte dei lettori non legge lettera per lettera, ma organizzando i caratteri in parole dalle forme familiari<\/a>. Abbiamo modificato Progress Two non solo per rendere pi\u00f9 semplici le cose per i lettori dislessici: l’abbiamo fatto come parte di un processo di design inclusivo pi\u00f9 ampio. Volevamo rendere centrale nei nostri principi di design l’accessibilit\u00e0, cos\u00ec da poter creare un’esperienza pi\u00f9 semplice per tutti.<\/p>\n<\/div>\n Nel corso dei nostri test di usabilit\u00e0, abbiamo avuto la fortuna di poter lavorare ad ogni giro con partecipanti con bisogni di accessibilit\u00e0, inclusi individui con dislessia, alcuni nello spettro dell’autismo e utenti di screen reader.<\/p>\n Una volta che abbiamo cominciato ad introdurre cambiamenti, eravamo ansiosi di essere sicuri che ci stessimo dirigendo nella direzione giusta. Nancy Willacy<\/a>, la nostra lead user experience practitioner, ha suggerito che un buon modo per avere un feedback su una qualsia questione urgente \u00e8 di chiedere a un gran numero di partecipanti di prendere parte a un sondaggio. Il media team ci ha aiutato twittando la nostra survey a un numero di associazioni no profit finalizzate alla dislessia, disprassia, autismo e ADHD e le associazioni no profit sono state cos\u00ec gentili da ritwittarci ai loro followers.<\/p>\n Sebbene siamo consci che il nostro test fosse di tipo sbrigativo, non abbiamo ricevuto alcun feedback che indicasse una qualche problematica critica, il che ci ha rassicurato sul fatto che ci stessimo muovendo nella direzione giusta. I partecipanti al sondaggio avevano una leggera preferenza per la versione aggiustata di Progress Two rispetto a Helvetica (abbiamo scelto un sans serif familiare come base). La versione non modificata si \u00e8 classificata ultima.<\/p>\n<\/div>\n Anche se non avete un type designer amichevole con cui collaborare per sistemare i font che avete scelto, potete ancora fare molto per essere tipograficamente accessibili.<\/p>\n Quando selezionate un carattere tipografico, cercate lettere che siano chiare e distinte.<\/p>\n Pensate attentamente agli spazi tra, attorno e all’interno delle lettere e degli insiemi di parole.<\/p>\n Le parole che usate sono tanto importanti quanto quello che ci fate.<\/p>\n No.<\/p>\n Non c’\u00e8 un carattere perfetto. Sebbene abbiamo lavorato duro per migliorare l’esperienza del sito Wellcome, alcune persone combattono ancora con il nostro font personalizzato per i titoli e con il font stack Helvetica, Arial, sans-serif che stiamo usando per il body. Per quanto ci proviamo, alcune persone potrebbero dover sovrascrivere i default e scegliere la combinazione di font e colori che funziona meglio per loro. Possiamo rispettare ci\u00f2 creando siti che permettano modifiche senza malfunzionamenti.<\/p>\n Il problema nell’aspettarsi la perfezione subito \u00e8 che si pu\u00f2 essere tentati dal seguire una strada sicura, dalla scelta di soluzioni provate e testate, ma darci spazio per testare e rifinire ci offre anche la libert\u00e0 di prenderci dei rischi e di provare approcci originali.<\/p>\n Metterci in queste situazioni pu\u00f2 farci sentire a disagio, ma Wellcome vuole trovare ricercatori che hanno grandi idee e la sfrontatezza di prendersi grossi rischi. Quindi, quelli di noi che costruiscono il sito dovrebbero fare lo stesso? S\u00ec, magari faremo degli errori, ma impareremo da questi. Se avessimo scelto un carattere sicuro per il nostro font dei titoli non avremmo fatto quei discorsi, non avremmo fatto le ricerche che ci hanno condotto a fare cambiamenti, non avremmo scoperto nuovi problemi che non erano saltati fuori in alcuna delle nostre ricerche.<\/p>\n Il processo ha avviato un gran dibattito in Wellcome, che ha aperto le porte a delle opportunit\u00e0 interessanti. In futuro, non sar\u00f2 cos\u00ec riluttante ad osare a provare nuove cose.<\/p>\n Eleanor Ratliff chiede: \u201cCome gestiamo i bisogni di accessibilit\u00e0 per cui non ci sono risposte definitive?\u201d. A volte arriviamo a una soluzione che aiuta un gruppo di persone solo per scoprire che quella stessa soluzione lede l’esperienza di un altro gruppo. Attraverso il prisma della scelta del carattere tipografico, Ratliff racconta come insieme al suo team abbia gestito il problema del gioco della talpa dell’accessibilit\u00e0 per un progetto di rebranding.<\/p>\n","protected":false},"author":818,"featured_media":7000815,"comment_status":"open","ping_status":"open","template":"","categories":[245,165,275],"tags":[],"coauthors":[496],"class_list":["post-688","article","type-article","status-publish","has-post-thumbnail","hentry","category-accessibilita","category-numero-187-18-gennaio-2017","category-tipografia-web-font"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=688"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000815"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=688"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
Un nuovo font per un nuovo brand<\/h2>\n
Quindi, cosa rende un carattere leggibile?<\/h2>\n
Progresso<\/h2>\n
Welcome, Wellcome Bold<\/h2>\n
Illusione numero 1#section6<\/a><\/h3>\n
![\"Illustrazione](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/01\/ratliffe-fig-01.png\")
La maiuscola I<\/em>, la minuscola l<\/em> e il numero 1<\/em> mostrano in che modo Progress Two si sia evoluto in Wellcome Bold. (Tutte le illustrazioni dei glifi sono di Eleanor Ratliff.)<\/p>\nModern modem#section7<\/a><\/h3>\n
![\"Illustrazione](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/01\/ratliffe-fig-02.png\")
Da Progress Two a Wellcome Bold: le minuscole r<\/em> e n<\/em> sono state modificate per impedire che i due glifi si unissero quando posti uno accanto all’altro.<\/p>\nAperture#section8<\/a><\/h3>\n
![\"Illustrazione](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/01\/ratliffe-fig-03.png\")
Counter evidenziati nelle minuscole b<\/em>, a<\/em>, e<\/em>, o<\/em> e q<\/em> di Wellcome Bold.<\/p>\nSpecularit\u00e0#section9<\/a><\/h3>\n
![\"Illustrazione](\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2017\/01\/ratliffe-fig-04.png\")
Le minuscole d<\/em> e b<\/em> sono state modificate per renderle pi\u00f9 facilmente distinguibili in Wellcome Bold.<\/p>\nForma delle parole#section10<\/a><\/h3>\n
Testate, testate e testate ancora<\/h2>\n
Chiunque pu\u00f2 farlo<\/h2>\n
Tipo#section13<\/a><\/h3>\n
\n
Spazio#section14<\/a><\/h3>\n
\n
Parole#section15<\/a><\/h3>\n
\n
Quindi \u00e8 tutto a posto, giusto?<\/h2>\n
\n
Perfezione pragmatica<\/h2>\n
Risorse aggiuntive<\/h2>\n
\n