da Fabrizio Caccavello | Dic 3 2017 | Top stories, Web |
Usare le label nei moduli è uno degli elementi di base nella costruzione di moduli online, e quindi di applicazioni per il web.
Sia in fase di costruzione quando le mie attività sono rivolte al coordinamento di team di sviluppo, sia in fase di verifica quando sono chiamato a effettuare verifiche tecniche di accessibilità, mi scontro sempre su interpretazioni errate e talvolta fantasiose dell’elemento label.
Roberto Scano in questo articolo su webaccessibile.org, parlando di scarse competenze degli sviluppatori per il web, cita proprio le etichette come esempio. Così ho deciso di scrivere un articolo per parlare degli errori di implementazione di tali elementi, perché di tutorial e di guide ce ne sono davvero tante in giro.
Il mio articolo è questo pubblicato su webaccessibile.org.
Buona lettura.
da Fabrizio Caccavello | Giu 15 2017 | Top stories |
Quello che segue è l’incredibile testo che l’INVALSI ha inserito come esercizio di comprensione del testo nelle prove per l’esame di terza media del 2017 in tutte le scuole d’Italia. Un articolo tratto da questo testo del 2013. In pratica l’INVALSI diffonde un contenuto anti-digitale che già nel 2013 poteva essere quasi una fake news, diventato surreale oggi, ma che distribuito in un mondo, quello della scuola, perennemente in deficit di competenze digitali diventa un qualcosa di veramente sconvolgente. Buona lettura.
“Uno dei video virali più provocatori caricati su YouTube negli ultimi due anni mostra una bambina di un anno che gioca con un iPad, passando le dita sullo schermo e rimescolando le icone. Nelle scene successive la vediamo «pizzicare» e cercare di far scorrere anche le pagine di una rivista cartacea. Pensa che possano comportarsi come uno schermo. Il video sottolinea i suoi gesti inquadrandoli da vicino.
Secondo il padre della bambina, che ha intitolato il filmato «Una rivista è un iPad che non funziona», le immagini dimostrano la transizione che vive la generazione di sua figlia. Nella descrizione aggiunge: «Ormai le riviste sono inutili e incomprensibili per i nativi digitali», cioè le persone che hanno imparato a interagire con le tecnologie digitali fin dalla prima infanzia e che crescono in un mondo in cui libri e giornali convivono con smartphone, e-reader e iPad.
Il video fa emergere una domanda interessante: in che modo la tecnologia cambia la lettura?
La maggior parte degli studi pubblicati su questo tema ci dice che, come mezzo per la lettura, la carta continua a offrire vantaggi rispetto allo schermo. Esperimenti di laboratorio, sondaggi e rapporti sulle abitudini dei consumatori indicano che gli apparecchi digitali impediscono una navigazione efficiente dei testi lunghi, il che incide negativamente sulle capacità di comprensione. Gli schermi rendono anche più difficile ricordare che cosa abbiamo letto una volta arrivati alla fine. Inoltre gli e-reader non sono in grado di riproporre le sensazioni tattili tipiche della lettura su carta, di cui alcuni sentono la mancanza.
«La lettura ha una sua dimensione fisica», dice Maryanne Wolf, professoressa della Tufts University nota per la sua attività di ricerca nel campo delle scienze cognitive. «Può essere un aspetto più importante di quanto ci piaccia ammettere, mentre barcolliamo, forse senza le dovute riflessioni, verso l’era della lettura digitale. L’ideale sarebbe conservare il meglio delle vecchie forme di lettura, ma sapere quando è il caso di usare quelle nuove».
Per capire le differenze tra lettura su carta e su schermo è necessario spiegare come il cervello umano interpreti la lingua scritta. Sebbene lettere e parole siano simboli che rappresentano suoni e idee, il nostro cervello le considera anche come oggetti fisici. Quando impariamo a leggere e a scrivere iniziamo a riconoscere le lettere in base a linee, curve e spazi vuoti: un processo di apprendimento che richiede l’uso sia degli occhi sia delle mani. Uno studio recente, effettuato da Karin James, dell’Università dell’Indiana a Bloomington, ha mostrato che nei bambini di cinque anni i circuiti cerebrali dedicati alla lettura si attivano quando provano a scrivere lettere a mano, ma non quando premono i corrispondenti tasti su una tastiera.
Oltre a trattare le lettere come oggetti fisici, è possibile che il cervello percepisca il testo nella sua interezza come una specie di paesaggio materiale. Quando leggiamo costruiamo una rappresentazione mentale del testo, simile, secondo alcuni ricercatori, alle mappe mentali che creiamo per il territorio che ci circonda. Varie prove e studi dimostrano che quando le persone cercano di ritrovare una frase o una scena in un libro spesso ricordano la posizione nella pagina in cui le hanno lette la prima volta.
Il fatto è che, nella maggior parte dei casi, i libri cartacei hanno una topografia più chiara dei testi su uno schermo. Un tascabile aperto ci presenta due domini ben definiti – la pagina sinistra da una parte e quella destra dall’altra – con otto angoli grazie ai quali ci possiamo orientare. Siamo in grado di concentrarci su una singola pagina senza perdere di vista il testo nella sua interezza, e possiamo percepire con le mani lo spessore delle pagine che abbiamo già letto, a sinistra, e di quelle che ci restano da leggere, a destra. Girare le pagine è come lasciare un’impronta dopo l’altra lungo un cammino: è un’azione che ha un certo ritmo e lascia una testimonianza visibile di quanta strada abbiamo fatto. Tutto ciò rende il libro cartaceo più facile da “navigare”, e ci aiuta a crearcene una mappa mentale coerente.
Al contrario, la maggior parte dei dispositivi digitali interferisce con la navigazione intuitiva di un testo e ci impedisce di mappare il percorso seguito dalla nostra mente. Chi legge un testo in formato digitale può scorrere con il mouse un flusso di parole senza alcuna interruzione, passare alla pagina successiva con un tocco e sfruttare la funzione di ricerca per individuare al volo una particolare frase. Ma avrà difficoltà a cercare all’interno del testo una scena che ricorda vagamente. Per fare un’analogia, immaginate che cosa succederebbe se Google Maps ci permettesse di percorrere ogni singola via di una città ma non di allargare la prospettiva per vedere la mappa di un intero quartiere. Sebbene gli e-reader e i tablet riproducano l’impaginazione dei libri – a volte con tanto di numeri di pagina, testatine e illustrazioni – uno schermo mostra solo una o due pagine virtuali per volta. Appena passiamo oltre, quelle pagine diventano invisibili. È come se invece di guardarci intorno, mentre ci arrampichiamo su per un sentiero di montagna, vedessimo alberi, pietre e muschi passarci a fianco in una serie di scatti, senza traccia di quello che abbiamo superato e senza alcuna possibilità di vedere ciò che si prospetta più avanti.”
da Fabrizio Caccavello | Mag 17 2017 | Web |
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:
- 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
- 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:
- 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.
- 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ò.