ANS - Associazione Nazionale Subvedenti ONLUS
ANS - Associazione Nazionale Subvedenti ONLUS
Ti trovi in: home > info utili > informatica > vademecum per la realizzazione di siti culturali.
Legge Regionale 9/93
"Interventi di Promozione Educativa e Culturale"
a cura di
Carla Mondolfo e Franco Frascolla
dicembre 2004
Si ringrazia l'Assessore Prof. Avv. Ettore A. Albertoni
per il sostegno al progetto
Per ricevere la versione cartacea del vademecum
basta associarsi all'ANS e richiederla.
Premessa.
Il web, l'accessibilità e l'usabilità.
Siti culturali e disabili visivi gravi.
Destinatari del documento.
La navigazione con gli screen-reader.
Dimensioni del testo.
Tipi di carattere.
Attributi del testo.
Allineamento del testo.
Organizzazione/distribuzione del testo.
Contrasto testo-sfondo.
Il testo nella pagina.
Frame, barre di navigazione, tabelle, form.
Le immagini.
I link.
Organizzazione della pagina e del sito.
Siti paralleli, visualizzazioni alternative, fogli di stile.
La risoluzione dello schermo.
La visualizzazione e il SO.
I browser.
Riepilogo delle "Indicazioni".
Test di verifica.
Bibliografia.
Il presente documento si inserisce nel più ampio dibattito su accessibilità e usabilità del web scaturito da eventi quali:
Si tratta, come si noterà, di avvenimenti normativo-culturali, che hanno stimolato la discussione sul tema, fotografandone lo status a livello legislativo.
In ambiti come questo, forse più che altrove, la tecnologia corre assai più della percezione comune; da qui l'estrema difficoltà nel definire regole, chiare, condivise e durevoli.
Le considerazioni e i suggerimenti pratici presenti nel presente documento scaturiscono dalla pluriennale ricerca e sperimentazione in seno all'Associazione Nazionale Subvedenti, dall'esperienza quotidiana di navigazione e di test sui siti web, nonché dai preziosi contributi ricavati da contesti quali forum e mailing-list tematici:
Il presente documento non vuole essere un manuale tecnico per addetti ai lavori, bensì uno strumento d'indirizzo e di sensibilizzazione culturale.
Non si faranno, pertanto, continui ed espliciti riferimenti ai diversi linguaggi e tecnologie di sviluppo, ma ci si concentrerà sui risultati percettivi e funzionali da ottenere.
Associazione Nazionale Subvedenti
Cosa s'intende esattamente per accessibilità e usabilità del web?
Subito le definizioni:
Il contenuto di una pagina web è accessibile quando può essere usato da qualcuno che ha una disabilità (www.w3.org/TR/WCAG10/#glossary).
Definizione ISO.
L'usabilità è data dal grado di "efficacia, efficienza e soddisfazione con i quali gli utenti raggiungono
determinati obiettivi in determinati ambienti." (ISO 9241, Ergonomic requirements for office work with visual display
www.hyperlabs.net/ergonomia/ziggiotto/index.html).
Definizione di Jakob Nielsen.
Secondo J. Nielsen l'usabilità possiede cinque caratteristiche fondamentali:
Di seguito i principali problemi riscontrabili per ciascuna categoria.
Per questi navigatori i problemi riguardano:
Per i disabili motori i problemi riguardano:
Per i disabili cognitivi e uditivi, per gli stranieri, e per le persone con bassa scolarizzazione i problemi sono evidentemente linguistici:
Per questi navigatori i possibili problemi riguardano:
Le specifiche tecniche inserite negli standard di sviluppo di contenuti web accessibili e usabili prendono in considerazione più o meno adeguatamente le problematiche descritte fin qui.
Teoricamente basterebbe aggiungere un po' di buonsenso a quanto previsto dalle linee guida W3C e nella molta altra documentazione disponibile in fatto di accessibilità e usabilità del web, per ottenere siti eccellenti; ma la casistica reale è sempre più complessa e articolata rispetto alle normative, spesso da interpretare...
Da qui il bisogno e la necessità di un elaborato come il presente, specificamente dedicato ai problemi di vista, perché è questo l'aspetto meno conosciuto, più complesso e maggiormente soggetto a semplificazioni e generalizzazioni di vario genere, anche da parte di molti esperti.
La crescente commistione tra eventi spettacolari e cultura (eventi spettacolari assunti al rango di culturali e iniziative culturali promosse attraverso eventi spettacolari), si ripercuote e influenza immancabilmente anche la comunicazione via internet, là dove evento spettacolare non coincide necessariamente (quasi mai), con accessibile e fruibile da tutti.
La logica dell'evento spettacolare, si sa, è volta all'impressionare e stupire, spesso attraverso l'utilizzo di effetti speciali; effetti speciali che soprattutto a livello visivo necessitano di navigatori con capacità visive spesso altrettanto speciali...
In generale, va poi aggiunta un'ulteriore considerazione: la fruizione di eventi spettacolari e iniziative culturali, sempre più costosi, mal si adattano ad un pubblico di navigatori tanto giovane e in buona salute visiva, quanto spesso "disabile" a livello economico.
In altre parole, il rischio è che i soggetti con maggiori risorse da destinare alla cultura, si rivelino quelli meno in grado di acquisire informazioni attraverso il web.
Internet si è rivelato una straordinaria risorsa informativa per coloro che hanno problemi di deambulazione; anche a livello visivo: le difficoltà nella visione notturna e in ambienti illuminati artificialmente, quelle di visione in ambienti poco o male illuminati e i problemi percettivi della segnaletica e dei pannelli informativi (spesso più inaccessibili dei siti internet), portano sempre più i disabili visivi gravi a cercare informazioni sul web e a diventare altresì utenti attivi rispetto alle offerte culturali proposte sul territorio.
Da qui la necessità e il bisogno di realizzare siti web capaci di rispondere alle esigenze percettive di tutti, ipovedenti compresi: siti informativi sulle iniziative culturali veri e propri, ma anche relativi ai trasporti, in modo da poter ottenere informazioni sul come raggiungere i luoghi interessati da tali iniziative.
L'ipovedente è una persona affetta in modo più o meno grave e composito, da disturbi della vista quali: diminuzione dell'acuità visiva, anomalie nel campo visivo, fotofobia e daltonismo, singolarmente o in vario modo combinati tra loro. Detti disturbi percettivi determinano una gamma di problemi a livello di accessibilità e usabilità del Web difficilmente gestibili da addetti ai lavori poco sensibili o, peggio, da esperti improvvisati.
A questi soggetti, qualche centinaia di migliaia in Italia, va aggiunta la totalità dei fruitori della rete, molto spesso costretti a stare per molte ore davanti al monitor e magari in condizioni d'illuminazione non ottimali.
Un'importante risorsa a proposito dell'accessibilità e usabilità dei siti web culturali è altresì costituita dal progetto Minerva: "Manuale per la qualità dei siti Web pubblici culturali" www.minervaeurope.org/publications/qualitycriteria-i/indice0402.htm
Il presente documento si rivolge a tutte le organizzazioni pubbliche e private e agli sviluppatori di contenuti web volti alla trasmissione di informazioni a carattere turistico e culturale:
Sono queste le principali realtà interessate al presente documento, e lo scopo è quello di favorire la pubblicazione di contenuti culturali accessibili e usabili anche e soprattutto da persone con difficoltà a livello visivo.
I non vedenti e gli ipovedenti molto gravi navigano in Internet utilizzando dei software chiamati "screen-reader" (lettori di schermo), che appoggiandosi a sintesi vocali o display Braille restituiscono al navigatore le informazioni presenti a schermo in formato audio o tattile.
Per questi utenti del Web i problemi di navigazione non risiedono tanto nel layout, quanto ed essenzialmente nella qualità delle pagine a livello di codice.
Una pagina a prova di screen-reader non deve essere simil DOS... ma valida a livello di codice, ben strutturata e completata da adeguate descrizioni degli elementi grafici e strumenti di navigazione rapida.
Indicazioni.
Una pagina web accessibile agli screen-reader deve essere:
Al momento di decidere la grandezza del testo da inserire in una pagina web, occorre tenere conto anche di alcuni fattori relativi al navigatore, quali:
Se visualizzi una pagina con monitor di diversa grandezza, a diverse risoluzioni video e con browser diversi, ti renderai immediatamente conto di come la leggibilità e il comfort nella lettura possano cambiare anche in maniera considerevole.
Non tutti dispongono di un monitor più grande di 17 pollici, molti sono costretti a lavorare a risoluzioni video elevate (ovvero non sanno di poterla modificare), e quasi tutti utilizzano Internet Explorer per la navigazione, di sicuro il meno votato all'accessibilità tra i browser più comuni.
Esempio di testo troppo piccolo
e non ridimensionabile in Internet Explorer.
E' importante notare come non solo il testo molto piccolo può risultare inaccessibile; anche quello molto grande può creare problemi!
Il fine della corretta implementazione della dimensione del testo non è costringere i normovedenti a leggere caratteri troppo grandi, bensì fare in modo che attraverso i normali strumenti di dimensionamento messi a disposizione dai browser, ciascuno possa regolare la visualizzazione secondo le proprie necessità.
Impostare (anche nei CSS) dimensioni del testo non inferiori al 100%:
Va poi sottolineato come Internet Explorer al momento gestisca le impostazioni in px ed in em delle dimensioni del testo in modo non standard, da qui il consiglio di impostare dette dimensioni in %:
Indicazioni.
I problemi di accessibilità legati ai tipi di carattere sono essenzialmente due:
Esempio di caratteri poco leggibili.
I tipi di carattere dal tratto semplice sono di norma più leggibili e meno affaticanti. I più comuni sono: Arial, Verdana, Times New Roman e Courier New.
Il rischio nell'utilizzo di tipi di caratteri non comuni, è che il browser utilizzato dal navigatore non li riconosca e interpreti il da farsi a modo suo; se tutto funziona a dovere utilizzando il "carattere predefinito". In casi particolari può addirittura venir richiesta l'installazione di componenti aggiuntivi (cosa non semplice per la maggioranza dei navigatori).
L'utilizzo da parte del browser di un tipo di carattere diverso da quello previsto, può comportare l'alterazione grafica del contenuto della pagina, con ripercussioni anche gravi sul piano funzionale, percettivo ed estetico.
Indicazioni.
Utilizza tipi di carattere comuni e di facile lettura.
Qual'è il rapporto tra gli attributi più comuni del testo (grassetto, corsivo e sottolineato), e l'accessibilità?
Molto dipende dal tipo di carattere utilizzato; gli effetti di affastellamento ed eccessiva distorsione, tanto per citare i problemi più comuni, possono variare anche in maniera considerevole in base al tipo di carattere scelto.
Molte righe di testo in grassetto
affaticano più che enfatizzare
e migliorare l'accessibilità.
Indicazioni.
L'allineamento del testo a sinistra di norma aiuta la leggibilità, soprattutto quando le righe sono numerose.
La "giustificazione" del testo, oltre ad essere poco utilizzata nella rete, comporta problemi di accessibilità. La diversa distanza tra le parole può confondere, affaticare la vista e compromettere la leggibilità.
L'allineamento al centro, utilizzabile per i titoli e per brevissimi elementi significativi del testo, se distribuito su più righe, dovrebbe essere gestito in modo che queste abbiano una lunghezza analoga tra loro. Righe di diversa lunghezza, se allineate al centro, pregiudicano la leggibilità.
L'allineamento a destra, utilizzabile per brevissimi e significativi elementi del testo, dovrebbe essere gestito come l'allineamento al centro.
Esempio di giustificazione del testo
che pregiudica la leggibilità.
Indicazioni.
Allinea il testo normale a sinistra; in caso di testo allineato a destra o al centro, contienine la lunghezza complessiva e distribuiscilo in maniera uniforme tra le eventuali diverse righe. Evita il testo giustificato.
L'organizzazione del testo in capitoli, paragrafi e relativi titoli e sottotitoli, con diversa dimensione e colori dei caratteri, aiuta la leggibilità e l'orientamento all'interno della pagina. A tal fine, la suddivisione del testo in paragrafi (<p>...</p>), è da preferire all'interruzione di riga (<br>).
Esempio di testo mal organizzato.
Un lungo testo suddiviso in paragrafi non più estesi di una decina di righe, risulta facilmente leggibile e meglio navigabile (si recuperano più agevolmente le informazioni al suo interno).
Anche l'interlinea, distanza tra le righe di un paragrafo, è un elemento da tenere in considerazione. Righe troppo ravvicinate o troppo distanziate, perdono in accessibilità. La troppa distanza può creare problemi nell'andare a capo, le righe in parte sovrapposte possono pregiudicare la comprensione di alcuni caratteri quali: b, d, f, g, h, j, l, p, q, t, y.
Indicazioni.
Il contrasto testo-sfondo, unitamente alle dimensioni del testo, rappresenta spesso una miscela esplosiva a livello di accessibilità.
Esempio di pagina con testo mal contrastato.
Più e prima di qualsiasi ulteriore considerazione sul tema, verifica la compatibilità del contrasto testo-sfondo tra i principali colori utilizzabili in rete nella tabella che segue (si sottolinea come i dati esposti scaturiscono dall'esperienza personale, diretta e derivata dall'osservazione di terzi).
legenda:
nella prima riga di ogni cella la sigla del colore di sfondo;
nella seconda riga di ogni cella la sigla del colore del testo;
nella terza riga di ogni cella, la compatibilità (Sì, NI, NO);
Sì = accettabile;
NI = sconsigliato;
NO = da non utilizzare.
Elenco dei colori:
A bianco;
B rosso;
B2 rosa antico (solo sfondo);
C giallo;
C2 giallino (solo sfondo);
D verde limone;
D2 verdino (solo sfondo);
E azzurro;
E2 celeste (solo sfondo);
F blu chiaro;
G fucsia;
G2 rosa (solo sfondo);
H bordeaux;
I verde oliva;
J verde;
K verde acqua;
L blu scuro;
L2 glicine (solo sfondo);
M viola;
N grigio chiaro;
O grigio scuro;
P nero.
(nelle caselle "AA", "BB". "CC"... il contrasto è nullo)
| A A NO |
A B NO |
A C NO |
A D NO |
A E NO |
A F NI |
A G NO |
A H Sì |
A I NI |
A J Sì |
A K NI |
A L Sì |
A M Sì |
A N NO |
A O NO |
A P Sì |
| B A NO |
B B NO |
B C NO |
B D NO |
B E NO |
B F NO |
B G NO |
B H NO |
B I NO |
B J NO |
B K NO |
B L NO |
B M NO |
B N NO |
B O NO |
B P NO |
| B2 A NO |
B2 B NO |
B2 C NO |
B2 D NO |
B2 E NO |
B2 F NI |
B2 G NO |
B2 H NI |
B2 I NO |
B2 J NO |
B2 K NO |
B2 L NI |
B2 M NI |
B2 N NO |
B2 O NO |
B2 P NI |
| C A NO |
C B NO |
C C NO |
C D NO |
C E NO |
C F NO |
C G NO |
C H NI |
C I NO |
C J NO |
C K NO |
C L NI |
C M NI |
C N NO |
C O NO |
C P NI |
| C2 A NO |
C2 B NO |
C2 C NO |
C2 D NO |
C2 E NO |
C2 F NI |
C2 G NO |
C2 H Sì |
C2 I NI |
C2 J NI |
C2 K NI |
C2 L Sì |
C2 M Sì |
C2 N NO |
C2 O NI |
C2 P Sì |
| D A NO |
D B NO |
D C NO |
D D NO |
D E NO |
D F NO |
D G NO |
D H NI |
D I NO |
D J NO |
D K NO |
D L NI |
D M NI |
D N NO |
D O NO |
D P NI |
| D2 A NO |
D2 B NO |
D2 C NO |
D2 D NO |
D2 E NO |
D2 F NI |
D2 G NI |
D2 H Sì |
D2 I NO |
D2 J NO |
D2 K NO |
D2 L Sì |
D2 M Sì |
D2 N NO |
D2 O NO |
D2 P Sì |
| E A NO |
E B NO |
E C NO |
E D NO |
E E NO |
E F NO |
E G NO |
E H NI |
E I NO |
E J NO |
E K NO |
E L NI |
E M NI |
E N NO |
E O NO |
E P NI |
| E2 A NO |
E2 B NO |
E2 C NO |
E2 D NO |
E2 E NO |
E2 F NO |
E2 G NO |
E2 H Sì |
E2 I NO |
E2 J NO |
E2 K NO |
E2 L Sì |
E2 M Sì |
E2 N NO |
E2 O NO |
E2 P Sì |
| F A NI |
F B NO |
F C NO |
F D NO |
F E NO |
F F NO |
F G NO |
F H NO |
F I NO |
F J NO |
F K NO |
F L NO |
F M NO |
F N NO |
F O NO |
F P NO |
| G A NI |
G B NO |
G C NO |
G D NO |
G E NO |
G F NO |
G G NO |
G H NO |
G I NO |
G J NO |
G K NO |
G L NO |
G M NO |
G N NO |
G O NO |
G P NO |
| G2 A NO |
G2 B NO |
G2 C NO |
G2 D NO |
G2 E NO |
G2 F NO |
G2 G NO |
G2 H NI |
G2 I NO |
G2 J NO |
G2 K NO |
G2 L NI |
G2 M NI |
G2 N NO |
G2 O NO |
G2 P NI |
| H A SI |
H B NO |
H C Sì |
H D NI |
H E SI |
H F NO |
H G NI |
H H NO |
H I NO |
H J NO |
H K NO |
H L NO |
H M NO |
H N NI |
H O NO |
H P NO |
| I A NI |
I B NO |
I C NO |
I D NO |
I E NI |
I F NO |
I G NO |
I H NO |
I I NO |
I J NO |
I K NO |
I L NO |
I M NO |
I N NO |
I O NO |
I P NO |
| J A Sì |
J B NO |
J C NI |
J D NO |
J E NI |
J F NO |
J G NO |
J H NO |
J I NO |
J J NO |
J K NO |
J L NO |
J M NO |
J N NO |
J O NO |
J P NO |
| K A Sì |
K B NO |
K C NI |
K D NO |
K E NO |
K F NO |
K G NO |
K H NO |
K I NO |
K J NO |
K K NO |
K L NO |
K M NO |
K N NO |
K O NO |
K P NO |
| L A Sì |
L B NO |
L C Sì |
L D NI |
L E NI |
L F NO |
L G NO |
L H NO |
L I NO |
L J NO |
L K NO |
L L NO |
L M NO |
L N NO |
L O NO |
L P NO |
| L2 A NO |
L2 B NO |
L2 C NO |
L2 D NO |
L2 E NO |
L2 F NO |
L2 G NO |
L2 H NI |
L2 I NO |
L2 J NO |
L2 K NO |
L2 L NI |
L2 M NI |
L2 N NO |
L2 O NO |
L2 P NI |
| M A Sì |
M B NO |
M C Sì |
M D NI |
M E NI |
M F NO |
M G NO |
M H NO |
M I NO |
M J NO |
M K NO |
M L NO |
M M NO |
M N NO |
M O NO |
M P NO |
| N A NO |
N B NO |
N C NO |
N D NO |
N E NO |
N F NO |
N G NO |
N H NI |
N I NO |
N J NO |
N K NO |
N L NI |
N M NI |
N N NO |
N O NO |
N P NI |
| O A NI |
O B NO |
O C NI |
O D NO |
O E NI |
O F NO |
O G NO |
O H NO |
O I NO |
O J NO |
O K NO |
O L NO |
O M NO |
O N NO |
O O NO |
O P NO |
| P A Sì |
P B NO |
P C Sì |
P D NI |
P E Sì |
P F NO |
P G NO |
P H NO |
P I NO |
P J NO |
P K NO |
P L NO |
P M NO |
P N NI |
P O NO |
P P NO |
I parametri di compatibilità esposti nella tabella sono evidentemente indicativi, alcuni ipovedenti potrebbero preferire per esempio combinazioni a bassissimo contrasto; in linea di massima, comunque, la maggioranza dei navigatori ipovedenti la sottoscriverebbe.
La tabella prende in considerazione sfondi e caratteri a tinta unita; le immagini di sfondo e i caratteri del testo variamente colorati sono al 99,9% inaccessibili e, comunque, non confortevoli.
Indicazioni.
Nelle pagine web il testo non dovrebbe mai essere a stretto contatto con altri elementi quali: margini della finestra, immagini, bordi di tabelle, <div>, ecc.
Anche l'eccessiva frammentazione (testo suddiviso in più parti, posizionate in zone diverse della pagina e magari distanti fra loro), pregiudica l'accessibilità.
Questo fattore interessa anche l'accessibilità da parte dei disabili motori e non solo; contenuti adeguatamente distanziati risultano più usabili da parte di navigatori poco dotati di "manualità fine" (come quella richiesta per l'utilizzo del mouse).
Esempio di cattiva distribuzione del testo.
Indicazioni.
I frame (per fortuna in via di sostituzione coi "div"), le barre di navigazione, le tabelle, le linee di separazione orizzontali e gli altri elementi grafici, non sono per principio causa di inaccessibilità; il problema non è dato, come sempre, dagli strumenti come tali, ma dall'uso che se ne fa.
I frame, cavallo di battaglia dei siti web fino a ieri, permettono di costruire pagine composte da contenitori indipendenti tra loro a livello di visualizzazione dei contenuti. L'apparente comodità della soluzione nasconde vari problemi a livello di gestione delle pagine da parte di sistemi di navigazione alternativi e, quasi sempre, di orientamento a livello di URL delle pagine.
La questione è complessa; il consiglio, dettato anche dall'avanzamento della tecnologia e dalle nuove consuetudini, è utilizzare strumenti più evoluti.I problemi di accessibilità che affliggono generalmente le barre di navigazione sono:
Questo genere di problemi sono generalmente causati da esigenze grafiche derivanti dal fatto che le barre di navigazione vengono alloggiate in contenitori dalle dimensioni obbligate e dalla scarsa attenzione verso l'usabilità del sito.
Soluzioni possibili:
Buon esempio di barra di navigazione principale.
Le tabelle dovrebbero essere utilizzate per contenere dati e informazioni più leggibili in formato tabellare, non per costruire il layout delle pagine...
Ogni tabella dovrebbe contenere una descrizione <summary> e delle celle d'intestazione <th>. Questi elementi permettono di descrivere e ricavare informazioni utili circa l'organizzazione delle tabelle a favore dei navigatori disabili visivi.
L'organizzazione dei dati all'interno delle tabelle dovrebbe essere comunque essenziale, facile da leggere e logica; spesso i dati presenti nelle tabelle potrebbero essere esposti in modo altrettanto efficace in modo testuale lineare.
Consuetudini grafiche da evitare:
Esempio di tabella poco leggibile:
testo più piccolo, allineamento verticale disomogeneo,
testo a ridosso dei bordi delle celle
(e bordi delle celle non presenti).
Anche i form devono essere chiari (come leggibilità e contenuti) e facili da compilare:
Leggi anche: Il testo nella pagina e Organizzazione della pagina.
Indicazioni.
| Intest_1 | Intest_2 | Intest_3 | Intest_4 |
|---|---|---|---|
| A2 | B2 | C2 | D2 |
| A3 | B3 | C3 | D3 |
| A4 | B4 | C4 | D4 |
| A5 | B5 | C5 | D5 |
Anche le immagini non sono un tabù, se adeguatamente dimensionate a favore degli ipovedenti e ben descritte (tag alt), per i non vedenti.
Le immagini animate, intermittenti o cangianti, sono da evitare, soprattutto se la variazione avviene ad intervalli molto brevi; il problema, oltre che per gli ipovedenti, si pone rispetto ai soggetti epilettici.
In conseguenza di quanto detto fin qui, è importante sottolineare come le immagini non dovrebbero essere utilizzate come sfondo della pagina, non devono fare da sfondo al testo e quest'ultimo non deve esservi a ridosso.
La piaga delle immagini di sfondo...
Le immagini dovrebbero essere dimensionate in modo da essere interamente visibili all'interno di una schermata ad una risoluzione video relativamente bassa (800 x 600); quindi non più alte di 400-450 e non più larghe di 700-750 pixel.
La descrizione testuale delle immagini (attributo Alt), raccomandata per l'accessibilità dei non vedenti, è utile per la generalità dei navigatori.
Molto spesso le immagini vengono utilizzate anche per presentare contenuti testuali; ad es. per: strumenti di navigazione (barre, menù, pulsanti), intestazioni, pagine di "benvenuto", ecc. In questi casi, oltre al problema del contrasto, c'è quello dei bordi sfumati, delle ombreggiature e dei vari altri artifici escogitati dai grafici "creativi"... Il principale problema a livello ipovisione è costituito dall'impossibilità di modificare le dimensioni del testo (salvo utilizzare browser tipo Opera).
Il problema si ripropone ulteriormente ingigantito per le "mappe immagine" (leggi anche I link).
Va poi sottolineato come il testo inserito nelle immagini non viene intercettato dai motori di ricerca.
Esempio di home page
fatta completamente di immagini...
Indicazioni.
Gli elementi caratteristici e fondanti di una pagina web (spesso più dei contenuti...), sono i collegamenti ipertestuali (link), elementi testuali e/o grafici "attivi", che permettono all'utente della rete di "navigare" verso altre pagine e/o accedere a qualche tipo di servizio.
Tradizione vuole che i link testuali siano così rappresentati:
testo blu per link non visitati;
testo viola 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 e predefinite appena descritte non sono più una certezza; spesso la sottolineatura viene eliminata e i colori modificati. Sopratutto quando la pagina contiene molti link, la sottolineatura viene omessa, salvo farla riapparire al passaggio del mouse.
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 per link non visitari;
testo viola grassettato per link visitati;
testo azzurro grassettato per link non visitari
testo lilla grassettato per link visitati.
Com'è noto, anche le immagini possono essere "lincate" (pulsanti, disegni, foto...).
La comparsa della manina al passaggio del mouse, in questo caso potrebbe non essere sufficiente ai fini della percezione visiva. Quando possibile si raccomanda di associare all'immagine un elemento testuale e, comunque, di inserire un adeguato riferimento nell'ALT.
La soluzione consistente nell'inserire un bordo all'immagine che si comporti a livello cromatico in modo da marcare la presenza di un link è sconsigliata, sia per la disomogenea interpretazione da parte dei browser, sia perché "disapprovata" con l'avvento dell'XHTML.
Le immagini "mappate", dove ciascun settore implementa un link diverso, dovrebbero essere trattate con ulteriore cura a livello di marcatura e descrizione; meglio sarebbe, inoltre, lasciare un po' di spazio tra un settore e l'altro, in modo che il puntatore del mouse possa cambiare aspetto e permettere di capire quale link si sta attivando.
Si tratta di "eventi" che si verificano:
Gli effetti di attivazione comportano la temporanea modifica della formattazione del testo e/o dello sfondo relativo al link, ovvero la comparsa di immagini e oggetti vari.
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 ipovedente. 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; aiuta a capire quale link si sta per attivare (provvidenziale nelle barre di navigazione mal organizzate).
Effetti di attivazione dei link:
"diodati.org" a:active, "Ipovisione..." a:hover.
Nel Web anche la relazione tra interlinea, testo lincato ed effetti di attivazione dei link, può riservare cattive sorprese in fatto di accessibilità.
In una visualizzazione ingrandita capita più spesso che il testo lincato venga spezzato su due o più righe. Se l'interlinea è maggiorata, passando col puntatore del mouse da una riga all'altra si assiste ad un'intermittenza degli effetti di attivazione dei link.
L'effetto visivo è assai fastidioso e può arrivare a compromettere la leggibilità stessa del testo, nonché, in alcuni casi, un certo abbagliamento.
Vedere anche "Frame, barre di navigazione, tabelle, form".
Indicazioni.
Si sono già affrontate le questioni legate alla distribuzione del testo nella pagina e alla distanza tra questo e gli elementi grafici e le immagini. A questo punto bisogna capire come organizzare e dove posizionare tutti questi "ingredienti".
Sono da evitare in primo luogo le pagine troppo lunghe, perché potenzialmente più "pesanti" e comunque meno gestibili. Se necessario implementare un adeguato sistema di navigazione all'interno della pagina.
Non esagerare con gli elementi grafici: troppa grafica finisce col confondere e disturbare, invece di enfatizzare ed abbellire.
Le barre di navigazione, presenti sotto diverse forme nella maggioranza dei siti, tolgono una porzione a volte considerevole di spazio utilizzabile; sono in questo senso da preferirsi quelle posizionate sopra e in fondo alla pagina rispetto a quelle laterali.
Non è indispensabile che da ogni pagina si possano raggiungere tutte le altre sezioni del sito. Meglio strutturare un sistema di pagine indice (magari "annidate"), e sottopagine di contenuti; in questo modo la navigazione tra una sezione e l'altra del sito sarà assegnata alle pagine indice/sottoindice ed il tutto risulterà più "leggero", accessibile efruibile.
Questa soluzione migliora, evidentemente, l'usabilità da parte degli ipovedenti; i normovedenti preferiscono generalmente la direzione opposta: poche pagine ricche di informazioni (a costo di essere microscopiche?...), piuttosto che molte pagine assai caratterizzate.
In una pagina web non dovrebbe inoltre mancare la barra di navigazione "briciole di pane" (breadcrumbs).
Esempio di barra di navigazione
"briciole di pane": "Ti trovi in:...".
Evita la comparsa della barra di scorrimento orizzontale nella finestra del browser (consultare i capitoli successivi); questo è uno dei problemi più frequenti e fastidiosi, conseguenti soprattutto alla non prevista possibilità di adattamento del layout alla risoluzione dello schermo.
Ogni pagina dovrebbe contenere un titolo, visualizzato anche nella "barra del titolo" del browser.
La parte superiore della pagina dovrebbe contenere:
Queste informazioni devono essere quanto più chiare, leggibili e pulite possibile; il navigatore deve prima farsi un'idea di cosa l'aspetta, solo dopo può essere stupito con gli effetti speciali...
Un'altra malsana abitudine dei webmaster è quella di riproporre a fondo pagina gli stessi link di navigazione inseriti in testa, magari con caratteri ancora più piccoli e quindi meno leggibili... Meglio inserire un "torna all'inizio" ed evitare inutili ridondanze.
La home page di un sito dovrebbe contenere solo i dati salienti del proprietario, una frase di benvenuto, un breve spazio dal contenuto accattivante rispetto ai temi trattati e un indice generale dei contenuti che rimanda agli eventuali indici di sezione contenuti in altrettante pagine.
Gli indici di sezione dovrebbero permettere di navigare tra le varie sezioni del sito e presentare l'elenco dei contenuti della sezione.
Al livello successivo i contenuti veri e propri, con il link che permette di tornare all'indice di sezione e alla home page. Naturalmente nei grandi siti ci possono essere ulteriori passaggi intermedi.
Perché allora non assemblare il tutto in una pagina con più colonne e <div> usati come contenitori di barre di navigazione?
Perché non è plausibile mettere una balena (molti contenuti e link di navigazione), in una scatola di tonno quale è una pagina web!...
Esempio di "balena in una scatola di tonno"...
Una pagina web con più di tre colonne è sicuramente inaccessibile. Tre colonne sono da considerarsi limite e potenzialmente problematiche per home page e pagine indice; una pagina di contenuti non dovrebbe essere organizzata su più di due colonne.
Da evitare insomma, l'eccessiva commistione di contenuti diversi nella stessa pagina. Inserire nella stessa pagine molte informazioni testuali, molte immagini, molta grafica e magari qualche form, ne compromette l'usabilità.
Indicazioni.
Le pagine di un sito web dovrebbero:
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 a parlarne, deprecarli, nonché 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"), oltre a facilitare e centralizzare la gestione della struttura di un sito, hanno aperto nuove strade verso l'accessibilità, non meno insidiose, però, dei siti paralleli, soprattutto a livello ipovisione.
I CSS possono gestire praticamente tutti gli aspetti legati alla presentazione delle pagine, quindi costituiscono una risorsa potenzialmente illimitata rispetto al problema accessibilità.
Uno "stile", qualsiasi elemento gestisca, vincola 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.
La ricetta che trasforma uno strumento "limitante" come un CSS in risorsa per l'accessibilità può essere così riassunta:
A proposito della relazione tra dimensione del testo e unità di misura:
In realtà è proprio lo scarso adattamento, dovuto spesso all'imperizia nell'implementazione dei CSS, a causare i maggiori problemi. Il perché è presto detto: lo sviluppatore non tiene conto che il navigatore ipovedente parte comunque da impostazioni in qualche modo personalizzate e che, quindi, l'efficacia dei suoi CSS è tutta e sempre da verificare.
Esempio di layout stravolto
a risoluzione video 800x600
e a visualizzazione ingrandita.
Impostare anche nei CSS dimensioni del testo non inferiori al 100%:
Una prassi oggigiorno relativamente comune in diversi siti, nonché sostenuta da alcuni esperti di accessibilità, prevede le seguenti visualizzazioni:
Difetti di questa soluzione:
L'approssimazione nell'implementazione dei CSS comporta spesso sovrapposizione di contenitori e contenuti se si imposta una visualizzazione ingrandita dal browser.
Esempio di sovrapposizione grafica
(IE impostato su "carattere|Molto grande").
I CSS dovrebbero essere utilizzati per ampliare le possibilità di personalizzazione della visualizzazione di un sito, non allo scopo di perpetrare quello che Michele Diodati giustamente chiama: "pregiudizio della stampa" (obbligare la visualizzazione di una pagina web come si trattasse di un libro stampato su carta).
E' vero che i browser dispongono di funzioni in grado di aggirare le forzature imposta dal cattivo utilizzo dei CSS, ma non si può pretendere che un navigatore sappia e voglia ogni volta manipolare il proprio computer, né che i risultati siano anche in questo caso soddisfacenti.
Utilizza i CSS destinati alla stampa su carta ("media=print"), per predisporre documenti stampati altrettanto accessibili/leggibili: caratteri chiari, di dimensioni non inferiori a 14 pt e ben contrastati.
Indicazioni.
Si è già accennato alle insidie derivanti dalla risoluzione dello schermo (e dalla grandezza in pollici del monitor dell'utente).
Il presupposto è che non tutti possono permettersi un monitor di grandi dimensioni (ragioni economiche e/o logistiche), e molti tra i navigatori ipovedenti preferiscono una minore risoluzione dello schermo; meglio oggetti più grandi e relativamente meno definiti.
A ciò va aggiunto anche che la dimensione di diversi oggetti grafici e relativi contenuti testuali non è gestibile attraverso le proprietà dello schermo: finestre di segnalazione di errori, finestre che gestiscono gli elementi presenti nel Pannello di controllo di Windows, puntatori del mouse, ecc. Dunque anche a causa di questi limiti, l'utilizzatore ipovedente è quasi costretto a mantenere la risoluzione dello schermo il più possibile bassa.
Le ripercussioni di questa "scelta" sulla visualizzazione delle pagine Web possono essere devastanti, nella misura in cui le pagine stesse non sono progettate secondo criteri di dimensionamento proporzionale degli elementi.
Gli elementi grafici visualizzabili in una pagina Web possono essere dimensionati in maniera relativa o assoluta. Il problema naturalmente non è tanto quello dell'altezza, ma della larghezza degli elementi stessi. Ad es., se una tabella o un altro elemento grafico sono larghi 1000 pixel, mentre lo schermo dell'utilizzatore è impostato a 800x600, comparirà la barra di scorrimento orizzontale nella parte bassa della finestra del browser; questo significa che il navigatore sarà costretto a spostare continuamente la barra per consultare il contenuto della tabella.
Esempio di elementi dimensionati in modo assoluto
comparsa della barra di scorrimento orizzontale
colonna di destra completamente nascosta
(definizione video 800x600).
Dunque non si può prescindere dall'impostare la larghezza degli oggetti in percentuale; una tabella larga il 100% della finestra, sarà interamente visibile con qualsiasi risoluzione video.
Come si diceva, con l'aumentare della risoluzione video diminuisce la dimensione degli oggetti, testo compreso. Questo significa che se imposti un contenuto testuale ad una dimensione inferiore al 100% ad una risoluzione video 800x600, chi visualizzerà il testo ad una definizione maggiore farà più fatica a leggere.
Se inserisci un'immagine 2000x2000 px in una pagina web, praticamente nessun navigatore potrà averne una ragionevole visione d'insieme. Come detto in precedenza, le immagini dovrebbero essere dimensionate in modo da essere interamente visibili all'interno di una schermata ad una risoluzione relativamente bassa (800x600); quindi non più alte di 400-450 e non più larghe di 700-750 px.
Indicazioni.
Molti l'hanno intravista, ma pochi osano metterci mano; gli ipovedenti, forse per necessità, ci provano più di altri. Ci riferiamo alla scheda Aspetto della finestra Proprietà dello schermo di Windows.
In questa finestra e possibile selezionare e creare una "Combinazione" di visualizzazione in modo da avere una presentazione a schermo il più possibile aderente alle proprie necessità percettive: sfondi delle finestre, proprietà del testo, dimensioni delle barre, dei menù, delle icone ecc.; in assenza di specifiche indicazioni a livello di applicazione, il SO utilizzerà dette combinazioni.
Quasi sempre in fase di sviluppo gli attributi/proprietà grafiche degli oggetti (caselle di testo, pulsanti, etichette, sfondi delle finestre ecc.), possono essere impostate in maniera personalizzata, ovvero lasciando il valore Predefinito/Standard/Default. Se non si specifica alcun valore personalizzato, la visualizzazione dell'elemento avviene in base ai valori impostati nella Combinazione di visualizzazione selezionata nella scheda Aspetto nella finestra Proprietà dello schermo di cui sopra.
Questo meccanismo influenza anche la visualizzazione delle pagine Web. Ciò significa che in assenza di indicazioni specifiche, le pagine saranno visualizzate secondo i parametri standard utilizzati dal computer del navigatore. Quale foglio di stile è così accessibile e versatile?!...
Esempio di conflitto con le impostazioni di sistema
Combinazione a contrasto elevato testo giallo su sfondo nero;
lo sfondo (non obbligato) e il testo verde/rosso scuro (obbligato),
danno come risultato l'illeggibilità.
Non si pretende che i contenuti web siano privi di qualsiasi caratterizzazione, anzi; però se si sceglie
di utilizzare i fogli di stile o si adottano soluzioni grafiche complesse e ardite, bisognerebbe comunque
fare in modo che le pagine siano adeguatamente visualizzate senza CSS e attraverso le impostazioni scelte
dal navigatore.
(Informazioni sulla personalizzazione dell'aspetto di Windows:
www.subvedenti.it/IW/IW.asp)
Indicazioni.
Anche i browser dispongono di strumenti di controllo della visualizzazione che intervengono generalmente a valle di quelli messi a disposizione dal SO e in alternativa alle visualizzazioni create dagli sviluppatori anche attraverso CSS.
Detti strumenti intervengono a livello di:
Esempio di filtraggio in IE.
Il proficuo utilizzo degli strumenti di visualizzazione, filtraggio e personalizzazione messi a disposizione dai browser dipende da tre fattori:
A livello ipovisione le funzionalità offerte dai browser più comuni sono attualmente:
Indicazioni.
Al termine di questo breve, visto il tema, e spero utile excursus all'interno degli aspetti più salienti delle problematiche relative all'accessibilità e fruibilità del Web da parte dei navigatori ipovedenti, ritengo utile riproporre in forma compatta le indicazioni proposte lungo il cammino.
Una pagina web accessibile agli screen-reader deve essere:
Utilizza tipi di carattere comuni e di facile lettura.
Allinea il testo normale a sinistra; in caso di testo allineato a destra o al centro, contienine la lunghezza complessiva e distribuiscilo in maniera uniforme tra le eventuali diverse righe. Evita il testo giustificato.
| Intest_1 | Intest_2 | Intest_3 | Intest_4 |
|---|---|---|---|
| A2 | B2 | C2 | D2 |
| A3 | B3 | C3 | D3 |
| A4 | B4 | C4 | D4 |
| A5 | B5 | C5 | D5 |
Le pagine di un sito web dovrebbero:
Di seguito vengono proposti una serie di test atti a verificare attraverso validatori automatici e manualmente l'accessibilità e usabilità di un sito (alcuni test di esempio rispetto ai temi trattati in questo documento sono disponibili all'indirizzo www.subvedenti.it/Sisi/Sìsì_indice.asp).
"Validare" le pagine, i CSS e gli eventuali altri strumenti utilizzati all'interno del sito.
Visualizza il sito con varie risoluzioni di schermo e con monitor di piccole dimensioni (le scritte grafiche, che non si possono ingrandire, sono comunque leggibili?).
Prova ad ingrandire il testo almeno fino al 150% utilizzando gli strumenti messi a disposizione dal browser (non solo deve essere possibile, ma la pagina deve conservare il più possibile un aspetto gradevole e funzionale).
Visualizza il sito impostando i filtri disponibili nel browser (immagini, colori, stili dei caratteri, carattere predefinito, colore dei link ed eventuali altri); il test deve essere fatto in modo selettivo e cumulativo. Prova anche a selezionare le combinazioni a "contrasto elevato" nella finestra Proprietà dello schermo di Windows e a visualizzare le pagine in B/N.
Visualizza il sito con differenti browser e con versioni diverse degli stessi.
Verifica che l'utilizzo dei CSS, unitamente alle impostazioni personalizzate/ingrandite (almeno fino al 150%), non crei sovrapposizioni di elementi e altri significativi stravolgimenti del layout.
Visualizza il sito in condizioni ambientali di penombra e di forte luce diffusa.
Prova a stampare delle pagine campione relative ai diversi test e verifica che anche la versione cartacea sia chiara, leggibile e gradevole.
Risorse web sull'accessibilità:
- www.constile.org
- www.crcitalia.it
- www.diodati.org
- www.html.it
- www.porteapertesulweb.it
- www.usabile.it
- www.w3c.it
- www.webaccessibile.org
- www.webxtutti.it
Siti culturali e accessibilità:
- Progetto Minerva
www.minervaeurope.org/publications/qualitycriteria-i/indice0402.htm
- Biblioteca Nazionale Marciana http://marciana.venezia.sbn.it/
Forum:
- "tutto sull'accessibilità" http://forum.diodati.org/elenco.asp?f=1&id=5150&ev=5150.
Mailing-list:
- Humana http://lists.bazzmann.com/mailman/listinfo/humana
- Ipovisione http://it.groups.yahoo.com/group/ipovisione/
- OsservatorioWeb http://it.groups.yahoo.com/group/osservatorioweb/
- WebAccessibile http://itlists.org/mailman/listinfo/webaccessibile;
Pagina aggiornata al: 01/04/10
Associazione Nazionale Subvedenti - ONLUS
sede legale: Via Clericetti, 22 - 20133 Milano
sede operativa: L.go Volontari del Sangue, 1 - 20133 Milano
tel/fax: 02 70 63 28 50
e-mail: info@subvedenti.it
Internet: www.subvedenti.it