versione 2.0 - gennaio 2004

di Franco Frascolla

E' permesso l'utilizzo anche parziale del presente elaborato,
previa comunicazione all'autore ed esplicita citazione.

Indice.

Premessa.

Prima parte - le basi.

• 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 dei link, tabelle, form... 
• Le immagini.
• I link.
• Organizzazione della pagina e del sito.

Seconda parte - l'adattabilità.

• Siti paralleli, visualizzazioni alternative,
  fogli di stile ("CSS").
• La risoluzione dello schermo.
• La visualizzazione e il sistema operativo.
• I browser.

Terza parte - vademecum e test di verifica.

• Riepilogo delle "Indicazioni".
• Test di verifica.

Premessa.

A distanza di un anno dalla prima versione di questo saggio molte cose sono accadute: l'anno europeo dei disabili, la legge sull'accessibilità dei siti della P.A., la nascita di diversi gruppi di lavoro sul tema, l'avanzamento della tecnologia CSS. In attesa del rilascio della versione 2.0 delle linee guida W3C, gli ipovedenti restano ancora in balia di mode, consuetudini e pregiudizi in fatto di Web e accessibilità, anche da parte di sedicenti esperti.

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 fruibilità del Web difficilmente gestibili.

A questi soggetti, qualche centinaia di migliaia di persone in Italia, va aggiunta la totalità dei fruitori della rete, molto spesso costretti a stare per molte ore davanti al monitor e magari con delle fonti luminose che vi si riflettono sopra, tanto per fare un esempio. Insomma, il problema è molto più vasto di quanto si possa ritenere ad una prima analisi.

In questa seconda versione del fortunato saggio, troverai aggiornamenti e approfondimenti sul tema, nonché qualche immagine d'esempio. Le considerazioni e i suggerimenti pratici conseguenti scaturiscono dall'ormai pluriennale esperienza personale, fatta anche di osservazione di terzi e test sul campo.

Anche questa seconda versione non vuole essere un manuale tecnico per sviluppatori di contenuti web, ma uno strumento d'indirizzo e culturale.

Franco Frascolla

indice

Dimensioni del testo.

Al momento di decidere la grandezza del testo da inserire in una pagina web, occorre tenere conto anche delle seguenti variabili utente:

• dimensione del monitor;
• "definizione" del monitor;
• interpretazione delle informazioni relative alla formattazione del testo da parte del browser utilizzato.

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.

Esempio di pagina
con testo piccolo
e non modificabile in IE.

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, né il contrario, bensì fare in modo che attraverso i normali strumenti di dimensionamento messi a disposizione dai browser (compreso il limitatissimo Internet Explorer), ciascuno possa regolare la visualizzazione secondo le proprie necessità.

Impostare (anche nei CSS) dimensioni del testo non inferiori al 100%/1em:

• limita lo stravolgimento del layout a visualizzazione ingrandita;
• garantisce a tutti un adeguato confort nella lettura;
• evita all'ipovedente di modificare le impostazioni di visualizzazione a seconda del sito visitato.

Vedi i documenti correlati relativi a dimensione del testo e spessore del testo e i consigli a proposito delle immagini.

Indicazioni.

• dimensioni del testo inferiori al 100%/1em (14pt/px), sono poco accessibili;
• imposta la dimensione del testo secondo parametri relativi e adeguatamente interpretati da tutti i browser (attualmente IE non gestisce in modo relativo i CSS con dimensioni del testo impostate in px).

indice

Tipi di carattere.

I problemi di accessibilità legati ai tipi di carattere sono essenzialmente due:

• leggibilità;
• interpretazione/visualizzazione da parte del browser.

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, Times New Roman e Courier New; l'Arial, a mio parere, è in assoluto il più leggibile.

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, ad es. quando un occidentale tenta di caricare una pagina web di un sito scritto in giapponese, 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.

indice

Attributi del testo.

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.

Nella colonna centrale:
molte righe di testo in grassetto
affaticano più che enfatizzare
e migliorare l'accessibilità
(la pagina è, comunque,
un ricettacolo di inaccessibilità...)

Vedi anche il documento correlato relativo allo spessore del testo.

Indicazioni.

• utilizza il grassetto nei titoli, per brevi parti significative di testo e in caso di tipi di carattere dal tratto sottile. Molte righe di grassetto consecutive possono affaticare la vista. Utilizza perciò il grassetto solo dove veramente necessario;
• utilizza il corsivo solo nei titoli e nelle citazioni. Molte righe consecutive di corsivo possono affaticare la vista;
• evita il sottolineato:
  • i browser lo utilizzano generalmente come marcatore dei collegamenti ipertestuali (link); si rischia pertanto l'erronea interpretazione dell'attributo;
  • la sottolineatura interferisce con la forma di alcuni caratteri (g, j, p, q e y);
• evita l'uso simultaneo degli attributi. Più il tratto è ricco e complesso, meno è leggibile.
• utilizza <strong>...</strong> in luogo di <b>...</b> e <em>...</em> in luogo di <i>...</i>. Queste soluzioni permettono l'enfatizzazione universale del testo, a prescindere, cioè, dalla periferica di output utilizzata.

indice

Allineamento del testo.

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 ed affaticare la vista.

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, se distribuito su più righe, dovrebbe essere gestito in modo che queste abbiano una lunghezza analoga. Righe di diversa lunghezza, se allineate a destra, pregiudicano la leggibilità.

Esempio di giustificazione
e allineamento a destra del testo.

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.

indice

Organizzazione/distribuzione del testo.

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; inoltre ci si orienta meglio e 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.

• presenta il testo in modo logico, badando alla diversificazione ed enfatizzazione dei titoli rispetto al corpo del testo e suddividere quest'ultimo in paragrafi lunghi non più di una decina di righe;
• non avvicinare o allontanare eccessivamente le righe di testo tra loro, modificando l'interlinea; le impostazioni predefinite sono generalmente ottimali.
• Tra blocchi di testo diversamente formattati, evita l'uso di <br>.

indice

Contrasto testo-sfondo.

Il contrasto testo-sfondo, unitamente alle dimensioni del testo, rappresenta spesso una miscela esplosiva a livello di accessibilità.

Esempio di "miscela esplosiva"
tra testo di piccole dimensioni
e cattivo contrasto cromatico
(da notare soprattutto
la scritta rossa su sfondo arancione
al centro della pagina...)

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 nuovamente 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 credo che oltre il 90% dei navigatori sottoscriverebbe questa tabella.

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.

• il rosso e il verde, sono i colori più problematici per i daltonici;
• le tonalità accese e il bianco sono poco riposanti e possono provocare abbagliamento;
• le tonalità medie, soprattutto se combinate tra loro, sono a basso contrasto;
• scegli sfondi chiari e tenui con testo decisamente scuro o viceversa;
• il basso contrasto tra testo e sfondo dalle tonalità medie, normalmente sconsigliato ("NI"), può essere aumentato attraverso <strong>;
• diversi livelli di saturazione dello stesso colore per testo e sfondo, possono essere causa di illeggibilità.

indice

Il testo nella pagina.

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

Esempio di buona distribuzione del testo
in un classico layout a tre colonne.

Indicazioni.

• Lascia almeno 10-15 px di distanza tra il testo e gli altri contenuti, margini della finestra compresi;
• non suddividere lo stesso blocco di testo in settori della pagina distanti tra loro.

indice

Frame, barre di navigazione,
tabelle, form...

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à per gli ipovedenti (fai comunque riferimento ai principi di accessibilità per i non vedenti...); se tieni conto dei suggerimenti dati fin qui, le tue pagine non dovrebbero avere particolari problemi.

I problemi di accessibilità a livello di ipovisione che affliggono generalmente le barre di navigazione sono:

• testo più piccolo del "normale";
• testo che va a capo in modo arbitrario e poco comprensibile;
• difficoltà di distinguere una voce dall'altra;
• effetti di attivazione dei link ("a:hover", "a:active") poco evidenti.

Questo genere di problemi sono generalmente causati da esigenze grafiche derivanti dal fatto che le barre di navigazione vengono alloggiate in "colonne-div".
Soluzioni possibili:

• addomesticare il ritorno a capo del testo tramite <br>;
• separare verticalmente ciascuna voce dell'elenco (0,5em);
• formattare le barre di navigazione verticali come elenchi puntati (il pallino aiuta ad identificare le voci);
• implementare gli effetti di attivazione in modo che anche visivamente sia facile ed immediato capire dove ci si trova.

Buon esempio di barra di link verticale
(sul secondo link effetto "a:hover",
sul quarto "a:active").

Anche i form devono essere chiari (come leggibilità e contenuti) e facili da compilare:

• il modulo dev'essere adeguatamente separato ed evidenziato rispetto ad eventuali altri contenuti della pagina;
• i campi devono essere adeguatamente separati tra loro (con interruzioni di paragrafo), in modo che sia chiaro cosa e dove si andrà a scrivere;
• le etichette dei campi devono essere brevi ma esplicative e, in generale, seguire le stesse regole di accessibilità viste a proposito del testo;
• la parte attiva dei campi (caselle di testo, pulsanti, ecc.), devono seguire le stesse regole di accessibilità viste a proposito del testo e degli altri elementi grafici.

Buon esempio di form.

Leggi anche: Il testo nella pagina
e Organizzazione della pagina.

Indicazioni.

• contieni il numero e la dimensione delle barre di navigazione. Evita di formattarle in modi diversi tra loro e di disseminarle in tutta la pagina;
• implementa gli effetti di attivazione in modo che anche visivamente sia facile ed immediato capire dove ci si trova.
• nelle barre di navigazione verticali:
  • addomestica il ritorno a capo del testo tramite <br>;
  • formatta le voci come elenco puntato;
  • separa verticalmente ciascuna voce dell'elenco (0,5em).
• nelle barre di navigazione orizzontali:
  • addomestica il ritorno a capo del testo tramite <br>;
  • separa adeguatamente le voci tra loro.
• le informazioni presenti nelle tabelle devono rispondere agli stessi requisiti di accessibilità previsti per gli altri elementi; meglio differenziare leggermente lo sfondo tra righe e colonne, come nell'es. che segue;

Intest_1	Intest_2	Intest_3	Intest_4
A2	B2	C2	D2
A3	B3	C3	D3
A4	B4	C4	D4
A5	B5	C5	D5

• lascia almeno 10-15 px di distanza tra i contenuti presenti in una pagina;
• l'aspetto dei form deve seguire le stesse regole di accessibilità previste per il testo e gli altri elementi grafici.

indice

Le immagini.

Anche le immagini non sono un tabù (fai comunque riferimento ai principi di accessibilità per i non vedenti...).
Quelle statiche non danno particolari problemi, purché sufficientemente grandi e chiare; quelle in movimento, intermittenti o cangianti, sì...

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"... Naturalmente il principale problema, a livello ipovisione, è costituito dall'impossibilità di modificare le dimensioni del testo (salvo utilizzare il browser Opera).

Il problema si ripropone ulteriormente ingigantito per le "mappe immagine" (leggi anche I link).

Esempio di home page
fatta completamente di immagini...

Indicazioni.

• non utilizzare immagini come sfondo della pagina;
• evita le immagini dinamiche;
• non sovrapporre testo alle immagini;
• distanzia di almeno 10-15 px il testo e gli altri elementi dalle immagini;
• inserisci la descrizione testuale delle immagini, (<alt>);
• dimensiona le immagini in modo che siano interamente visibili nella schermata;
• i contenuti testuali delle immagini devono sempre essere chiari e leggibili.

indice

I link.

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.

Link testuali.

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.

Link non testuali.

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. Ecco perché è necessario inserire il bordo all'immagine in questione, magari ispessendolo leggermente. Così si otterrà lo stesso effetto visto a proposito del testo.

Nel caso delle immagini "mappate", dove ciascun settore implementa un link diverso, sarebbe bene 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; e poi, comunque, va inserita la descrizione testuale del link.

Gli "effetti di attivazione".

Si tratta di "eventi" che si verificano:

• al passaggio del puntatore del mouse sopra un link - "a:hover";
• alla selezione di un link tramite "Tab" (da tastiera) - "a:active".

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 che non ha il pieno controllo dello schermo. 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:
"Ivano Fossati" <a:active>,
"Daniele Sepe" <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.

Di seguito un esempio di link che va a capo con interlinea normale e maggiorata del 50%. Per provare l'effetto descritto spostare in modo più o meno veloce il puntatore del mouse tra le righe del secondo link.

Vedere anche "Frame, barre di navigazione, tabelle, form...".

Indicazioni.

• se possibile, cerca di mantenere la tradizionale convenzione circa la marcatura dei link testuali, usando il grassetto per aumentare il contrasto (fare riferimento a Contrasto testo-sfondo);
• nelle immagini usate come collegamento ipertestuale inserisci il bordo e ispessiscilo leggermente, onde ottenere un effetto analogo a quello dei link testuali;
• nelle "mappe immagine" separa i settori con collegamenti attivi in modo che il puntatore del mouse possa cambiare aspetto;
• fai in modo che sia sempre chiara la destinazione dei link, se necessario anche attraverso l'utilizzo di <title>;
• nelle "mappe immagine i contenuti testuali devono sempre essere chiari e leggibili;
• nei link evita gli "effetti di attivazione" che comportano lo spostamento di elementi testuali;
• nei link implementa "effetti di attivazione" basati sulla modifica del contrasto cromatico testo-sfondo e sull'utilizzo della sottolineatura.

indice

Organizzazione della pagina
e del sito.

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 alle laterali.

A sinistra nell'immagine:
esempio di barra di navigazione laterale.
 

Esempio di barra di navigazione superiore.

Non è secondo me 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 e fruibile. In sostanza si tratta di preferire le barre di navigazioni "verticali" (ad albero/gerarchiche), a quelle "orizzontali" (tutte le sezioni del sito raggiungibili da ogni pagina).

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.

Le barre di navigazione da me definite "verticali", meglio note con la definizione "briciole di pane" (breadcrumbs), possono naturalmente svilupparsi sia in orizzontale, come avviene di solito,

Esempio di barra di navigazione
"briciole di pane" comune,

...che in verticale, come nell'esempio che segue; in questo caso la struttura le rende più vicine agli abituali menù ad albero.

Esempio di barra di navigazione
"briciole di pane" ad albero.

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:

• il logo o testo che identifichi il "proprietario" del sito;
• il titolo o l'argomento trattato nella pagina;
• una barra di navigazione, il più possibile contenuta;
• un indice interno alla pagina stessa (quando necessario).

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... Perché non inserire un bel "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 in oggetto.

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.

Un'altra cosa da evitare, ma che scaturisce da quanto detto fin qui, è 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:

• essere chiare e semplici da gestire;
• presentare sempre l'URL effettivo nella barra degli indirizzi del browser;
• avere un titolo presente nelle pagine stesse e nella barra del titolo del browser;
• offrire strumenti di navigazione logici, snelli e coerenti in tutto il sito, preferibilmente di tipo "briciole di pane";
• non presentare più di tre colonne per home page e pagine indice e due per le pagine di contenuti;
• essere ben contestualizzate e caratterizzate;
• essere il più possibile leggere in termini di Kb.

indice

Siti paralleli, visualizzazioni alternative,
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 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à e ipovisione.

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:

• implementa i parametri di ciascuno stile in maniera relativa, non assoluta; (*) 
• prevedi più fogli di stile intercambiabili;
• prevedi e ottimizza fogli di stile specifici per ciascun media (schermo, stampa, ecc.);
• utilizza i CSS come risorsa alternativa, quindi non indispensabili rispetto al raggiungimento dell'accessibilità e ricorda che un foglio di stile si basa sui presupposti di chi lo sviluppa, non sulle esigenze reali del navigatore... Quindi un sito deve essere accessibile anche se il navigatore decide di disattivare i CSS, ovvero utilizzarne di propri.

(*) Le unità di misura "%" ed "em" sono considerate "relative" da tutti i maggiori browser.
L'unità di misura "pt" (nominalmente "assoluta"), dovrebbe essere utilizzata solo per i CSS progettati per la stampa ("media=print").
L'unità di misura "px", teoricamente "relativa", non viene riconosciuta come tale dagli attuali strumenti di gestione dei CSS di IE; questa errata interpretazione rende di fatto i valori così impostati "assoluti". Per questo "px" non andrebbe utilizzato nei CSS, pena l'inaccessibilità del sito a livello ipovisione.

Venire meno a questa semplice ricetta comporta di fatto l'inaccessibilità a livello ipovisione dei siti che utilizzano la tecnologia CSS.

Esempio di difficoltà
nel raggiungere
le versioni alternative
con IE impostato su
"Carattere|Molto grande",
i link si sovrappongono
allo sfondo rigato
diventando meno leggibili.

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.

Impostare anche nei CSS dimensioni del testo non inferiori al 100%/1em:

• limita lo stravolgimento del layout a visualizzazione ingrandita;
• garantisce a tutti un adeguato confort nella lettura;
• evita all'ipovedente di modificare le impostazioni di visualizzazione a seconda del sito visitato.

Una prassi oggigiorno relativamente comune in diversi siti, nonché sostenuta da alcuni esperti di accessibilità, prevede le seguenti visualizzazioni:

• "normale", quasi sempre inaccessibile;
• 2-3 versioni "ingrandite e ad alto contrasto", difficilmente raggiungibili e mal ottimizzate;
• 2-3 versioni "linearizzate", difficilmente raggiungibili, mal ottimizzate e brutte da vedere perché simil DOS...
• un complesso e defatigante strumento di personalizzazione per la creazione di una propria visualizzazione, anch'esso difficilmente raggiungibile.

Difetti di questa soluzione:

• non si tratta di visualizzazioni "alternative" se la versione normale è inaccessibile...
• le visualizzazioni alternative sono quasi sempre difficilmente raggiungibili;
• i CSS alternativi sono implementati in maniera approssimativa e danno risultati molto spesso sconfortanti se sovrapposti alle impostazioni utilizzate dall'utente.

L'approssimazione nell'implementazione dei CSS consiste quasi sempre nel cattivo utilizzo dell'elemento <float>, con conseguente 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 eccessibili/leggibili: caratteri chiari, di dimensioni non inferiori a 14 pt e ben contrastati.

Indicazioni.

• implementa i parametri di ciascuno stile in maniera relativa, non assoluta;
• prevedi più fogli di stile intercambiabili;
• prevedi e ottimizza fogli di stile specifici per ciascun media (schermo, stampa, ecc.);
• utilizza i CSS come risorsa alternativa, quindi non indispensabili rispetto al raggiungimento dell'accessibilità e ricorda che un foglio di stile si basa sui presupposti di chi lo sviluppa, non sulle esigenze reali del navigatore... Quindi un sito deve essere accessibile anche se il navigatore decide di disattivare i CSS, ovvero utilizzarne di propri;
• verifica l'efficacia di un fogli di stile (assenza di sovrapposizioni di contenitori e contenuti), con impostazioni ingrandite del browser almeno pari al 150%;
• parti da impostazioni di default, soprattutto per le dimensioni del testo, non inferiori al 100%/1em; questo presupposto limita lo stravolgimento del layout a visualizzazione ingrandita, garantisce un adeguato confort per tutti ed evita all'ipovedente di modificare le impostazioni di visualizzazione a seconda del sito visitato.

indice

La risoluzione dello schermo.

Si è già accennato nel corso della presente trattazione 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, che "perfetti" ma invisibili.

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 secondi 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 pagina.

Esempio di elementi dimensionati
in modo assoluto
con comparsa della
barra di scorrimento orizzontale
(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%/1em 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-750px.

Indicazioni.

• dimensiona gli oggetti presenti nella pagina in modo relativo/proporzionale;
• dimensiona le immagini in modo che siano interamente visibili nella schermata, anche a bassa risoluzione (800x600);

indice

La visualizzazione e il SO.

Molti l'hanno intravista, ma pochi osano metterci mano; gli ipovedenti, forse per necessità, ci provano più di altri. Mi riferisco 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;
l'immagine di sfondo (obbligato)
e il testo giallo di default (non 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.

Indicazioni.

• fai in modo che le pagine siano adeguatamente visualizzate senza CSS e attraverso le impostazioni di sistema scelte dal navigatore;
• se "obblighi", anche a livello di CSS, il colore dello sfondo, ricorda di "obbligare" anche quello del testo e viceversa.

indice

I browser.

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:

• visualizzazione, per modificare i parametri di visualizzazione implementati dagli sviluppatori;
• filtri, per escludere in parte o totalmente le regolazioni implementate dagli sviluppatori e restituire la gestione della visualizzazione delle pagine alle impostazioni di default del browser e del SO;
• personalizzazione, per costruire stili personalizzati da utilizzare in alternativa a quelli proposti/imposti dagli sviluppatori.

Esempio di filtraggio in IE.

Il proficuo utilizzo degli strumenti di visualizzazione, filtraggio e personalizzazione messi a disposizione dai browser dipende da tre fattori:

• livello di aderenza agli standard nel codice della pagina;
• logicità strutturale e funzionalità delle pagine e del sito nel suo complesso;
• semplicità e comprensibilità dei contenuti (a prescindere dalla presentazione...).

A livello ipovisione le funzionalità offerte dai browser più comuni sono attualmente:

• scadenti, per quanto riguarda Internet Explorer (interpretazione scadente degli standard di marcatura, CSS e limitate possibilità di personalizzazione);
• discrete per Mozilla/Netscape (migliore interpretazione degli standard di marcatura e buone funzionalità a livello di personalizzazione);
• eccellenti per Opera (migliore interpretazione degli standard di marcatura e buone funzionalità a livello di personalizzazione, tra cui spicca l'ingrandimento delle immagini contestualmente al testo).

Indicazioni.

• verifica cosa succede nel visualizzare le pagine create, con visualizzazioni diverse (ingrandite almeno fino al 150%, attraverso filtri e CSS diversi dai propri);
• cercare di rendere i contenuti il più possibile logici e gradevoli a prescindere della visualizzazione utilizzata.

indice

Riepilogo delle "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.

Dimensioni del testo.

• dimensioni del testo inferiori al 100%/1em (14pt/px), sono poco accessibili;
• imposta la dimensione del testo secondo parametri relativi e adeguatamente interpretati da tutti i browser (attualmente IE non gestisce in modo relativo i CSS con dimensioni del testo impostate in px).

Tipi di carattere.

Utilizza tipi di carattere comuni e di facile lettura.

Attributi del testo.

• utilizza il grassetto nei titoli, per brevi parti significative di testo e in caso di tipi di carattere dal tratto sottile. Molte righe di grassetto consecutive possono affaticare la vista. Utilizza perciò il grassetto solo dove veramente necessario;
• utilizza il corsivo solo nei titoli e nelle citazioni. Molte righe consecutive di corsivo possono affaticare la vista;
• evita il sottolineato:
  • i browser lo utilizzano generalmente come marcatore dei collegamenti ipertestuali (link); si rischia pertanto l'erronea interpretazione dell'attributo;
  • la sottolineatura interferisce con la forma di alcuni caratteri (g, j, p, q e y);
• evita l'uso simultaneo degli attributi. Più il tratto è ricco e complesso, meno è leggibile.
• utilizza <strong>...</strong> in luogo di <b>...</b> e <em>...</em> in luogo di <i>...</i>. Queste soluzioni permettono l'enfatizzazione universale del testo, a prescindere, cioè, dalla periferica di output utilizzata.

Allineamento del testo.

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.

Organizzazione/distribuzione del testo.

• presenta il testo in modo logico, badando alla diversificazione ed enfatizzazione dei titoli rispetto al corpo del testo e suddividere quest'ultimo in paragrafi lunghi non più di una decina di righe;
• non avvicinare o allontanare eccessivamente le righe di testo tra loro, modificando l'interlinea; le impostazioni predefinite sono generalmente ottimali.
• Tra blocchi di testo diversamente formattati, evita l'uso di <br>.

Contrasto testo-sfondo.

• il rosso e il verde, sono i colori più problematici per i daltonici;
• le tonalità accese e il bianco sono poco riposanti e possono provocare abbagliamento;
• le tonalità medie, soprattutto se combinate tra loro, sono a basso contrasto;
• scegli sfondi chiari e tenui con testo decisamente scuro o viceversa;
• il basso contrasto tra testo e sfondo dalle tonalità medie, normalmente sconsigliato ("NI"), può essere aumentato attraverso <strong>;
• diversi livelli di saturazione dello stesso colore per testo e sfondo, possono essere causa di illeggibilità.

Il testo nella pagina.

• Lascia almeno 10-15 px di distanza tra il testo e gli altri contenuti, margini della finestra compresi;
• non suddividere lo stesso blocco di testo in settori della pagina distanti tra loro.

Frame, barre dei link, tabelle, form...

• contieni il numero e la dimensione delle barre di navigazione. Evita di formattarle in modi diversi tra loro e di disseminarle in tutta la pagina;
• implementa gli effetti di attivazione in modo che anche visivamente sia facile ed immediato capire dove ci si trova.
• nelle barre di navigazione verticali:
  • addomestica il ritorno a capo del testo tramite <br>;
  • formatta le voci come elenco puntato;
  • separa verticalmente ciascuna voce dell'elenco (0,5em).
• nelle barre di navigazione orizzontali:
  • addomestica il ritorno a capo del testo tramite <br>;
  • separa adeguatamente le voci tra loro.
• le informazioni presenti nelle tabelle devono rispondere agli stessi requisiti di accessibilità previsti per gli altri elementi; meglio differenziare leggermente lo sfondo tra righe e colonne, come nell'es. che segue;

Intest_1	Intest_2	Intest_3	Intest_4
A2	B2	C2	D2
A3	B3	C3	D3
A4	B4	C4	D4
A5	B5	C5	D5

• lascia almeno 10-15 px di distanza tra i contenuti presenti in una pagina;
• l'aspetto dei form deve seguire le stesse regole di accessibilità previste per il testo e gli altri elementi grafici.

Le immagini.

• non utilizzare immagini come sfondo della pagina;
• evita le immagini dinamiche;
• non sovrapporre testo alle immagini;
• distanzia di almeno 10-15 px il testo e gli altri elementi dalle immagini;
• inserisci la descrizione testuale delle immagini, (<alt>);
• dimensiona le immagini in modo che siano interamente visibili nella schermata;
• i contenuti testuali delle immagini devono sempre essere chiari e leggibili.

I link.

• se possibile, cerca di mantenere la tradizionale convenzione circa la marcatura dei link testuali, usando il grassetto per aumentare il contrasto (fare riferimento a Contrasto testo-sfondo);
• nelle immagini usate come collegamento ipertestuale inserisci il bordo e ispessiscilo leggermente, onde ottenere un effetto analogo a quello dei link testuali;
• nelle "mappe immagine" separa i settori con collegamenti attivi in modo che il puntatore del mouse possa cambiare aspetto;
• fai in modo che sia sempre chiara la destinazione dei link, se necessario anche attraverso l'utilizzo di <title>;
• nelle "mappe immagine i contenuti testuali devono sempre essere chiari e leggibili;
• nei link evita gli "effetti di attivazione" che comportano lo spostamento di elementi testuali;
• nei link implementa "effetti di attivazione" basati sulla modifica del contrasto cromatico testo-sfondo e sull'utilizzo della sottolineatura.

Organizzazione della pagina e del sito.

Le pagine di un sito web dovrebbero:

• essere chiare e semplici da gestire;
• presentare sempre l'URL effettivo nella barra degli indirizzi del browser;
• avere un titolo presente nelle pagine stesse e nella barra del titolo del browser;
• offrire strumenti di navigazione logici, snelli e coerenti in tutto il sito, preferibilmente di tipo "briciole di pane";
• non presentare più di tre colonne per home page e pagine indice e due per le pagine di contenuti;
• essere ben contestualizzate e caratterizzate;
• essere il più possibile leggere in termini di Kb.

Siti paralleli, visualizzazioni alternative, fogli di stile ("CSS").

• implementa i parametri di ciascuno stile in maniera relativa, non assoluta;
• prevedi più fogli di stile intercambiabili;
• prevedi e ottimizza fogli di stile specifici per ciascun media (schermo, stampa, ecc.);
• utilizza i CSS come risorsa alternativa, quindi non indispensabili rispetto al raggiungimento dell'accessibilità e ricorda che un foglio di stile si basa sui presupposti di chi lo sviluppa, non sulle esigenze reali del navigatore... Quindi un sito deve essere accessibile anche se il navigatore decide di disattivare i CSS, ovvero utilizzarne di propri;
• verifica l'efficacia di un fogli di stile (assenza di sovrapposizioni di contenitori e contenuti), con impostazioni ingrandite del browser almeno pari al 150%;
• parti da impostazioni di default, soprattutto per le dimensioni del testo, non inferiori al 100%/1em; questo presupposto limita lo stravolgimento del layout a visualizzazione ingrandita, garantisce un adeguato confort per tutti ed evita all'ipovedente di modificare le impostazioni di visualizzazione a seconda del sito visitato.

La risoluzione dello schermo.

• dimensiona gli oggetti presenti nella pagina in modo relativo/proporzionale;
• dimensiona le immagini in modo che siano interamente visibili nella schermata, anche a bassa risoluzione (800x600);

La visualizzazione e il sistema operativo.

• fai in modo che le pagine siano adeguatamente visualizzate senza CSS e attraverso le impostazioni di sistema scelte dal navigatore;
• se "obblighi", anche a livello di CSS, il colore dello sfondo, ricorda di "obbligare" anche quello del testo e viceversa.

I browser.

• verifica cosa succede nel visualizzare le pagine create, con visualizzazioni diverse (ingrandite almeno fino al 150%, attraverso filtri e CSS diversi dai propri);
• cercare di rendere i contenuti il più possibile logici e gradevoli a prescindere della visualizzazione utilizzata.

indice

Test di verifica.

Non avendo molta fiducia negli attuali sistemi di "validazione" dei siti, se non altro perché gli ipovedenti continuano ad essere i più penalizzati sotto il profilo dell'accessibilità e fruibilità del Web, propongo una serie di test empirici e basati sul buonsenso.

Alcuni test di esempio rispetto ai temi trattati in questo documento sono disponibili all'indirizzo www.subvedenti.it/Sisi/Sìsì_indice.asp.

1. Risoluzione e dimensioni dello schermo.

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?).

2.  Leggibilità del testo.

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

3. Opzioni di visualizzazione.

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.

4. Software di navigazione.

Visualizza il sito con differenti browser e con versioni diverse degli stessi.

5. CSS.

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.

6. Condizioni ambientali.

Visualizza il sito in condizioni ambientali di penombra e di forte luce diffusa.

7. La stampa.

Prova a stampare delle pagine campione relative ai diversi test e verifica che anche la versione cartacea sia chiara, leggibile e gradevole.

indice