Sappiamo che è una buona idea progettare in modo reattivo per offrire la migliore esperienza multi-dispositivo, ma è anche utile per l'accessibilità.
Prendi in considerazione un sito come Udacity:
Un utente ipovedente che ha difficoltà a leggere caratteri piccoli potrebbe aumentare lo zoom della pagina, magari fino al 400%. Poiché il sito è progettato in modo reattivo, l'interfaccia utente si riorganizza in base all'"area visibile più piccola" (in realtà per la pagina più grande), il che è ottimo per gli utenti di computer che richiedono l'ingrandimento dello schermo e anche per gli utenti di screen reader per dispositivi mobili. Tutti ci guadagnano. Ecco la stessa pagina ingrandita al 400%:
Infatti, semplicemente con una progettazione reattiva, stiamo rispettando la regola 1.4.4 dell'elenco di controllo WebAIM, secondo la quale una pagina "... deve essere leggibile e funzionale quando la dimensione del testo viene raddoppiata".
Esamineremo l'intero ambito del design adattabile non rientra nell'ambito di questa guida, ma di seguito puoi trovare alcuni importanti concetti che andranno a vantaggio della tua esperienza di utilizzo e offriranno agli utenti un migliore accesso ai tuoi contenuti.
Utilizzare il meta tag dell'area visibile
<meta name="viewport" content="width=device-width, initial-scale=1.0">
L'impostazione width=device-width corrisponderà alla larghezza dello schermo nei pixel indipendenti dal dispositivo, mentre l'impostazione initial-scale=1 stabilisce una relazione 1:1 tra i pixel CSS e i pixel indipendenti dal dispositivo.
In questo modo indichi al browser di adattare i contenuti alle dimensioni dello schermo,
in modo che gli utenti non vedano solo una serie di testo compresso.
Per saperne di più, consulta Ridimensionare i contenuti in base all'area visibile.
Consenti agli utenti di eseguire lo zoom
Puoi utilizzare il meta tag dell'area visibile per impedire lo zoom impostando maximum-scale=1 o user-scaleable=no.
Evita di farlo e, se necessario, consenti agli utenti di aumentare lo zoom.
Progetta con flessibilità
Evita di scegliere dimensioni specifiche dello schermo e usa una griglia flessibile modificando il layout in base alle esigenze del contenuto. Come abbiamo visto nell'esempio di Udacity sopra, questo approccio garantisce che il design risponda a seconda che lo spazio ridotto sia dovuto a uno schermo più piccolo o a un livello di zoom più elevato.
Per ulteriori informazioni su queste tecniche, leggi l'articolo Nozioni di base sul Adattamento web.
Utilizza unità relative per il testo
Per ottenere il massimo dalla tua griglia flessibile, utilizza unità relative come em o rem per elementi come la dimensione del testo, invece di valori in pixel. Alcuni browser supportano il ridimensionamento del testo solo nelle preferenze utente e, se utilizzi un valore in pixel per il testo, questa impostazione non influirà sulla copia. Tuttavia, se hai utilizzato unità relative, il testo del sito verrà aggiornato per riflettere la preferenza dell'utente.
Ciò consentirà la ripetizione del flusso dell'intero sito man mano che l'utente aumenta lo zoom, creando l'esperienza di lettura di cui ha bisogno per utilizzare il sito.
Evita di scollegare la vista visiva dall'ordine di origine
Un visitatore che naviga nel tuo sito con la tastiera segue 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 di origine. Ciò può causare salti sconcertanti nella pagina per chi usa la tastiera per spostarsi.
Assicurati di testare il design in ogni punto di interruzione scorrendo con il tasto Tab. Il flusso attraverso la pagina ha ancora senso?
Scopri di più sulla sconnessione dell'origine e del display visivo.
Fai attenzione agli indizi spaziali
Quando scrivi al microcopia, evita di usare un linguaggio che indichi la posizione di un elemento sulla pagina. Ad esempio, fare riferimento alla navigazione "a sinistra" non ha senso in una versione mobile quando 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 dei tocchi siano abbastanza grandi da facilitarne l'attivazione senza dover toccare altri link. Una buona dimensione per ogni elemento toccabile è 48 px. Leggi ulteriori indicazioni sui target per i tocchi.