Guida del designer alle nozioni di base sulla progettazione dell'accessibilità Web

Il Web dovrebbe essere un luogo in cui tutti possono accedere agli stessi contenuti da qualsiasi parte del mondo. Le tecniche di risposta hanno fatto molto per design indipendenti dal dispositivo. Ma per quanto riguarda design agnostico di accessibilità?

L'accessibilità al web esiste da anni, ma la sua implementazione richiede nuovi progressi nella tecnologia e nello sviluppo del web. Molti sviluppatori vogliono aiutare, ma è difficile capire come progettare per l'accessibilità, perché ci sono così tante parti mobili. Ciò include testo ad alto contrasto, pagine audio per non vedenti, supporti ottimizzati e fallback per browser non JS / CSS.

In questo post, tratterò le basi del design dell'accessibilità, di cosa si tratta, di cosa si propone di risolvere e dei passi che è possibile intraprendere per iniziare. Nota, questo è un argomento incredibilmente dettagliato e occorreranno mesi o anni di pratica per comprendere appieno. Ma i vantaggi valgono la pena, e tutti i tuoi progetti web lasceranno ad ogni visitatore un'impressione duratura di contenuti accessibili.

Introduzione all'accessibilità

In generale, l'accessibilità è l'idea di costruire contenuti in modo tale può essere consumato da chiunque. Questo può includere non vedenti che non possono leggere, e può includere persone con disabilità fisiche che non possono usare un mouse o una tastiera (o entrambi).

Ma può anche includere persone con lievi mancanze in visione. Potrebbe includere persone con dislessia o problemi di comprensione della lettura. In effetti, l'idea di “accessibilità al web” include ogni possibile menomazione che potrebbe influire sul modo in cui qualcuno interagisce o consuma un sito web.

Forse ancora più importante è ciò che l'accessibilità al web può offrire, come descritto qui in una definizione di Wikipedia:

Tuttavia, Anne Gibson sostiene nel suo post di List Apart che la definizione di Wikipedia è troppo vaga, e non lo è appena sulle persone con disabilità. Si tratta davvero tutti In rete da tutto il mondo potrebbe non avere l'accesso ottimale a Internet.

Molti sviluppatori pensano che l'accessibilità sia solo per i non vedenti che non sanno leggere. Ma ci sono in realtà quattro categorie principali di accessibilità web:

Visivo - ipovisione o scarsa / nessuna vista
uditorio - non udenti o sordi
conoscitivo - problemi di comprensione o di consumo di informazioni
Il motore - problemi di accessibilità fisica che potrebbero richiedere dispositivi di input speciali come tastiere o programmi di comando vocale

Queste categorie hanno ciascuna tecniche estese cambiando altrettanto rapidamente quanto gli standard web. Ma c'è un senso di stabilità con questi standard ratificati nella WCAG (Linee guida per l'accessibilità dei contenuti Web).

Alcuni siti web, come le istituzioni governative sono obbligate per legge a seguire queste linee guida. Si applicano a livello internazionale attraverso il W3C.

Diamo un'occhiata alla burocrazia che si cela dietro l'accessibilità al web e poi ci immergiamo in alcuni suggerimenti di design applicabili.

Il W3C e Design accessibile

ce ne sono un bel pò acronimi relativi all'accessibilità web. Questi possono essere complicati se sei nuovo di zecca sull'argomento, ma una volta semplificato spero che abbiano più senso.

W3C (World Wide Web Consortium) - Un gruppo internazionale che definisce gli standard Web per protocolli, lingue e normative. Tutte le linee guida ufficiali sull'accessibilità rientrano in questa organizzazione.
WAI (Web Accessibility Initiative) - Un programma ufficiale che copre tutto ciò che riguarda l'accessibilità. Questo termine generico contiene tutte le regole, le linee guida e le tecniche per l'accessibilità moderna.
WCAG (Linee guida per l'accessibilità del contenuto Web) - Un gruppo di norme e regole per aiutare i progettisti a classificare i propri siti Web in base al livello di accessibilità.
ARIA (Applicazioni Internet Rich accessibili) - Uno standard specifico che definisce come creare applicazioni ricche accessibili basate su JavaScript / Ajax e tecnologie simili. Leggi di più su questo in questo post di Anna Monus.

Altre linee guida esistono sotto l'ombrello WAI, tra cui UAAG per i programmi utente e UN TAG per gli strumenti di authoring web. Per ora, dovresti essere più interessato ai suggerimenti del WAI e alle linee guida del set di regole WAI sotto il nome WCAG.

Una grande risorsa per imparare di più è questo post del W3C sulle disabilità, che racconta storie di come le persone disabili accedono a Internet. Può essere difficile capire tutti i problemi complessi, per non parlare di come risolverli. Ma la fonte migliore proviene da persone che affrontano quotidianamente questi problemi.

Un altro argomento importante che dovresti capire è la conformità alle WCAG. Questo si riferisce a il livello di accessibilità di un sito Web coprendo un'ampia varietà di fattori. I livelli sono basati sulla conformità con un sistema di classificazione di A, AA e AAA. Puoi verificarlo con uno strumento di verifica dell'accessibilità web. Il punteggio migliore è AAA.

Per ulteriori informazioni su queste linee guida, consultare l'articolo Introduzione a Understanding WCAG 2.0 del W3C. Dai anche un'occhiata a questi link correlati per maggiori dettagli:

WCAG 2.0 semplificato
Sezione 508 Prestazioni WCAG

Passi al design accessibile

Consiglio vivamente di visitare il sito web del progetto A11Y per suggerimenti pratici sull'accessibilità. A11Y (che è anche un numeronimo) è un progetto open source gratuito ospitato su GitHub, offrendo tecniche per il web design accessibile.

Puoi sfogliare la loro checklist di elementi di accessibilità, o anche un mucchio di modelli di design per elementi come dropdown, tab, fisarmoniche, pulsanti e finestre modali (tra gli altri oggetti).

È difficile imparare tutte queste cose e implementarle allo stesso tempo. Prendilo passo dopo passo ed essere disposto a ricercare di più se ti confondi.

Dai un'occhiata agli how-to e ai suggerimenti rapidi di A11Y per iniziare. Ti imbatterai in suggerimenti specifici come i link di passaggio al contenuto e le combinazioni di colori ad alto contrasto. Queste tecniche hanno ognuna il proprio livello di dettaglio, quindi l'implementazione riguarda principalmente i test per vedere cosa funziona.

Considera gli utenti non vedenti che potrebbero utilizzare un lettore di contenuti automatico. Potrebbero anche avere un traduttore audio o persino una tastiera speciale per navigare sul web con i tasti anziché con il mouse. Ecco perché corretto codice HTML semantico (dare un'occhiata a questo articolo) è così importante con proprietà come tabindex e chiave di accesso.

Se vuoi immergerti, prova a prendere in considerazione un tema pronto per l'accessibilità. Puoi studiare l'architettura e personalizzare il design per adattarlo al tuo progetto.

Strumenti di test di accessibilità

Se vuoi iniziare, scegli un'area di accessibilità e provalo. Quindi puoi utilizzare gli strumenti di test per misurare il tuo livello di successo.

Vale la pena ricordare che questo processo può essere frustrante. C'è così tanto da considerare e le linee guida WCAG sono così difficili da capire che potresti finire con il sovraccarico di informazioni.

L'importante è continuare a muoverti. Scegli un'area di accessibilità e falla concentrare. Quindi utilizza questi strumenti per aiutarti a modificare e migliorare il tuo lavoro.

Ad esempio, potresti provare a lavorare con le specifiche di contrasto delle WCAG su migliorare la leggibilità. Una volta scelti i colori, usa questo controllo del rapporto di contrasto gratuito per vedere se lavorano insieme.

Sfortunatamente le linee guida della WCAG 2.0 sono così confuse che potresti avere difficoltà a comprendere i requisiti. Ma più provi, più imparerai e più capirai.

Per testare un sito già online, consulta WAVE. È un correttore visivo gratuito che visualizza errori, avvisi, problemi di contrasto e altre specifiche di un sito web. Otterrai una vista visiva e un elenco di problemi nella barra laterale.

C'è un'altra app gratuita sul sito di Cynthia Says che può controllare i siti web per le valutazioni di successo WCAG di A, AA, AAA, e sezione 508 per la conformità del governo.

E se sei in open source dai un'occhiata a questi strumenti di test di accessibilità gratuiti su GitHub.

HTML CodeSniffer
Strumento di test di accessibilità automatizzato
Validatore WCAG

Componenti aggiuntivi del browser

I componenti aggiuntivi del browser probabilmente forniscono i metodi più rapidi e facili per i test di accessibilità. È possibile eseguire questi da qualsiasi computer su qualsiasi sito Web per ottenere risultati davvero utili.

AInspector per Firefox è considerato un must per l'accessibilità. Questo controlla tutto, ed è molto più approfondito rispetto al tester WAVE.

Gli utenti di Mozilla potrebbero anche piacere al WCAG Contrast Checker, che è anche un componente aggiuntivo gratuito.

Gli utenti di Chrome non hanno AInspector, ma hanno gli Strumenti per gli sviluppatori di accessibilità creati ufficialmente da Google. Ciò aggiunge ulteriori strumenti nella finestra di ispezione per il controllo delle linee guida di accessibilità.

Gli utenti di Chrome dispongono anche di controlli della luminosità per il contrasto del colore e alcune altre estensioni gratuite.

Purtroppo non ho trovato molto per gli utenti di Safari, ma ho trovato un'estensione per Opera che controlla la conformità alle WCAG 2.0. Se sei disposto a cercare su Google con difficoltà, potresti trovare altri strumenti là fuori.

Ulteriori letture

Se stai seriamente imparando l'accessibilità al web, preparati per una lunga strada. Non è facile ma è molto appagante.

A questo punto dovresti capire di più sull'effettiva definizione dell'accessibilità del web, sul perché esiste e sui dettagli minori di ciò che gli sviluppatori sono tenuti a fare per migliorare i loro siti web. Il prossimo passo è un'ulteriore ricerca e pratica per integrare questi principi nel tuo flusso di lavoro.

Dai un'occhiata ai seguenti post per maggiori informazioni e assicurati di consultare le linee guida WCAG se vuoi sapere direttamente dalla fonte.

Come migliorare l'accessibilità della tabella HTML con il markup
Design accessibile per utenti con disabilità
6 suggerimenti per migliorare l'accessibilità del sito
Assicurati che il tuo sito sia accessibile ai non vedenti