ArticoloTrasforma la compassione in azione evitando questi 8 errori di progettazione accessibili

Il design accessibile rispetta l'unicità di tutti gli individui, indipendentemente dall'età e dalle capacità. Inizia con il riconoscere che non tutte le persone sono proprio come te.

Per servire al meglio utenti diversi, è fondamentale comprendere ed entrare in empatia con tutti i tipi di persone. Seguendo le linee guida WCAG 2.0 AA, i contenuti sono accessibili a una gamma più ampia di persone con disabilità, tra cui cecità e problemi di vista, sordità e perdita dell'udito, difficoltà di apprendimento, limitazioni cognitive, movimento limitato, disabilità del linguaggio o fotosensibilità. Per assicurarti di servire ogni utente che visita il tuo sito web, evita questi otto errori di progettazione accessibili.

1. Trappole da tastiera

Alcune persone che usano la tecnologia assistiva si affidano ad azioni visibili sullo schermo. Un buon design, quindi, garantisce che tutti i contenuti relativi alla navigazione siano visibili. Assicurati di ordinare gli articoli in modo logico (in alto a sinistra in basso a destra) per aiutare gli utenti a comprendere il contenuto e fare scelte informate sulla navigazione.

Consigli:

• Contenuto principale: considera di fornire agli utenti un modo per saltare facilmente la navigazione di primo livello per accedere al contenuto principale.
• Modelli dell'interfaccia utente: segui la semantica dei modelli comuni come Toggle, Tabs, Tables, Modal Windows e attributi ARIA.
• Utilizzo al passaggio del mouse: non nascondere il testo o le azioni dietro uno stato al passaggio del mouse. Se un utente che utilizza solo la tastiera non può vedere l'esistenza di un contenuto/pulsanti, non può navigare nella pagina.

Esempio di collegamenti per saltare buoni n. 1

Buoni collegamenti di salto Esempio n. 2

2. Contrasto colore insufficiente

Il contrasto del colore insufficiente influisce sulla capacità delle persone di ricevere informazioni visivamente. Assicurati che ci sia abbastanza contrasto tra il testo e il suo sfondo per assicurarti che il testo sia leggibile. Il rapporto di contrasto tra il testo e lo sfondo del testo dovrebbe essere un minimo di 4,5 a 1. Tuttavia, se il testo ha almeno 24 pixel o 19 pixel in grassetto, il minimo scende a 3 a 1.

Consigli:

• Tavolozze dei colori: sii consapevole dei colori primari. Inoltre, tieni a mente i requisiti di contrasto del colore quando scegli i colori.
• Non fare affidamento solo sul colore: usa combinazioni di forma, colore e testo (non solo uno di per sé) per trasmettere un significato ed essere coerente. Fornisci almeno due indicatori in modo che le persone che non riescono a distinguere facilmente i colori possano ancora capire i tuoi contenuti.
• Eccezioni: testo, immagini di testo, immagini e loghi che non sono necessari per comprendere il significato del contenuto o sono pura "decorazione".

Esempio di contrasto insufficiente

3. Testo nelle immagini

Evitare di utilizzare immagini di testo destinate alla lettura. Usa testo reale con uno stile CSS piuttosto che una presentazione di testo basata su immagini. Nelle situazioni in cui è necessario utilizzare immagini di testo, il testo alternativo deve contenere lo stesso testo presentato nell'immagine.

Consigli:

• Diagrammi, grafici, tabelle: utilizza il testo reale nelle visualizzazioni dei dati. Se il testo reale non è possibile, è essenziale una rappresentazione testuale delle informazioni essenziali veicolate dall'immagine. Es: descrizione lunga o visualizzazione elenco.
• Eccezioni: loghi, elementi di branding e grafica con buone alternative di testo descrittivo.

Esempio di buon testo nell'immagine

4. Stati di messa a fuoco nascosti

Gli stati di messa a fuoco aiutano gli utenti a navigare e capire dove si trovano. Non nasconderli mai. Gli stati di messa a fuoco sono importanti per gli utenti della tastiera. Li aiuta a capire dove si trovano su una pagina. Per testare il tuo sito, prova a scorrere la tua pagina e trova il tuo obiettivo.

Consigli:

• Stati di messa a fuoco: se rimuovi gli stati di messa a fuoco predefiniti, assicurati di sostituirli con qualcosa che funzioni meglio di quello fornito dal tuo browser.
• Stati di input: considera cosa succede alle etichette quando ti focalizzi all'interno di un input.
• Azioni della pagina: definisci chiaramente gli effetti collaterali del focus delle azioni.

Stati di messa a fuoco nascosti

Buoni stati di messa a fuoco

5. Struttura gerarchica confusa

Creare relazioni chiare tra il contenuto percepibile e ciò che può essere determinato programmaticamente. Progetta pagine che abbiano un senso semanticamente in modo che gli sviluppatori possano tradurlo dal progetto al codice e uno screen reader possa determinare la sequenza di lettura corretta.

Consigli:

• Semantica: includi i campi e le etichette obbligatori sui moduli. Tabelle di progettazione con intestazioni di colonna.
• Raggruppamenti logici: raggruppa gli elementi correlati con ampio spazio o colori di sfondo. Presentare le informazioni in sequenza, come diagrammi di processo o istruzioni dettagliate.
• Divulgazione progressiva: design per la manipolazione diretta. Presenta le cose giuste al momento giusto. Esercitare la divulgazione progressiva.
• Orientamento: crea indicazioni coerenti per la navigazione. Usa i titoli per creare punti di riferimento chiari all'interno della pagina.
• Coerenza: presenta cose che sono uguali allo stesso modo.
• Differenziare: differenziare diversi tipi di contenuto.

Cattiva gerarchia

Buona gerarchia

6. Carico cognitivo eccessivo

Comunica chiaramente le informazioni che sono facili da capire. Progettare le informazioni in modo da renderle facili da consumare per coloro che convivono con il disturbo da deficit di attenzione e iperattività (ADHD) e l'autismo o i disturbi dello spettro autistico.

Consigli:

• Sii conciso: usa frasi brevi e segnali visivi per separare le informazioni. Es: elenca i gruppi usando numeri o punti elenco.
• Riduci al minimo il carico cognitivo: crea una narrazione che presenti le informazioni nel posto giusto al momento giusto. Evita di presentare paragrafi densi di informazioni che possono essere scomposti. Evita le misure in fila lunga.

7. Collegamenti ipertestuali indifferenziati

I link sono uno degli elementi più comuni sul web e spesso sono vitali per navigare nei siti web. I collegamenti dovrebbero apparire come collegamenti e nient'altro dovrebbe. Gli utenti potrebbero sentirsi frustrati se provano a fare clic su frasi testuali o grafica che sembrano collegamenti ma non lo sono. I collegamenti dovrebbero avere un senso fuori contesto.

Consigli:

• Sii specifico: usa parole descrittive per i pulsanti invece di una terminologia vaga in modo che il risultato sia prevedibile.
• Collegamenti non sottolineati: il testo del collegamento deve avere un rapporto di contrasto di 3:1 rispetto al testo non del collegamento circostante.
• Non fare affidamento solo sul colore: il collegamento deve presentare un "designatore non di colore" sia al passaggio del mouse che allo stato attivo della tastiera. Es: ombre esterne, scala, transizioni/trasformazioni, cambi di colore o sottolineature.

Collegamenti ipertestuali non validi

Buoni collegamenti ipertestuali

8. Tipografia illeggibile

La maggior parte delle informazioni sui siti Web viene comunicata tramite testo, quindi il testo dovrebbe essere leggibile e leggibile. Questo aiuta le persone ipovedenti a distinguere facilmente i personaggi. Può ridurre lo sforzo di lettura per qualcuno con difficoltà di apprendimento. Usa una tipografia pulita e semplice con una buona spaziatura. Applicare una crenatura e una guida comode per garantire che il testo sia facilmente leggibile.

Consigli

• Concedi agli utenti il ​​controllo: non impedire agli utenti di personalizzare la propria esperienza di lettura modificando la dimensione del corpo della copia in una dimensione del carattere più piccola. Puoi farlo impostando la dimensione del carattere su 100% e utilizzare le dimensioni relative per stabilire la gerarchia tra i titoli. Il testo dovrebbe essere ancora leggibile al 200%.
• Riduci sottolineature, corsivo e maiuscolo: queste lettere sono più difficili da riconoscere e leggere.
• Allinea il testo di formato lungo a sinistra: crea layout coerenti con percorsi lineari che l'occhio deve seguire.

Zoom al 100%

Ridimensiona il tuo testo. Verifica che le tue pagine siano accessibili e utilizzabili per utenti ipovedenti e ipovedenti. Ridimensiona il testo e assicurati che tutto sulla pagina funzioni. Ripeti fino ad arrivare al 200% di zoom. Sembra semplice? È.

Passaggi per controllare la tua tipografia:

1. Apri il browser e ridimensiona il testo al 200%. Fare clic su Visualizza, selezionare Zoom, quindi fare clic su Zoom avanti (Ctrl/Cmd ++) per ingrandire la dimensione del testo.
2. Dai un'occhiata a come ha risposto il contenuto sullo schermo. Tutto il contenuto della pagina dovrebbe essere ancora leggibile e nessuna funzionalità dovrebbe essere persa.
3. Verifica se le interazioni funzionano ancora, se il testo si sovrappone, se il testo importante è stato troncato o se il testo è stato tagliato.

Zoom al 200%

Consigli:

1. Apri il browser e ridimensiona il testo al 200%. Fare clic su Visualizza, selezionare Zoom, quindi fare clic su Zoom avanti (Ctrl/Cmd ++) per ingrandire la dimensione del testo.
2. Dai un'occhiata a come ha risposto il contenuto sullo schermo. Tutto il contenuto della pagina dovrebbe essere ancora leggibile e nessuna funzionalità dovrebbe essere persa.
3. Verifica se le interazioni funzionano ancora, se il testo si sovrappone, se il testo importante è stato troncato o se il testo è stato tagliato.

Risorse

Circa una persona su otto negli Stati Uniti ha una disabilità. Se la definizione viene ampliata per includere coloro che sono moderatamente disabili, quel numero salta a quasi uno su cinque.

L'incapacità di accogliere un pubblico così ampio limita l'impatto positivo che un sito Web può avere sulla tua attività, per non parlare della capacità del tuo marchio di entrare in risonanza con le persone e ispirare convinzione. Costruire un sito web accessibile che sia utilizzabile dal maggior numero di browser e dal maggior numero di persone possibile può aiutare la tua azienda, ma è anche semplicemente la cosa giusta da fare. Quindi abbiamo messo insieme alcune altre risorse sull'argomento.

• Scopri perché è importante che le aziende prendano in considerazione l'accessibilità al web (ed evitino una causa legale).
• Sintonizzati sul Podcast Solving for B° sull'importanza dell'accessibilità al web.

Contrasto di colore

• Web AIM Contrast Checker
• Colorabile Contrast Checker

Struttura

• Estensione per Chrome della mappa dei titoli
• Libreria di modelli di progetto A11Y

Crediti

• Progetto A11Y
• w3.org- WCAG 2.0
• w3.org- Standard e panoramica
• Usabilità.org
• Ricerca sull'accessibilità presso IBM
• Carnegie Museums of PittsburghDisney.com buona gerarchia