Come rendere il tuo sito accessibile per l'ingrandimento dello schermo

Ci sono circa dieci volte più persone che usano l'ingrandimento dello schermo rispetto agli screen reader, tuttavia, l'attenzione sembra sempre ricadere sugli screen reader nelle discussioni e nelle linee guida sull'accessibilità.

Cambiamo questa tendenza! Ecco alcuni suggerimenti su come rendere la tua interfaccia accessibile anche agli ingranditori dello schermo

Cos'è una lente d'ingrandimento dello schermo?

Un ingranditore dello schermo è un software che ingrandisce lo schermo e ne visualizza una parte ingrandita. Di seguito è riportato un esempio di come può apparire.

L'ingrandimento dello schermo è diverso dallo zoom del browser (che si fa con ctrl +) in quanto non fa scattare il layout responsive. Utilizzando lo zoom del browser, il layout viene solitamente modificato per adattarsi alla larghezza dello schermo, quindi l'utente non deve scorrere lateralmente. Con l'ingrandimento dello schermo invece si deve sempre scorrere lateralmente per vedere tutti i contenuti.

I nostri consigli per rendere amichevole all'utente la lente d'ingrandimento dello schermo

Quando nell'architettura di un sito vengono usati popup che si aprono al passaggio del mouse

Spesso succede che, usando una lente di ingrandimento dello schermo, solo una parte di un popup è visibile quando l'utente passa con il mouse su un'icona di informazioni, ma quando il puntatore del mouse viene spostato sul popup, si chiude. Quindi non c'è modo per l'utente di leggerlo.

La soluzione è rendere cliccabile l'icona in modo che l'utente possa decidere di tenere aperto il popup. Ciò è necessario anche per i touchscreen in cui non è possibile passare il mouse a causa della mancanza di un puntatore del mouse.

Controlla i contrasti al passaggio del mouse

I contrasti di colore devono essere buoni per le persone con problemi di vista e molti team di progettazione sanno come controllare i contrasti. Tuttavia, la maggior parte dimentica di controllare i contrasti al passaggio del mouse. Questo può creare un grosso problema per gli utenti che usano l'ingrandimento dello schermo, che potrebbero non avere altra scelta che passare il mouse su ciò che vogliono leggere.
È importante controllare che il contenuto non diventi quasi completamente illeggibile quando si passa con il mouse.

La maggior parte delle persone potrebbe semplicemente spostare il puntatore del mouse in un altro punto e leggere il testo. Ma una persona che utilizza l'ingrandimento dello schermo probabilmente non avrà altra scelta che selezionare con il mouse sull'area per leggerlo, poiché ha bisogno che il testo copra tutto lo schermo affinché sia ​​leggibile.

Una buona idea sarebbe questa: Invece di abbassare i contrasti al passaggio del mouse, aumentali!

Mostra i risultati vicini al punto in cui è stato attivato

Quando un utente interagisce con qualcosa, gli verrà spesso mostrato un feedback su ciò che è accaduto. Questo feedback dovrebbe essere presentato vicino al punto in cui è stata attivata l'azione.
Un luogo comune in cui ciò non riesce è nei messaggi di errore. L'utente preme un pulsante di invio e il messaggio di errore viene visualizzato nella parte superiore del modulo o come un "messaggio di avviso" (che potrebbe anche scomparire dopo pochi secondi, il che è un altro problema).
Se il messaggio di errore è visualizzato nella parte superiore dello schermo può essere difficile da trovare per gli utenti che utilizzano l'ingrandimento dello schermo.

Mostra invece i messaggi vicino a dove si trova l'utente quando viene attivato.

Il miglior modo possibile è mostrare il messaggio appena sotto il campo in cui si trova l'utente. Allora non lo mancheranno.

Mantieni il più possibile una sola colonna

Gli utenti con l'ingrandimento dello schermo non ottengono una panoramica così buona come gli altri utenti. Per questo motivo, è più probabile che non riescano a vedere la seconda colonna nei moduli e negli articoli e così gli utenti con ingranditori dello schermo probabilmente perderanno alcuni campi in modulo su due colonne, magari proprio il campo obbligatorio "Messaggio" poiché si trova in una colonna separata.

Puoi inserire la navigazione in una colonna separata perché è un modello di progettazione comune sul Web. Ma a parte questo, mantienilo semplice e progetta solo una colonna per le tue informazioni. Se hai "link correlati", inseriscili nel contenuto in cui sono pertinenti o sotto l'articolo, come se fosse una visualizzazione per smartphone o tablet.