di Franco Frascolla
In pochi anni il problema dell’accessibilità dei siti web è diventato oggetto di una considerevole attenzione da parte degli addetti ai lavori. Anche la questione della leggibilità delle pagine internet, pressoché ignorata fino a poco tempo fa, comincia ad essere riconosciuta come esigenza generale, e rilevante è la considerazione data ai problemi degli ipovedenti. Questo deriva senza dubbio da una maggiore conoscenza del problema e dal superamento della prima fase dell’approccio ai temi dell’accessibilità basata spesso sulla mera applicazione delle linee guida WAI che, almeno esplicitamente, dicono troppo poco su questi temi.
Nonostante questa nuova attenzione, problemi di leggibilità si incontrano purtroppo ancora spesso nella navigazione web: si va da situazioni che creano semplici, quanto inutili, difficoltà di lettura ad altre che costituiscono delle vere e proprie barriere di accessibilità.
In generale le norme di leggibilità da considerare in una pagina web sono le stesse esaminate in questa pubblicazione per gli altri tipi di documenti. La differenza principale, certamente non trascurabile, sta nel fatto che il documento web è dinamico e assume aspetti diversi in base alle apparecchiature e alle impostazioni dell’utente. Questa caratteristica del web consente di superare molti problemi di leggibilità e di accessibilità lasciando al lettore la libertà di decidere come deve apparire il documento nella sua postazione.
Ciò nonostante tale risorsa può provocare qualche problema a chi progetta il sito per la grande varietà di possibili configurazioni della pagina da prevedere e testare. Molti problemi di leggibilità nascono, come vedremo, proprio dal fatto che spesso queste funzioni vengono bloccate perché si temono effetti indesiderati e si vuole che la pagina appaia sempre e per tutti come è stato deciso dal progettista. Spesso tuttavia non c’è nessuna intenzionalità e le pagine sono inaccessibili semplicemente per disattenzione o ignoranza rispetto al problema.
Poter modificare le dimensioni del testo
Come si diceva, l’impaginazione di un documento web non è statica, fissa e immutabile per tutti, ma dinamica e dipende prima di tutto dalle caratteristiche del computer dell’utente. Ci si può rendere conto di ciò visualizzando una stessa pagina con monitor di diversa grandezza, a diverse risoluzioni video e con browser diversi. Se poi l’utente agisce sulle impostazioni del suo browser e modifica le dimensioni dei caratteri, l’aspetto cambia ulteriormente e sostanzialmente.
Nessuno vuole obbligare i normovedenti a leggere caratteri troppo grandi ma, per fortuna di tutti, in internet non è obbligatorio costringere chi ci vede poco a leggere testi troppo piccoli. È però indispensabile costruire le pagine in modo che attraverso i normali strumenti di dimensionamento messi a disposizione dai browser ciascuno possa regolare la visualizzazione secondo le proprie necessità. Questa importante funzione di internet può infatti essere annullata dal progettista della pagina web che può anche decidere di definire i caratteri con misure assolute, che rimarranno le stesse in tutte le situazioni, e non con valori relativi sui quali l’utente potrà agire liberamente. Ma se il testo delle pagine web è troppo piccolo e, essendo definito con misure assolute, non è ingrandibile, sarà certamente inaccessibile per molte persone.
…e poter ingrandire bene!
La pagina web dimensionabile, ossia con le dimensioni del testo decise dall’utente, deve essere ben progettata.
Accade spesso purtroppo che, impostando il browser su una visualizzazione ingrandita del carattere, il layout della pagina, nel caso abbia una struttura complessa organizzata in colonne e riquadri, vanga squilibrato e dia luogo a sovrapposizioni di contenuti ed elementi grafici, o ad uno spezzettamento incontrollato dei link su più righe, rendendo la pagina confusa e ancor meno leggibile.
È fondamentale che il sito venga dunque testato su diversi browser, con ingrandimenti diversi del testo e a diverse grandezze e risoluzioni del monitor.
Le tabelle
L’organizzazione dei dati all’interno delle tabelle dovrebbe essere essenziale, facile da leggere e logica. Occorre evitare di rimpicciolire il testo contenuto nella tabella, addossare il testo ai bordi delle celle e creare tabelle con celle così disomogeneamente popolate da renderne difficile l’orientamento all’interno (celle contenenti una parola sola e altre composte da molte righe di testo).
I link
I collegamenti ipertestuali (link) sono la ragione d’essere del web; se sono troppi, mal distribuiti, poco chiari o poco usabili, la pagina che li ospita perde di utilità.
Tradizione vuole che i link testuali siano così rappresentati:
– testo blu sottolineato per link non visitati;
– testo viola sottolineato per link visitati.
In questo modo, ancor prima di passarci sopra col mouse e veder comparire l’immancabile manina il navigatore sa che quella scritta nasconde qualcosa. Le impostazioni classiche appena descritte non sono più una certezza; spesso la sottolineatura viene eliminata e i colori modificati. Mantenere la convenzione consolidata aiuta non poco il navigatore a raccapezzarsi in pagine sempre più complesse e prive di punti di riferimento. I colori convenzionalmente utilizzati per la marcatura dei link sono talvolta a medio-basso contrasto rispetto allo sfondo; per questo si consiglia l’utilizzo del grassetto o di tonalità solo leggermente diverse per gli sfondi più scuri, come indicato di seguito:
– testo blu grassettato e sottolineato su sfondo chiaro per link non visitati;
– testo viola grassettato e sottolineato su sfondo chiaro per link visitati;
– testo azzurro grassettato e sottolineato su sfondo scuro per link non visitati;
– testo lilla grassettato e sottolineato su sfondo scuro per link visitati.
Gli effetti di attivazione dei link rappresentano un’altra interessante risorsa. Essi comportano la temporanea modifica della formattazione del testo e/o dello sfondo relativo al link al passaggio del mouse sopra al collegamento o alla sua selezione da tastiera. Questi cambiamenti sono molto utili per capire quale link si sta per attivare (provvidenziale nelle barre di navigazione mal organizzate), ma devono essere ben progettati.
Gli effetti di attivazione che comportano la modifica della grandezza, del tipo di carattere e gli attributi del testo, rendono il layout instabile e spesso incontrollabile da parte del navigatore. I cambiamenti possono essere così frequenti e ripetuti da provocare una sorta di comportamento spasmodico del layout (abbagliamento, perdita di contesto, stress percettivo). La sensibile modifica del contrasto testo-sfondo può essere invece molto indicata a livello ipovisione.
Le barre di navigazione
Barre di navigazione mal strutturate o poco leggibili rendono un sito inaccessibile, non permettendo all’utente di avere una chiara visione dei contenuti del sito e di come fare a raggiungerli.
Proprio i menu sono tra gli elementi su cui i creatori di siti web si sbizzarriscono maggiormente, ricercando effetti accattivanti, inserendo piccole animazioni, sfumature, ombreggiature, e altri vari artifici che possono a volte compromettere la leggibilità del menu stesso. Per ottenere più facilmente gli effetti desiderati spesso si utilizzano immagini per barre, menu, pulsanti ecc., anche se questi presentano contenuti testuali. In questi casi, il principale problema è dato dall’impossibilità di modificare le dimensioni del testo.
Anche quando i menu non sono costituiti da immagini molto spesso il testo è più piccolo del normale e non può essere ingrandito. Altre volte invece, se è possibile ingrandirlo, va a capo in modo arbitrario e poco comprensibile, con conseguenti difficoltà a distinguere una voce dall’altra. Anche troppi link all’interno di un elenco e una spaziatura inadeguata possono creare problemi. È fondamentale poi che al passaggio del puntatore del mouse sopra un link o alla selezione del link tramite il tasto Tab gli effetti di attivazione siano evidenti.
L’organizzazione della pagina e del sito
Si raccomandano soluzioni grafiche equilibrate. Troppa grafica finisce col confondere e disturbare, invece di enfatizzare ed abbellire. Sono da evitare le pagine troppo lunghe, perché potenzialmente più pesanti e comunque meno gestibili. In alternativa è utile implementare un adeguato sistema di navigazione all’interno della pagina e suddividere i contenuti in più pagine.
È importante non posizionare barre di navigazione a destra della schermata per evitare che, con basse risoluzioni o alti fattori di ingrandimento, la pagina non sia più contenuta orizzontalmente nello schermo e il menu, troppo a destra, esca dalla porzione di pagina visualizzata.
Le visualizzazioni alternative e i fogli di stile (CSS)
La strada che porta all’accessibilità dei siti web non smette di rivelarsi lunga e insidiosa. Cambiano le tecnologie e le soluzioni praticate e praticabili, ma il problema resta in primo luogo culturale.
I siti paralleli, pagine fisicamente diverse e a sé stanti rispetto alla versione principale di un sito, fanno ormai parte dell’archeologia dell’accessibilità, anche se molti continuano ad utilizzarli. Com’è noto questa soluzione comporta problemi di aggiornamento e manutenzione dei contenuti assolutamente anti-economici in quest’era di spasmodica produttività.
I fogli di stile (CSS, Cascading Style Sheet, ossia Fogli di Stile a Cascata), oltre a facilitare e centralizzare la gestione della struttura di un sito, hanno aperto nuove strade verso l’accessibilità, ma non sono esenti da rischi derivanti dall’uso improvvido. I CSS possono gestire praticamente tutti gli aspetti legati alla presentazione e alla formattazione delle pagine, quindi costituiscono una risorsa potenzialmente illimitata rispetto al problema accessibilità e ipovisione. Questi, separando la presentazione dal contenuto, permettono di prevedere più fogli di stile intercambiabili, adatti alle diverse esigenze dell’utente (ad es. con varie combinazioni di colore a più alto contrasto o con font diversi e di differenti dimensioni). Essi permettono inoltre di realizzare degli stili specifici per ciascun media (schermo, stampa ecc.).
I CSS sono dunque uno strumento molto utile per consentire la personalizzazione del sito da parte dell’utente, ma nascondono alcune insidie. Uno stile infatti, qualsiasi elemento gestisca, può vincolare la normale interpretazione delle informazioni a livello di browser, sistema operativo e definizione dello schermo. Va poi sottolineato come i diversi browser e relative versioni gestiscano in maniera ancora difforme la tecnologia CSS. Insomma, il rischio che un foglio di stile si trasformi in una ulteriore barriera è sempre in agguato. Inoltre spesso lo sviluppatore non tiene conto che il navigatore ipovedente parte comunque da impostazioni in qualche modo personalizzate che possono essere in contrasto con quelle del sito e che, quindi, l’efficacia dei suoi CSS è tutta e sempre da verificare. Un sito deve essere accessibile anche se il navigatore decide di disattivare i CSS, ovvero utilizzarne di propri. Tutto questo deve avvenire in modo semplice, poiché non si può pretendere che un navigatore sappia e voglia ogni volta manipolare il proprio computer per visualizzare un sito in maniera soddisfacente.
Va poi sottolineato che anche la versione normale deve essere accessibile, poiché è difficile raggiungere le visualizzazioni alternative partendo da una pagina inaccessibile, o se il link che rimanda alla personalizzazione è relegato in piccolo in un angolino della pagina. La possibilità di personalizzare il sito deve invece essere ben evidente al primo impatto. Inoltre la scelta dell’impostazione preferita deve avvenire in molto semplice ed intuitivo, altrimenti il sistema di CSS diviene inutile, rischiando solamente di confondere l’utente che non riesce più a raccapezzarsi tra un’infinità di settaggi.
La risoluzione dello schermo
Chi ha problemi di vista preferisce spesso adottare risoluzioni video più basse per guadagnare in leggibilità (pixel più grandi = oggetti meno definiti, ma più grandi). Il dimensionamento della larghezza degli elementi grafici presenti in una pagina Web può comportare problemi anche rilevanti rispetto alla risoluzione dello schermo adottata. Ad es., se una tabella è larga 1000 pixel, mentre la risoluzione dello schermo è impostato a 800×600, comparirà la barra di scorrimento orizzontale nella parte bassa della finestra del browser. Questo significa che il navigatore sarà costretto a utilizzare continuamente la barra per leggerne i contenuti.
Gli elementi presenti nella pagina (ad esempio una tabella o un altro elemento grafico) devono perciò essere dimensionati in modo relativo e non assoluto, per permettere un ridimensionamento automatico a seconda della risoluzione del monitor, in modo che la pagina sia sempre interamente visibile. Anche le immagini dovrebbero essere dimensionate in modo da essere interamente visibili all’interno di una schermata ad una risoluzione relativamente bassa (800×600); quindi non più alte di 400-450 e non più larghe di 700-750 pixel.
Testo e immagini in movimento
Testo in movimento, che scorre, lampeggia, svanisce e riappare, piccole animazioni, gif animate ecc. sono elementi usati molto spesso con l’intento di attrarre l’attenzione del pubblico. Un abuso di tali mezzi rende però un sito veramente inaccessibile a persone con deficit visivo. Animando il testo esso diventa illeggibile a moltissime persone anziane o ipovedenti, è dunque opportuno usarlo in maniera molto limitata e mai per elementi importanti come barre di navigazione o contenuti principali del sito.
