Ingrandimento delle pagine web e ipovisione

da Fabrizio Caccavello | Mag 17 2017 | Web | 0 commenti

In relazione dell’accesso ai contenuti delle pagine web per gli utenti con ipovisione e del nuovo documento del W3C di cui ho parlato, è interessante focalizzare l’attenzione su una caratteristica molto importante dei browser, l’ingrandimento di solo testo.

I browser e gli ingrandimenti

Fino a un certo punto della evoluzione dei browser l’ingrandimento del testo è stata una funzionalità standard, l’unica possibile per dare la possibilità agli utenti di ridimensionare il testo a proprio piacere.

I browser non erano così evoluti come oggi e per poter effettuare questo tipo di zoom era necessario che le dimensioni dei font fossero espresse in em, una unità di misura relativa adatta a tale scopo, al contrario delle dimensioni espresse in pixel (px) che invece bloccavano tale possibilità.

Per questo linee guida e best practice su accessibilità e usabilità suggerivano di utilizzare nei progetti web unità di misure relative (em) e non assolute (px).

Ad un certo punto dell’evoluzione dei browser fu introdotta una funzionalità di zoom diversa, in un certo senso innovativa, quella dello zoom di porzioni di pagina. Internet Explorer, nelle sue stravaganti evoluzioni, nella versione 8.0 decise di eliminare la funzione di ingrandimento del solo testo a vantaggio dell’unica funzionalità di ingrandimento delle porzioni di pagina.

Molti utenti ipovedenti, ma anche utenti normo vedenti, non hanno mai gradito lo zoom di pagina per due motivi fondamentali:

1. I testi e le immagini subiscono un degrado della qualità e della definizione che talvolta rende difficile, se non talmente scomodo e in definitiva impossibile, l’accesso al contenuto
2. La pagina ingrandita non è più contenuta dallo schermo del dispositivo e si genera un nuovo scrolling orizzontale che l’utente è obbligato a usare per visualizzare l’intera pagina. Questo effetto introduce due problemi:
   1. Si è costretti a gestire lo zoom orizzontale per completare la lettura di ogni riga di testo; è un’operazione davvero scomoda, basta provare un attimo per rendersene conto. Provoca un continuo spostamento del focus visivo che molti utenti non possono proprio gestire.
   2. La presenza dello scrolling orizzontale non è usuale e la sua presenza, una volta generato, può diventare non immediatamente percepibile. L’utente può perdere consapevolezza che esistono porzioni di pagina nascoste. Per esempio possono diventare invisibili le barre laterali che sono spesso nettamente separate dal resto della pagina.

Ecco quindi che diventa importante, così come richiedono le WCAG2 (e in Italia la legge 4/2004) progettare pagine che supportino l’ingrandimento di solo testo, perché in questo modo viene preservata l’integrità della pagina che rimane (seppure con aspetto diverso) sempre integralmente a disposizione del campo visivo dell’utente.

In questo discorso le tecniche di responsive design, ossia la capacità dei progetti web di adattarsi al dispositivo usato dall’utente, conducono sviluppatori e committenti su due strade opposte: da una parte amplificano la consapevolezza che un progetto web deve “resistere” a ingrandimenti anche molto forti, dall’altra però la somiglianza dei progetti web alle applicazioni per mobile induce a credere che il tutto debba essere sempre immutabile, preciso al pixel e non modificabile.

Come spesso accade la verità sta nel mezzo: garantire correttamente le funzioni responsive senza però introdurre oggetti che impediscono il ridimensionamento dei caratteri.

A questo proposito ho provato a individuare quali sono gli elementi di design che devono essere usati con particolari attenzioni perché potenzialmente portatori di problematiche.

Menù orizzontali (semplici o a più righe)

Sono usati spesso su siti web ricchi di contenuti e contenenti molte sezioni. Le criticità legate ai menù orizzontali sono note ai designer: il numero di voci che possono contenere è limitata e la lunghezza di ogni elemento è talvolta un problema. Spesso gli sviluppatori, per garantire un’adeguata stabilità del menù optano per oggetti bloccati in lunghezza e altezza. Questo implica che ai primi ingrandimenti il testo scivola fuori dal suo contenitore e spesso le voci di menù si sovrappongono.
Quello che segue è il menù superiore del sito http://www.trenitalia.com con alcuni aumenti di solo testo.

I due menù orizzontali sono sovrapposti e non più utilizzabili

Menù orizzontali e altri oggetti dropdown

Le criticità descritte nel punto precedente si amplificano quando i menù orizzontali hanno menù di secondo livello che si aprono a tendina per ogni voce di menù sulla quale si esercita un’azione hover con il mouse. Questi livelli “annidati” soffrono ancora di più del problema dell’ingrandimento del testo anche perché spesso sono generati dinamicamente dai cms e quindi il controllo del contenuto è più difficoltoso. Capita spesso per esempio che il designer che sviluppa il progetto di base ipotizzi voci di menù sintetiche e ottimizzate e poi il content manager (o l’addetto ai contenuti dell’azienda) trasformi la voce di menù in qualcosa di molto più esteso e complesso. Mi è capitato di vedere progetti web nei quali una voce di menù pensata per contenere la parola “Prodotti”, si sia poi trasformata in “I nostri prodotti a catalogo 2016/2017”.

Nell’immagine che segue c’è una pagina del Corriere della Sera, con il suo menù orizzontale e il menù dropdown aperto.

Sia nel menù orizzontale che in quello verticale i caratteri sono sovrapposti e di difficile, e talvolta impossibile, lettura.

Box (elementi DIV) bloccati in altezza

Forse vi sarete accorti che negli ultimi anni molti progetti web, anziché essere strutturati in colonne verticali (una volta esisteva quasi uno pseudo standard basato su tre colonne, poi più frequentemente a due), sono strutturati a “fette” orizzontali. Tali tipo di layout ha introdotto anche la disposizione dei contenuti a blocchi orizzontali, e spesso i designer optano per bloccare le altezze di tali blocchi onde evitare lo spiacevole effetto che i tre elementi abbiano una estensione in verticale diversa.

Esistono chiaramente tecniche per bloccare le altezze dei box di layout ad altezze predefinite, ma che non impediscono al box di estendersi in verticale qualora lo spazio non sia sufficiente a contenere tutti gli elementi al suo interno. Esiste ad esempio il semplice attributo CSS min-height adatto a questo scopo, ma chiaramente non sempre gli effetti possono essere quelli desiderati.

L’esempio che segue è il sito Vodafone http://www.vodafone.it nella sezione di homepage dedicata alla scelta dello smartphone

Nell’immagine è evidente come i riquadri contenitori rimangano immutati all’aumentare della grandezza dei caratteri

Oggetti sliders

Anche gli sliders di immagini e testi in homepage sono diventati in questi anni quasi uno pseudo standard. Di indubbia efficacia comunicativa, sono però oggetti amati e contestati per uno stesso motivo: presentano molto bene un argomento in primo piano, ma allo stesso tempo catalizzano l’attenzione solo su quell’argomento.

I motivi per cui andrebbero usati con molta cautela è invece proprio perché spesso sono oggetti che non si adattano bene al contesto, né alle fasi responsive (visualizzazione nei vari dispositivi) né agli effetti degli ingrandimenti dei testi, che spesso ai primi zoom slittano in zone non visibili all’utente o peggio ancora sforano in aree con immagini di sfondo rendendo il testo non più leggibile.

In questo caso l’esempio riportato è la homepage del sito turistico ufficiale di Roma http://www.turismoroma.it

Il titolo dello slider non è più visibile.

Icone gestite come immagini (e non da CSS)

Questo è uno dei problemi tipici delle applicazioni web: se le icone sono inserite come oggetto immagine, gli ingrandimenti di solo testo non avranno effetto su di esse. Un esempio su tutti, nell’applicazione Gmail di Google il pulsante stampa per le email è una immagine png, ingrandendo il testo quel pulsante rimane della sua dimensione originale e quindi quasi invisibile per l’utente che ha bisogno di accedere al contenuto in forma più ingrandita.

I pulsanti relativi alle funzioni (stampa, rispondi, ecc) hanno icone che non sono ingrandite

Pulsanti

I pulsanti sono quasi sempre un elemento fondamentale in un progetto web. Invio di moduli, sottoscrizione di newsletter, call-to-action di ogni tipo, rappresentano il punto di interazione tra il visitatore e organizzazione che sta esponendo i propri prodotti o servizi online, per questo andrebbe posta molta attenzione a tali oggetti.

Può sembrare una banalità eppure proprio questi oggetti soffrono di problemi legati all’ingrandimento dei caratteri. L’esempio che evidenzia questo problema è nell’immagine precedente, l’applicazione Gmail, dove l’unico pulsante presente “SCRIVI”, è quasi invisibile a causa dello scivolamento del testo bianco sul fondo bianco.

Conclusione

Chi sviluppa i progetti web dovrebbe occuparsi di rendere più agevole possibile la navigazione, e chi si occupa di competenze digitali e di formazione dovrebbe invitare e suggerire agli utenti di accedere a queste funzionalità: un semplice ingrandimento di caratteri può migliorare significativamente l’esperienza utente.

Purtroppo queste problematiche rimangono spesso sconosciute, o, peggio, chi ne ha consapevolezza si ritrova a pensare che forse, non sono poi così tanti gli utenti che ne beneficiano e ci si ritrova a sperare che quel CTRL+ (o CMD+ in ambiente Apple) non venga mai utilizzato.

Non è solo una questione etica, è anche una questione di business, perché gli utenti che possono beneficiare dell’ingrandimento dei caratteri sono davvero tanti. Ma chi sono questi utenti? Quella che segue è una lista non esaustiva:

• quelli che definiamo ipovedenti
• quelli che hanno altri problemi alla vista e neanche ce lo immaginiamo
• quelli che hanno dimenticato gli occhiali a casa
• quelli che stanno sotto il sole e non vedono bene il monitor
• quelli che hanno un computer obsoleto la cui definizione è scarsa
• quelli che hanno fatto un ingrandimento 5 anni fa e non sanno più tornare indietro (e non sanno neanche di aver ingrandito le pagine)
• quelli che hanno il monitor distante dalla propria posizione
• quelli che devono sopperire alle inconsapevolezze dello sviluppatore che pensa che un font a 8px sia elegante
• quelli che semplicemente stanno comodi a vedere più grande

Vi lascio con una nota di speranza. Visto che gli esempi che ho portato sono di progetti per il web di grande aziende, potreste essere indotti a pensare che quello che dico sia inapplicabile. Quello che segue è l’immagine della homepage del sito dell’Agenzia per l’Italia Digitale http://www.agid.gov.it e quello di IWA http://www.iwa.it  che, dopo molti ingrandimenti, risultano ancora perfettamente utilizzabili, non si perde nessun contenuto e l’interfaccia utente rimane invariata. Insomma, se si vuole si può.

Usabilità e l’icona “panino”

da Fabrizio Caccavello | Nov 21 2015 | Web | 0 commenti

L’icona “panino” o per gli esterofili “hamburger”, ossia le tre linee che compaiono in un menù apribile nei design per il mobile, è ormai uno pseudo-standard. Ma spesso viene usata un po’ impropriamente anche nei design per il desktop. (altro…)