Accessibilità nel design rosa

Quando si creano prodotti, l'accessibilità può essere un ripensamento. Comprensibilmente, vogliamo spedire i nostri prodotti velocemente e fornire valore ai nostri utenti. Potremmo pensare che l'accessibilità sia necessaria per i casi limite e quindi non darle la priorità. È bene ricordare che l'Organizzazione mondiale della sanità (OMS) stima che il 16% della popolazione mondiale abbia qualche forma di disabilità (dicembre 2022).
Ignorare una parte così significativa della tua base di utenti semplicemente non crea una buona esperienza utente.
Creare prodotti accessibili è responsabilità di tutti. Designer, sviluppatori, autori di contenuti e chiunque altro sia coinvolto nella creazione di prodotti dovrebbe fare la propria parte e impegnarsi per ottenere un'esperienza migliore per tutti.

Non è sempre facile mantenere un alto livello di accessibilità, ma è decisamente più semplice con un sistema di progettazione. I componenti che abbiamo creato in Pink Design, la libreria UI completamente open source di Appwrite, hanno un livello di accessibilità di AA. Questo è il livello di accessibilità consigliato per la maggior parte dei prodotti.

Per garantire che i nostri prodotti mantengano un alto livello di accessibilità, abbiamo fatto quanto segue:

Usa un contrasto di colore elevato

Il contrasto cromatico potrebbe essere la prima cosa che viene in mente quando si pensa all'accessibilità. Una mancanza di contrasto tra il testo e lo sfondo potrebbe significare che alcune persone non sarebbero in grado o avrebbero difficoltà a leggere il testo. Allo stesso modo, i colori brillanti con elevata luminanza non sono leggibili per gli altri. Il W3C raccomanda un rapporto di contrasto tra testo e sfondo di 4,5 a 1 per il livello di conformità AA.

Non fare affidamento sul colore

Il termine "daltonismo" è spesso usato per descrivere le persone che hanno difficoltà a identificare e distinguere tra determinati colori, ma il daltonismo, l'incapacità di vedere qualsiasi colore, è estremamente raro. Secondo il National Health Service (NHS) del Regno Unito , il daltonismo rosso-verde colpisce 1 uomo su 12 e 1 donna su 200. Le persone con questa carenza di visione dei colori possono avere difficoltà a distinguere tra rossi, arancioni, gialli, marroni e verdi. Potrebbero anche avere difficoltà a distinguere tra sfumature di viola e potrebbero confondere il rosso con il nero.
Allo stesso modo, le persone con deficit della visione dei colori "blu-giallo" possono avere difficoltà a distinguere tra blu, verdi e gialli.

Utilizziamo quattro colori di sistema in Pink Design: rosso, arancione, verde e blu. Ciascuno di questi colori rappresenta uno stato nella console Appwrite: il rosso indica un errore o un pericolo, l'arancione indica un avviso, il verde indica l'esito positivo e il blu indica le informazioni. Conoscendo le difficoltà che i nostri utenti potrebbero incontrare vedendo questi colori, non facciamo affidamento sul colore per rendere comprensibili le informazioni critiche.

Consenti la navigazione da tastiera

Le persone con limitazioni del controllo motorio fine o mani o braccia disabili non saranno in grado di utilizzare un mouse. In Pink Design, forniamo stati distinti per gli elementi interattivi. Progettando stati come focus, hover e active, offriamo la possibilità di navigare tra tutti gli elementi interattivi con una tastiera. Questa non è solo un'esperienza accessibile, ma anche un'esperienza migliore per tutti gli utenti che preferiscono la navigazione da tastiera, inclusa la comunità di sviluppatori di Appwrite.

È possibile migliorare l'accessibilità anche attraverso lo sviluppo. In collaborazione con il nostro team di ingegneri, abbiamo deciso di incorporare quanto segue in Pink Design:

Definisci la dimensione del carattere in REM

I browser hanno una dimensione del carattere predefinita che gli utenti possono modificare tramite le impostazioni del browser. Un pixel è un'unità assoluta per dimensioni e spazi fissi che ignora le impostazioni del browser. Ciò significa che se utilizziamo i pixel e un utente (con o senza problemi di vista) modifica la dimensione del carattere nelle impostazioni del browser, la sua impostazione non influirà sul nostro prodotto. Detto questo, i pixel non dovrebbero causare alcun problema se l'utente ingrandisce, ma non facciamo supposizioni sulle preferenze degli utenti. Questo è il motivo per cui abbiamo deciso di definire la dimensione del carattere in REM, che è un'unità relativa.

Consenti agli utenti di ridurre il movimento

Non c'è dubbio che le animazioni siano una bella aggiunta a ogni prodotto, ma le animazioni possono anche distrarre le persone. In alcuni casi, le animazioni possono causare capogiri, vertigini o crisi epilettiche. Gli utenti sensibili al movimento potrebbero scegliere di ridurre il movimento nelle impostazioni del proprio sistema operativo. In questo caso, dovremmo saltare l'animazione per loro. In Pink Design, abbiamo deciso di creare una grande animazione per mostrare la funzionalità della libreria sulla landing page. L'animazione dura 10 secondi ed è la prima cosa che vedi sulla pagina. Si avvia immediatamente quando la pagina viene caricata, ma se "riduci movimento" è abilitato nel sistema operativo, l'animazione salta alla fine.

In Appwrite, l'accessibilità è sicuramente uno sforzo di squadra. Stiamo tutti lavorando per mantenere e migliorare l'esperienza accessibile nei nostri prodotti, ed è sempre nelle nostre menti. L'utilizzo di componenti accessibili ci aiuta a migliorare il nostro livello di accessibilità, ma è importante ricordare che esistono molti tipi di disabilità. Abbiamo lavorato per migliorare l'esperienza per gli utenti con disabilità visive, motorie e cognitive e continueremo a lavorare per migliorare ulteriormente.

Se non l'hai già fatto, sfoglia il Pink Design GitHub Repository o dai un'occhiata alla nostra Guida introduttiva per utilizzare Pink Design nei tuoi progetti o quando contribuisci ad Appwrite.