Sappiamo che è una buona idea progettare in modo reattivo per offrire la migliore esperienza multi-dispositivo. ma anche il responsive design è una soluzione vincente per l'accessibilità.
Prendi in considerazione un sito come Udacity:
Un utente ipovedente che ha difficoltà a leggere caratteri di piccole dimensioni potrebbe aumentare lo zoom della pagina. magari anche il 400%. Poiché il sito è progettato in modo reattivo, la UI si ridisegna automaticamente per l'"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%:
Di fatto, grazie alla progettazione in modo reattivo, rispettiamo la regola 1.4.4 dell'elenco di controllo WebAIM, che afferma che una pagina "... deve essere leggibile e funzionale quando la dimensione del testo è raddoppiata".
Questa guida non rientra nell'ambito di questa guida, ma ecco alcuni concetti importanti che andranno a vantaggio della tua esperienza reattiva e offrire 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 di width=device-width corrisponderà 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.
Questa operazione indica al browser di adattare i contenuti alle dimensioni dello schermo
così gli utenti non vedranno solo un mucchio di testo ridotto.
Per saperne di più, consulta Ridimensiona i contenuti in base all'area visibile.
Consenti agli utenti di eseguire lo zoom
È possibile usare il meta tag dell'area visibile per impedire lo zoom,
impostando maximum-scale=1 o user-scaleable=no.
Evita di farlo e consenti agli utenti di aumentare lo zoom se necessario.
Progetta con flessibilità
Evita di scegliere come target dimensioni dello schermo specifiche e utilizza invece una griglia flessibile, apportare modifiche al layout quando richiesto dai contenuti. Come abbiamo visto nell'esempio precedente di Udacity, questo approccio garantisce che il design se lo spazio ridotto è dovuto a uno schermo più piccolo o a un livello di zoom più elevato.
Per scoprire di più su queste tecniche, consulta l'articolo Nozioni di base sul responsive web design.
Utilizza le unità relative per il testo
Per sfruttare al meglio la tua griglia flessibile utilizza unità relative come em o rem per elementi come le dimensioni del testo, anziché i valori in pixel. Alcuni browser supportano il ridimensionamento del testo solo nelle preferenze utente, Inoltre, se utilizzi un valore in pixel per il testo, questa impostazione non influirà sulla tua copia. Se, tuttavia, hai utilizzato le unità relative, il testo del sito verrà aggiornato in base alle preferenze dell'utente.
Ciò consentirà l'adattamento dinamico del contenuto quando l'utente aumenta lo zoom, creando l'esperienza di lettura di cui hanno bisogno per utilizzare il tuo sito.
Evita di disconnettere la visualizzazione visiva dall'ordine di origine.
Un visitatore che naviga nel 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. Questo può portare a salti sconcertanti nella pagina da parte di chi utilizza la tastiera per spostarsi.
Assicurati di testare il design in ogni punto di interruzione scorrendo il contenuto con il tasto Tab il flusso attraverso la pagina ha ancora senso?
Scopri di più sulla disconnessione dalla fonte e dal display visivo.
Fai attenzione agli indizi spaziali
Quando si scrive un microcopia, evita di utilizzare un linguaggio che indichi la posizione di un elemento nella pagina. Ad esempio, per fare riferimento al menu di navigazione "a sinistra", non ha senso in una versione per dispositivi mobili quando il navigatore è 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. per attivarli facilmente senza fare clic su altri link. Una buona dimensione per qualsiasi elemento toccabile è 48 px, Leggi ulteriori indicazioni sui target dei tocchi.