Sappiamo che è buona norma progettare in modo adattabile per offrire la migliore esperienza multi-dispositivo, ma il design responsive è vantaggioso anche per l'accessibilità.
Prendiamo in considerazione un sito come Udacity:
Un utente ipovedente che ha difficoltà a leggere caratteri di piccole dimensioni potrebbe ingrandire la pagina, magari fino al 400%. Poiché il sito è progettato in modo responsive, l'interfaccia utente si riorganizza per l'"area visibile più piccola" (in realtà per la pagina più grande), che è ottima per gli utenti desktop che richiedono l'ingrandimento dello schermo e anche per gli utenti di screen reader mobile. Tutti ci guadagnano. Ecco la stessa pagina ingrandita al 400%:
Infatti, solo progettando in modo adattabile, soddisfacciamo la regola 1.4.4 del controllo elenco di WebAIM, che afferma che una pagina "… deve essere leggibile e funzionale quando le dimensioni del testo vengono raddoppiate".
Esaminare tutto il design responsive non rientra nell'ambito di questa guida, ma di seguito sono riportati alcuni punti importanti che miglioreranno la tua esperienza adattabile e daranno agli utenti un accesso migliore ai tuoi contenuti.
Utilizzare il meta tag viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
L'impostazione width=device-width corrisponde alla larghezza dello schermo in pixel indipendenti dal dispositivo e l'impostazione initial-scale=1 stabilisce una relazione 1:1 tra i pixel CSS e i pixel indipendenti dal dispositivo.
In questo modo, il browser adeguerà i contenuti alle dimensioni dello schermo,
in modo che gli utenti non vedano solo un mucchio di testo compresso.
Per scoprire di più, consulta la sezione Imposta le dimensioni per la visualizzazione.
Consenti agli utenti di aumentare lo zoom
È possibile utilizzare il meta tag viewport per impedire lo zoom impostando maximum-scale=1 o user-scaleable=no.
Evita di farlo e lascia che siano gli utenti ad aumentare lo zoom se necessario.
Progettare con flessibilità
Evita di scegliere come target dimensioni dello schermo specifiche e utilizza una griglia flessibile, apportando modifiche al layout in base ai contenuti. Come abbiamo visto con l'esempio di Udacity sopra, questo approccio garantisce che il design risponda se lo spazio ridotto è dovuto a uno schermo più piccolo o a un livello di zoom più elevato.
Puoi scoprire di più su queste tecniche nell'articolo Nozioni di base sul responsive web design.
Utilizza unità di misura relative per il testo
Per ottenere il massimo dalla griglia flessibile, usa unità relative come em o rem per elementi come le dimensioni del testo, anziché valori in pixel. Alcuni browser supportano il ridimensionamento del testo solo nelle preferenze utente. Se utilizzi un valore in pixel per il testo, questa impostazione non influisce sulla tua copia. Se, tuttavia, hai utilizzato unità relative in tutto il sito, il testo del sito verrà aggiornato in modo da riflettere la preferenza dell'utente.
In questo modo, l'intero sito verrà riorganizzato quando l'utente aumenta lo zoom, creando l'esperienza di lettura necessaria per utilizzare il tuo sito.
Evita di disconnettere la visualizzazione visiva dall'ordine di origine.
Un visitatore che utilizza i tasti Tab per spostarsi nel tuo sito con la tastiera seguirà l'ordine dei contenuti nel documento HTML. Quando utilizzi metodi di layout moderni come Flexbox e Grid, è facile fare in modo che il rendering visivo non corrisponda all'ordine dell'origine. Ciò può causare salti sconcertanti nella pagina per chi si sposta utilizzando la tastiera.
Assicurati di testare il design a ogni punto di interruzione scorrendo i contenuti con i tasti Tab. Il flusso della pagina ha ancora senso?
Scopri di più sulla disconnessione dalla fonte e dal display visivo.
Fai attenzione agli indizi spaziali
Quando scrivi la microcopia, evita di utilizzare un linguaggio che indichi la posizione di un elemento nella pagina. Ad esempio, fare riferimento alla navigazione "a sinistra" non ha senso in una versione mobile se la navigazione si trova nella parte superiore dello schermo.
Assicurati che i target dei tocchi siano abbastanza grandi sui dispositivi touchscreen
Sui dispositivi touchscreen, assicurati che i target di tocco siano sufficientemente grandi da essere facilmente attivabili senza toccare altri link. Le dimensioni ideali per qualsiasi elemento toccabile sono 48 pixel. Leggi ulteriori indicazioni sui target di tocco.