In che modo il design eccezionale influisce sull'accessibilità del sito web

Cerchi un punto di partenza nella vasta disciplina dell'accessibilità? Approfondiremo pratiche e strumenti reali che puoi implementare nel tuo processo di progettazione per migliorare i tuoi prodotti digitali rendendoli inclusivi per un maggior numero di utenti.

Che cos'è l'accessibilità?

I siti Web accessibili consentono a una più ampia varietà di utenti di interagire con i contenuti del tuo sito Web in modo semplice. Sia che affrontiamo l'argomento dal punto di vista dell'interfaccia utente o dell'esperienza utente, l'obiettivo è creare un prodotto di qualità adatto a un pubblico diversificato.

Questo pubblico diversificato "si estende a chiunque stia vivendo una disabilità permanente, temporanea o situazionale, ad esempio avere un solo braccio è una condizione permanente, avere un braccio ferito è temporaneo e tenere un bambino in un braccio è situazionale - in ogni caso, il l'utente è in grado di completare le attività con una sola mano. (Avinash Kaur, 2018).

Perché l'accessibilità è importante?

Come designer, è nostra responsabilità assicurarci di progettare in modo accessibile a tutti gli utenti, indipendentemente dalla loro situazione, abilità o contesto. Di conseguenza, il web può essere uno spazio inclusivo per tutti, sia che abbiano una disabilità cognitiva, visiva o fisica.

La creazione di un sito Web accessibile non deve richiedere grandi quantità di budget o modifiche. Poiché non richiede funzionalità o contenuti aggiuntivi, l'accessibilità può essere ottenuta attraverso l'educazione e la consapevolezza all'inizio di un progetto di design.

È anche probabilmente importante per il business: gli studi dimostrano che i siti Web accessibili hanno risultati di ricerca migliori, raggiungono un pubblico più ampio, sono SEO friendly, hanno tempi di download più rapidi, incoraggiano buone pratiche di codifica e hanno sempre una migliore usabilità.

Come raggiungiamo l'accessibilità?

Dovrai apportare alcune modifiche e seguire una struttura per assicurarti di progettare in base a un insieme diversificato di abilità, età e livello di esperienza con i dispositivi.

L'accessibilità è una disciplina autonoma in continua evoluzione per adattarsi ai prodotti digitali. Ma allo stesso modo crescono anche le soluzioni software. Ciò significa che non possiamo coprire tutto nell'argomento, ma se trovi utile questo articolo, possiamo fare una parte 2!

Faremo un tuffo profondo in 5 grandi aree:

1. Contrasto di colore
2. Testo alternato
3. Stati di messa a fuoco
4. Forme
5. Tipografia

Contrasto di colore

Garantire un contrasto cromatico sufficiente tra testo e sfondo aiuta gli utenti che hanno difficoltà a vedere. Ciò interessa un numero di utenti maggiore del previsto e viene spesso ignorato come un problema. Tuttavia, fino a 1 uomo su 12 è daltonico e molti altri ipovedenti o ciechi.

Per cominciare, le linee guida sull'accessibilità impongono che il colore non dovrebbe mai essere l'unico modo per trasmettere informazioni. In altre parole, deve esserci un segnale aggiuntivo per quegli utenti che percepiscono il colore in modo diverso e potrebbero perdere le nostre istruzioni basate sul colore.

Per mantenere un contrasto decente tra testo e sfondo, un buon rapporto da seguire è un minimo di 4,5 a 1. Ciò consente chiarezza per gli utenti con problemi di vista o daltonismo di distinguere tra i due.

Il rapporto di contrasto di 4,5 a 1 aderisce al livello di conformità AA (dei tre livelli: A, AA e AAA) ma questo cambia in base alla dimensione del carattere e al livello di conformità che si desidera ottenere. I caratteri più grandi richiedono un rapporto di contrasto inferiore di soli 3 a 1 se il tipo è di 18 pt (o 14 pt in grassetto).

Questi rapporti minimi non si applicano al testo che si trova all'interno di un logo o di un marchio, ma è utile controllare da soli il rapporto di contrasto utilizzando questo pratico strumento.

Testo alternato

Per gli utenti che accedono al web tramite screen reader, il contenuto visualizzato non è sempre veicolato correttamente. Il testo alternativo (alt) è ciò che lo screen reader utilizza per informare l'utente su quali immagini sono presenti nella pagina.

Questo può essere fatto convertendo il testo alternativo in braille, una descrizione audio o leggendo visivamente il testo. Ciò significa che è importante descrivere accuratamente ciò che sta accadendo nell'immagine per coloro che non possono vederlo.

A volte potrebbe non essere necessario aggiungere il testo alternativo. Ad esempio, potrebbero esserci abbastanza indicatori contestuali che circondano l'immagine o l'immagine non ha altra funzione che estetica.

Stati di messa a fuoco

Molto probabilmente hai già familiarità con gli indicatori di messa a fuoco senza rendertene conto. Gli stati di attivazione sono i contorni (spesso) blu che appaiono quando viene selezionato un elemento, ad esempio collegamenti, menu, pulsanti e campi modulo.

Questi segnalano su quale elemento l'utente è attualmente concentrato quando utilizza la tastiera. Spesso questi indicatori sono visti come antiestetici o come se non servissero a uno scopo, ma in realtà sono molto importanti. Molti utenti sono limitati all'uso della sola tastiera e le persone con problemi di vista che utilizzano utilità per la lettura dello schermo richiedono anche indicatori di messa a fuoco per facilitare la navigazione tra le pagine.

Gli indicatori di messa a fuoco sono un modo semplice per rendere la navigazione della pagina chiara e accessibile con pochissimo sforzo e tuttavia una grande differenza per l'utente. Possono legarsi perfettamente al marchio utilizzando colori appropriati, devono solo essere contrastanti in modo che gli elementi risaltino.

Forme

I moduli possono essere complessi per chiunque, ma quelli con ulteriori problemi di accessibilità possono spesso avere difficoltà quando i moduli sono troppo minimalisti e poco chiari. Di seguito sono elencati alcuni elementi comuni che devono essere affrontati per affrontare l'accessibilità:

• Etichette : l'utilizzo del testo segnaposto come etichetta anziché del testo all'esterno del campo crea confusione poiché il testo scompare quando l'utente inizia a digitare. Omettere indicazioni cruciali per l'utente a favore del minimalismo o dell'estetica è un grave errore da evitare.
• Bordi : qualcosa di semplice come un bordo attorno a un input di testo è importante per gli utenti con disabilità cognitive, quindi è chiaro dove devono fare clic
• Istruzioni aggiuntive : spesso i moduli utilizzano un approccio minimalista nel tentativo di declutterare il design, tuttavia ciò ostacola l'usabilità e quindi l'accessibilità.
• Messaggi di errore : questi dovrebbero essere indicati da più elementi, comunemente si usa il colore ma in aggiunta a questo gli errori dovrebbero essere indicati tramite simboli o testo.
• Revisione : i moduli dovrebbero consentire un periodo di revisione prima dell'invio per consentire all'utente di correggere qualsiasi informazione.

Tipografia

Le informazioni sono più facili da digerire quando non sono ingombranti e troppe in uno spazio. Questo vale anche per i siti web accessibili. Come accennato in precedenza, la dimensione del carattere può alterare i requisiti minimi per il rapporto di contrasto, ma le dimensioni del carattere non devono scendere sotto i 10 pt.

Come puoi vedere, è difficile leggere in 9 pt.

Aumentare la quantità di spazio bianco tra le righe di testo e le singole parole può aiutare gli utenti ipovedenti o affetti da dislessia. La seguente distanza minima garantisce che i requisiti di tali utenti siano soddisfatti:

• Spaziatura delle lettere : x0.12 la dimensione del carattere
• Spaziatura tra parole : x0.16 la dimensione del carattere
• Interlinea: x1.5 la dimensione del carattere
• Spaziatura dei paragrafi : x2 la dimensione del carattere

Conclusione

Sorprendentemente, questi piccoli cambiamenti possono fare una grande differenza per l'accessibilità. Non richiede grandi budget e molto tempo per adattare il tuo sito Web alle Linee guida per l'accessibilità dei contenuti Web, ma può cambiare drasticamente l'esperienza per un utente e quindi aumentare anche la tua attività.

L'aggiunta di questi suggerimenti al processo di progettazione può diventare una seconda natura, aprendo la strada a un futuro di siti Web più accessibili: sta a noi designer.

Se hai bisogno di aiuto con la tua creatività non esitare a contattarci.