Seleziona una pagina

Ingrandimento delle pagine web e ipovisione

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.

menù del sito trenitalia

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.

menù orizzontale e menù verticale del Corriere della Sera

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

Porzione di homepage di Vodafone

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

Homepage del sto ufficiale del Turismo a Roma

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.

Pagina di Gmail

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ò.

Homepage sito Agid molto ingrandita


Accessibilità, eventi e iniziative (e anticipazioni) per maggio e giugno 2017

Ci sono tante cose che riguardano l’accessibilità, e mi riguardano, in questi mesi. Per non perdere traccia delle cose importanti ho pensato di riepilogarle qui. Sui miei canali social poi non mancherò di dare anticipazioni e pubblicare dei promemoria per ogni evento. Ecco la lista delle cose.

webaccessibile.org

Da maggio 2017 sono iniziate le attività per l’aggiornamento e la riorganizzazione editoriale dello storica risorsa online per l’accessibilità webaccessibile.org, edita da IWA, di cui sono il coordinatore. È stato costituito un gruppo di lavoro che porterà a breve ad avere sia un nuovo layout che una nuova impostazione editoriale. Non mancherò di tenervi aggiornati su questo fronte.

Global Accessibility Awareness Day

Il 18 maggio 2017 è la giornata mondiale di sensibilizzazione sull’accessibilità. Avremmo voluto far uscire la nuova versione di webaccessibile.org in questa data ma è stato impossible attivare una pianificazione delle attività con conclusione dei lavori (anche in versione beta) con una tempistica così stringente. Il 18 maggio però, su questo sito, in anteprima, pubblicherò un post sulle ipovisioni, un’analisi di alcune problematiche che spesso rimangono border-line nella progettazione per il web.

Hack-cessibility Days

Venerdì 19 e sabato 20 maggio 2017 si svolge alla Mole Vanvitelliana di Ancona una due giorni dedicata all’accessibilità “Hack-cessibility Days“. Sabato 20 maggio 2017, alle ore 10:30 parlo di accessibilità web “Accessibilità per il web: cos’è, a chi è rivolta e perché è fondamentale per un web di qualità“. Se potete non mancate perché è un evento davvero importante e soprattutto uno dei pochi che si svolgeranno in Italia in occasione del GAAD (descritto nel paragrafo precedente).

ForumPA 2017

Dal 23 al 25 maggio 2017 si svolge a Roma ForumPA 2017. Il giorno 23 alle ore 15:00 si tiene il mio seminario dal titolo “Come vengono percepiti i siti web della PA da parte degli utenti?“. Viaggio attraverso la qualità dei siti web della PA usando la percezione che ne hanno gli utenti.

Webinar: l’accessibilità legata alla User Experience

Il 25 maggio alle 15,30 sarò relatore per Siteimprove di un webinar nel quale parleremo di Accessibilità e User Experience, di utenti e di scelte che oltre ad essere etiche e qualitative, diventano anche un supporto ai modelli di business. Al webinar si parlerà del processo di accessibilità in corso all’Università  LUISS Guido Carli. Il webinar è gratuito e aperto a tutti, basta registrarsi da qui http://go.siteimprove.com/webinar-accessibilita-user-experience

SMAU Bologna 2017

L’8 e il 9 giugno 2017 c’è SMAU Bologna. Il giorno 8 (orario da definire) sarà impegnato in un seminario di presentazione di una importante iniziativa associativa (IWA). Non posso ora rilevarne i dettagli perché appunto verrà presentata in occasione dell’evento. Vi anticipo solo che è una importantissima attività a supporto delle aziende che fanno impresa nel settore digitale. Chiaramente le strategie accessibili saranno uno dei fili conduttori.

Web Marketing Festival

La carrellata di eventi descritti in questa pagina si chiude con il Web Marketing Festival. Si svolge a Rimini il 23 e il 24 giugno 2017. È davvero troppo presto per qualunque anticipazione, ma come si dice in questi casi “save the date”. Ci saranno cose interessanti anche qui.

Un digitale di carta

Spesso si dice che il digitale non è un supporto efficiente per la vita delle persone perché “i processi digitali” non sono stati pensati come tali ma è stato semplicemente trasposto in digitale ciò che avveniva nel mondo analogico. Ma cosa significa “ripensare i processi per il digitale”? Molti ne parlano ma talvolta rimangono parole vuote e prive di senso.

Per dargli forma ci facciamo aiutare da un caso reale, che ci permetterà di capire cosa può significare  tutto ciò.

Il caso: a una anziana signora, già esente dal pagamento dei Ticket, viene diagnosticata una patologia per la quale ha diritto a una esenzione supplementare per l’acquisto di beni strumentali necessari per la cura di tale problema. Un medico della Pubblica Amministrazione si prende la responsabilità di certificare tale patologia e di autorizzare tale esenzione, rilasciando alla paziente i documenti necessari. Visto che la sanità della PA in questione è abbastanza all’avanguardia nel settore digitale, CUP centralizzati su tutta la regione, ritiro e prenotazioni online, interoperabilità dei dati tra le varie organizzazione, ci si aspetterebbe che il percorso della signora potesse concludersi con il portare in farmacia quel foglio e ritirare quanto necessario. Invece no, nonostante tutto sia completamente digitalizzato la signora ha dovuto fare le seguenti azioni:

  1. Ritirare il certificato dal medico come già descritto nell’ambulatorio di riferimento.
  2. Portare quel foglio in un CUP, localizzato in un altro centro della stessa ASL a 8km di distanza dall’altro dove l’operatore ha il compito di trascrivere quando già scritto dal medico in un altro terminale.
  3. Prendere un nuovo foglio rilasciato dal CUP e il foglio rilasciato dal medico in prima fase e andare in un nuovo ufficio dove un altro medico, in un altro terminale, inserisce nuovamente i dati in una nuova maschera.
  4. Finalmente avere i giusti documenti per andare a prendere i prodotti in farmacia.

Non ci è dato sapere se i due operatori, quello del CUP e il secondo medico, abbiano aggiunto informazioni sulle piattaforme digitali che hanno usato, ma di sicuro l’impressione data all’anziana signora è stata quella di un mero copia (a mano) di dati che in qualche modo erano già in possesso della PA stessa. E di sicuro nessuno dei due operatori ha fatto azioni di controllo, verifica, analisi sul paziente stesso, limitandosi a usare le informazioni nei fogli redatti dal primo medico.

È difficile immaginare che il paziente in questione abbia avuto la sensazione di aver dovuto fare almeno 2 azioni superflue?

Cosa ha impedito alla PA di eliminare questo presunto inutile vagabondare di utenti in tre uffici diversi?

Credo che questo esempio sia perfetto per dare un senso compiuto alla frase “riprogettare i processi in modo digitale“.

Il pulsante “Aggiungi agli amici” di Facebook non è accessibile – Accessibilità per persone con ipovisione

Il pulsante “Aggiungi agli amici” di Facebook non è accessibile – Accessibilità per persone con ipovisione

Recentemente il W3C ha pubblicato la prima Working Draft relativa ai Requisiti di Accessibilità per le persone con ipovisione (Accessibility Requirements for People with Low Vision). Ne ho parlato in questo articolo su webaccessibile.org.

Tra tutti i temi legati all’accessibilità quello delle ipovisioni è forse il meno discusso, quindi è davvero interessante questo lavoro del W3C. Nei prossimi mesi cercherò di approfondire alcuni aspetti che sono fondamentali per garantire quella necessaria inclusione digitale di cui sempre si parla.

Un esempio in anteprima su tutti. Il pulsante “Aggiungi agli amici” di Facebook non è accessibile, il contrasto di colore tra testo e sfondo non è sufficiente. Infatti una mia amica ipovedente non riusciva a capire come si facesse ad aggiungere gli amici su Facebook. Chiaramente non era un problema suo, ma non riusciva proprio a vedere il pulsante, le sembrava un oggetto verde indefinito.

Schermata 2016-06-22 alle 11.13.36

Come spiego nell’articolo su webaccessibile.org le persone coinvolte in problemi di ipovedenza sono davvero numerosissime, più di quelle che si possa immaginare.

Buona lettura.