Web e ipovisione:
come personalizzare la lettura

Indice.

Prefazione.

Introduzione.

Predisposizioni di Windows XP.

MS Internet Explorer.
- Dimensione dei caratteri.
- Colori.

Mozilla.
- Dimensione caratteri.
- Colori.

Opera.
- Dimensione dei caratteri.
- Colori.

Conclusioni.

Ringraziamenti.

La versione per il Web.

Prefazione.

L'accessibilità dei siti Web si realizza con una combinazione di diversi fattori, alcuni controllabili dall'utilizzatore disabile mentre altri sfuggono a questo controllo e sono di pertinenza di chi progetta, realizza e gestisce le pagine Web di un sito.

Fra i fattori sotto il controllo dell'utente possiamo citare innanzitutto la scelta del browser più adatto alle necessità personali, da combinare con eventuali ausili che ne possano migliorare le prestazioni. Ad esempio, per un cieco assoluto è indispensabile abbinare al browser uno screen reader. Per un ipovedente, un programma di ingrandimento può permettere di andare oltre le possibilità di visualizzazione del browser.

Questo manuale tuttavia si dedica ad uno specifico problema: come sfruttare al meglio il proprio browser per adattare la visualizzazione delle parti di testo di una pagina Web secondo le necessità personali. Si tratta quindi del problema della leggibilità del testo piuttosto che quello dell'accessibilità del contenuto della pagina nel suo complesso, problema quest'ultimo che dipende molto da come la pagina stessa è stata realizzata e quindi poco affrontabile con settaggi sul lato client. Fra l'altro, sarà utile sottolineare anche una differenza fondamentale che non tutti hanno chiara. Molto spesso, proprio per conferire caratteristiche grafiche particolari ad alcune parti testuali, queste vengono realizzate in forma di immagine. Dal punto di vista visivo, nella presentazione allestita dall'autore della pagina, l'effetto di questa simulazione può risultare gradevole e può sfuggire la differenza fondamentale che esiste fra un testo realizzato per mezzo di una immagine e lo stesso testo inserito come tale e associato ad un foglio di stile che gli conferisce il desiderato aspetto. Nel primo caso infatti l'utilizzatore poco può fare per migliorarne la leggibilità: può al più ingrandire l'immagine ma non può modificare né il tipo di font né tanto meno il contrasto fra caratteri e sfondo. Nel secondo invece, trattandosi di testo propriamente detto, si possono applicare gli accorgimenti consigliati in questo manuale.Questo introduce una ulteriore restrizione, anche se solo apparente, alla efficacia di quanto qui trattato.

Premesso questo, si deve però sottolineare che anche lo specifico problema della leggibilità del testo propriamente detto riveste molta importanza poiché, nella maggior parte dei casi, esso rappresenta la parte più significativa di una pagina Web per cui, se l'utilizzatore trova il modo di ottimizzare la sua visualizzazione, può sfruttare al meglio pagine Web anche non realizzate in modo particolarmente felice in partenza per chi ha problemi visivi.

Per inciso, si deve osservare che le necessità di molti ipovedenti, in fatto di dimensioni e tipo di font o di contrasto fra carattere e sfondo, sono poco compatibili con le esigenze estetiche di chi realizza le pagine, dato che generalmente oggi si da molta importanza, a ragione o a torto, agli aspetti accattivanti della presentazione.

Per conciliare queste due necessità contrastanti, su alcuni siti che si prendono cura del problema della leggibilità del testo da parte degli ipovedenti, vengono predisposte delle opzioni di personalizzazione della presentazione del testo. Date però le numerose preferenze dovute ai diversi difetti visivi, non sempre queste opzioni soddisfano il caso specifico dell'utente, oltre a complicare la progettazione e gestione del sito. Pur apprezzando questo sforzo di venire incontro alle necessità di una utenza allargata, tenuto conto anche che nella maggior parte dei siti non esiste neanche questo tipo di attenzione, è importante che l'utilizzatore ipovedente sia capace di predisporre il proprio browser per le proprie necessità, compito questo non banale, specialmente per persone poco esperte, data anche la complessità dei moderni programmi.

Si è pensato allora di fare cosa utile descrivendo in questo manuale le procedure da seguire passo passo per ottenere l'effetto voluto. Naturalmente, non è stato possibile prendere in considerazione in modo esaustivo tutta la varietà di browsers, nelle varie versioni, ma comunque riteniamo di aver coperto la maggioranza delle necessità con i tre browser prescelti.

Il lavoro si basa molto sulla esperienza personale dell'autore, Gabriele Fabbri che, essendo ipovedente, vive quotidianamente il problema ed ha cercato di aggirare le difficoltà di lettura sfruttando tutte le possibilità di scelta di visualizzazione disponibili sia a livello di sistema operativo sia all'interno dei vari browser provati. Ho pensato allora che questa sua esperienza avrebbe potuto essere di interesse per altri utenti meno esperti di lui e l'ho quindi incoraggiato a descrivere nel modo più chiaro e semplice possibile le procedure necessarie per fare le scelte di visualizzazione, procedendo passo dopo passo nei meandri dei menu del browser, iniziando con Internet Explorer, ma ripetendo poi l'analisi di altri due browser: Mozilla e Opera. Tenendo conto che Mozilla è praticamente la versione gratuita di Netscape Navigator e che quindi quanto detto per il primo vale anche per quest'ultimo, il lettore può trovare con buona probabilità in questo manuale le istruzioni che servono per il proprio caso, o informazioni utili per cambiare browser, se risulta evidente che ci può essere un vantaggio operando questo cambio.

Gabriele ed io teniamo comunque a precisare che questo lavoro non vuole avere la pretesa di insegnare niente a nessuno, ma solo di mettere a disposizione una esperienza.

Personalmente ritengo tuttavia valido, e soprattutto premiante, l'approccio pragmatico seguito da Gabriele, che si rifà all'antico adagio "Chi fa da sé fa per tre". In una situazione di fatto nella quale i siti ben accessibili, anche dal punto di vista di un ipovedente, sono molto pochi, e data anche la varietà di problemi percettivi che caratterizza questa popolazione di utenti Web, aspettarsi che tutti i problemi siano risolti da chi cura i siti equivale a condannarsi ad una perenne frustrazione dovuta all'inerzia dell'ambiente e ai tempi lunghi che sembrano necessari per la diffusione della cultura dell'accessibilità, come ormai dobbiamo constatare. Risolvere da soli almeno quei problemi che possono essere affrontati a livello client appare allora la messa in pratica dell'altro detto "Se la montagna non va da Maometto, allora Maometto andrà alla montagna". Del resto, chi ha lievi problemi visivi trova logico dotarsi di occhiali invece di aspettare che tutti i libri siano stampati con caratteri adatti alla propria miopia.

Purtroppo, questo è solo un aspetto dell'accessibilità. Su altri problemi, l'utilizzatore non può fare niente e quindi resta la necessità di lottare per far capire con quali regole progettare e realizzare i siti Web. La messa in rete di questo manuale vuole comunque essere un contributo alla discussione poiché siamo convinti che la diffusione della cultura dell'accessibilità passa anche attraverso l'approfondimento della discussione all'interno della comunità degli utenti con necessità speciali.

Paolo Graziani
e-mail: p.graziani@ifac.cnr.it 

indice 

Introduzione.

Quando si parla di accessibilità di pagine Web per una persona ipovedente bisogna tener presente che il problema è molto complesso, se si vuole considerare la specificità di questa problematica. Anche se può apparire paradossale, realizzare un sito accessibile anche ai non vedenti assoluti è molto più facile. Ad esempio, per rendere accessibili le componenti grafiche di una pagina, basta rendere disponibili i cosiddetti testi alternativi, indipendentemente dalla visualizzazione di queste componenti. Non ci sono problemi neanche per la lettura della parte testuale di una pagina Web, qualunque sia la sua presentazione a video. Infatti ai non vedenti generalmente non creano difficoltà le dimensioni, il tipo e il colore dei caratteri, il colore dello sfondo, né il contrasto tra questi o la presenza di un'immagine di sfondo, o ancor meno il colore dei link (non visitati, visitati e al passaggio del mouse).

Per quanto riguarda gli ipovedenti, questi fattori sono invece molto importanti, in alcuni casi addirittura fondamentali. Questo però non significa che tutti i siti Web debbano necessariamente adeguarsi ad uno stile di presentazione che tenga conto dei problemi specifici di tutte le tipologie dell'ipovisione. Infatti, oltre al fatto che è praticamente impossibile trovare un insieme di condizioni che possano soddisfare tutte le molteplici esigenze di una popolazione di utenti così differenziata, un tale vincolo limiterebbe moltissimo la libertà di espressione e ridurrebbe di fatto le potenzialità del Web. Dal momento che molti problemi sono risolvibili con adatti "settaggi" del proprio browser e dell'ambiente nel quale esso opera, ciò che veramente deve essere considerato da chi sviluppa pagine Web è il rispetto della flessibilità della presentazione, in modo che la pagina resti leggibile, senza sovrapposizioni e possibilmente senza far comparire la barra di scrolling orizzontale, anche quando si cambiano le condizioni di visualizzazione sul lato client, cioè sul browser dell'utente.

Ciò che si prefigge questo manuale è di illustrare ad un ipovedente come può migliorare e personalizzare la sua visione delle pagine Web, agendo sul suo browser. Le spiegazioni che seguono sono create specificamente per ipovedenti inesperti che, con un po' di applicazione, riusciranno sicuramente ad accedere in modo più facile e veloce a molte più pagine, con alcuni casi di trasformazione di pagine totalmente inaccessibili in pagine versatili e facili da consultare.

Certi siti mettono a disposizione fogli di stile personalizzabili dagli utenti, ma spesso il risultato non è soddisfacente e alcune volte perfino dannoso e fastidioso.

Imparando questi piccoli settaggi illustrati successivamente tutti noi riusciremo a visualizzare le pagine in modo più consono ai nostri problemi visivi. Naturalmente, tutto ha un limite e molti siti restano non accessibili perché ad esempio, se creati con animazioni molto complesse, come unica forma di informazione per quella pagina, ce veramente poco da fare. Per le pagine che invece contengono molto testo o immagini già ben comprensibili, con questi accorgimenti diventeranno personalizzabili, anche se il progettista del sito non ha previsto nessun tipo di personalizzazione.

Gli accorgimenti da utilizzare sono prima di tutto quelli disponibili sul sistema operativo, tipicamente MS Windows. Dato che sono in uso varie versioni di Windows e dato che per alcune di esse sono già disponibili in rete documenti che aiutano in queste operazioni di settaggio per gli ipovedenti, in questo manuale mi limiterò a dare dei suggerimenti relativi a Windows XP poiché, essendo questa versione rilasciata da non molto tempo, e presentando delle specifiche diversità rispetto alle precedenti versioni di Windows, è utile integrare le informazioni già disponibili per completare il quadro delle possibilità. Per chi dispone di altre versioni di MS Windows, consiglio di consultare il sito curato da Flavio Fogarolo (http://www.provvstudi.vi.it/erica) dove sono disponibili anche dei puntatori particolarmente studiati per un utilizzatore ipovedente, da scaricare ed installare ad integrazione di quelli originali della propria macchina. Tali puntatori funzionano bene con tutte le versioni di Windows, compresa quella XP.

Una volta predisposto il sistema operativo per la migliore visualizzazione della sua interfaccia utente, si possono seguire i suggerimenti per adattare anche il modo di visualizzare le pagine Web da parte del proprio browser. Prima di passare alla descrizione delle varie funzioni dei browsers considerati, desidero però dare un consiglio a tutti gli ipovedenti che leggeranno questo piccolo manuale a non basarsi troppo sulle impostazioni di Windows con caratteri enormi e con risoluzioni dello schermo molto basse, come 640x480, perché otterranno caratteri grandi ma rischiano di perdere il senso delle pagine mostrate sul monitor; in particolare, la navigazione sul Web. Molte pagine hanno una resa a video veramente pessima a quella risoluzione. Voglio esortare gli ipovedenti a cui non è sufficiente la dimensione dello schermo a provare programmi ingrandenti che possono raddoppiare, o anche triplicare e più, la dimensione dello schermo, fornendo un desktop virtuale che offre caratteri e icone della grandezza desiderata, continuando ad adottare risoluzioni dello schermo standard, come 1024x768 o superiori.

L'uso del desktop mobile è adatto anche per uso professionale, dove si devono tener d'occhio più finestre. Infatti con le definizioni superiori a 1600x1200, fino a 2048x1536, il principio è perfettamente lo stesso.

Naturalmente, queste sono mie opinioni personali, che possono essere condivise o meno, e che io esprimo per far capire il percorso logico a cui si ispira tutto ciò che ho messo in questo manuale.

Nel seguito, vengono presi in considerazione tre browser tipici dell'ambiente Windows: Internet Explorer, Mozilla e Opera. Pur non avendo la pretesa di essere esaustivo, né sul panorama dei browser esistenti e delle loro varie versioni né sulle potenzialità dei singoli prodotti, ciò che viene presentato in questo manuale dovrebbe essere sufficiente per andare in contro alle necessità della maggior parte degli utenti ipovedenti.

indice 

Predisposizioni di Windows XP.

Windows XP è personalizzabile, in una certa misura, per quanto riguarda il colore, la dimensione dei caratteri e lo sfondo delle finestre, con tutti gli oggetti che le compongono.

Per quanto riguarda la personalizzazione dell'aspetto, premere il tasto destro del mouse in una parte vuota del desktop e scegliere Proprietà,

oppure, dallo Start, scegliere Pannello di controllo,

quindi selezionare Schermo.

da entrambi questi percorsi si aprirà la finestra di gestione scegliendo Tema.

qui è possibile scegliere il "tema" desiderato fra quelli disponibili; questa è la grande novità di Windows XP. Selezionando Salva con nome è possibile salvare la propria configurazione.

Tutti gli altri settaggi sono presenti nel menù Aspetto (premendo tre volte la Freccia Destra).

Come primo settaggio troviamo Finestre e pulsanti; aprendo la tendina è possibile scegliere tra "Stile Windows classico" e "Stile Windows XP" (oppure è possibile cambiare il settaggio con Freccia Su/Giù).

Proseguendo troviamo la voce Combinazione di colori; qui è possibile scegliere la combinazione di colori dell'intero sistema.

E' possibile effettuare la scelta con le Freccia Su/Giù.

Andando ancora avanti con il Tab troviamo Dimensioni caratteri; qui è possibile scegliere tra "Normali Grandi" o "Molto grandi".

ATTENZIONE!
Con caratteri molto grandi si possono avere alcuni problemi di visualizzazione delle finestre.

Cliccando su Avanzate (sei volte Tab all'apertura del menù), si aprirà il menù che gestisce tutti gli elementi che compongono Windows.

Aprendo la tendina con Elemento, è possibile scegliere l'elemento da personalizzare con le voci contenute nella finestra.

Se per esempio si sceglie Icone, è possibile determinare le dimensioni delle icone nonché il font e la grandezza del testo associato.

Ogni voce selezionata può avere alcuni o tutti i settaggi disponibili a fianco. Tutto è perfettamente identico per le altre voci.

Proseguendo la nostra carrellata, andiamo ad analizzare il bottone Effetti (tre volte Tab all'apertura).

Qui è possibile scegliere alcuni effetti per la gestione dell'intero sistema.

Dalla schermata di partenza, scegliere Impostazioni e poi Avanzate.

Sotto Generale si trova Dimensioni caratteri espressi in dpi.

ATTENZIONE!
Il cambio della dimensione del carattere implica il riavvio del PC e talvolta si possono verificare dei problemi di visualizzazione.

Passiamo alle funzioni di Accesso facilitato, presenti in tutte le versioni di Windows. Con la stessa procedura illustrata all'inizio di questo paragrafo, andare su Pannello di controllo.

Si aprirà una finestra come la seguente.

Qui potete cambiare tutte le configurazioni per trovare la più adatta a voi.

In aggiunta a tutto questo, in Windows XP esiste anche un "magnificatore" che ingrandisce lo schermo; da Start, scegliere Tutti i programmi, poi andare su Accessori|Accesso facilitato, quindi selezionare Magnifier.

Su questo menù troverete anche le voci Impostazione Guidata accesso facilitato, che permettono all'utente di visitare in modo pilotato tutte le funzioni di accesso facilitato. Sono presenti molte funzioni che non interessano la disabilità visiva, come la possibilità di visualizzare una tastiera virtuale sullo schermo, per un disabile motorio che non può servirsi della normale tastiera. Conviene quindi scorrere la lista alla ricerca delle voci che possono interessare, effettuando il settaggio guidato delle funzioni relative.

Infine, è da segnalare Utility Manager che permette di avviare la configurazione di utilità di accesso facilitato in una finestra.

indice 

MS Internet Explorer.

Per rendere una pagina Web più accessibile agli ipovedenti, esistono vari settaggi del browser, in particolare, ci occuperemo di Microsoft Internet Explorer versione 6.0, ma tutti gli esempi che seguono dovrebbero essere validi, salvo smentite, anche per versioni precedenti, a partire dalla 5.01.

Questo browser è interamente personalizzabile per quanto riguarda la dimensione dei caratteri, il colore dello sfondo e la visualizzazione dei collegamenti ipertestuali. Passiamo alla descrizione dei settaggi.

indice 

Dimensione dei caratteri.

Cliccare su Visualizza (Alt+V), scegliere Carattere con il mouse o con le quattro frecce, spostarsi a destra, e scegliere l'opzione desiderata tra "Molto grande" e "Molto piccola".

indice 

Colori.

Per personalizzare i colori cliccare su Strumenti (Alt+S), scegliere Opzioni Internet.

All'apertura della finestra cliccare su Colori (oppure premere 9 volte Tab),

come prima opzione troveremo la voce Usa colori di Windows, di default, questa voce non è selezionata; per selezionarla, spuntare il quadratino con il mouse (premere + dal tastierino numerico, con il - si deseleziona).

Questa voce permette di usare la stessa combinazione di colori adottati su Windows.

Se si desidera personalizzare i colori del testo e dello sfondo, con una combinazione di colori diversa da quella di Windows, alla voce Testo cliccare sulla casella "di default nera" e scegliere (Alt+T) il colore desiderato dalla tabella degli 80 colori proposti dal sistema,

se questi colori non soddisfano cliccare (premere 2 volte Tab) sulla voce Definisci colori personalizzati, a destra si aprirà una finestra dove è possibile creare un proprio colore personalizzato immettendo la tripletta Tonalità, Saturazione e Luminosità con valori tra 0 e 239, oppure la tripletta Rosso, Verde e Blu con valori da 0 a 255. Per aggiungere il colore cliccare (premere 6 volte Tab) su Aggiungi a colori personalizzati.

Per attivare il colore di base o personalizzato cliccarci sopra o evidenziarlo con il cursore a quadretto che compare muovendosi con le quattro frecce. La stessa identica procedura vale per il colore dello sfondo (Alt+S).

Premendo un'altra volta Tab andiamo alla voce Visitati, che permette di scegliere il colore di un link quando è già stato visitato (Alt+V), stessa procedura illustrata precedentemente per la scelta del colore.

Ancora con Tab arriviamo alla voce Non visitati, questa voce determina il colore del link quando non è stato visitato cioè quando lo vediamo per la prima volta o non abbiamo mai utilizzato. La procedura per la scelta del colore è sempre la stessa: comando veloce da tastiera (Alt+N).

Premendo un'altra volta Tab andiamo alla voce Usa il seguente colore, da spuntare se desideriamo visualizzare i colori dei link scelti da noi, se non spuntata vengono visualizzati i colori per i link decisi dal realizzatore della pagina Web che stiamo visitando. Sempre + e - per selezionare o deselezionare.

Ancora con Tab arriviamo alla voce Al passaggio del mouse, è possibile scegliere il colore dei link quando il mouse ci passa sopra cioè quando il collegamento è cliccabile. Stessa procedura per la scelta del colore (Alt+A). Cliccando su OK o premendo Invio si confermano le scelte fatte.

Non dobbiamo dimenticarci che i settaggi illustrati precedentemente sono assoluti per quanto riguarda i collegamenti ipertestuali, cioè se il link è testuale verrà sempre visualizzato con i colori scelti. Questo non vale per lo sfondo e i colori dei caratteri, verranno visualizzati come desiderato se il progettista della pagina web non ha imposto il colore del carattere o dello sfondo, se desideriamo che la pagina sia sempre visualizzata con lo sfondo e il colore di carattere desiderato dobbiamo fare ancora altri settaggi, in particolare quelli di Accesso facilitato.

Premendo altre 2 volte Tab arriviamo alla voce Accesso facilitato, cliccandoci sopra troviamo queste voci Ignora i colori specificati sulle pagine web, spuntando questa voce otteniamo quello che è stato descritto precedentemente, cioè di visualizzare la pagina come desideriamo (+ o -).

Premendo ancora Tab troviamo la voce Ignora gli stili dei caratteri, come sempre + e - per selezionare o deselezionare. Questa voce permette di rendere il tipo di carattere (font) fisso, cioè se la pagina è scritta con tipi di caratteri strambi o poco leggibili.

Attivando la funzione precedentemente spiegata la pagina si presenterà così:

Ancora con Tab troviamo la voce Ignora le dimensioni dei caratteri (+/-). Attivando questa voce i caratteri possono essere cambiati di dimensione anche se chi a creato la pagina Web li aveva impostati in modo fisso, cioè in modo che la dimensione non vari al comando descritto all'inizio.

Utilissimo quando il font presente sulla pagina è troppo piccolo

Se andiamo a visualizzare la pagina precedente con questa funzione attiva si presenterà così.

L'azzeramento delle dimensioni dei caratteri ha efficacia e valore quando i caratteri in HTML sono espressi con il comando "font-face font definition e font-family", se le dimensioni sono definite con il tag H1 ... 6 sono in proporzione dal più grande H1 al più piccolo H6 a seconda del carattere impostato molto grande... molto piccolo.

Segue esempio di listato e resa a video:

<HTML>
<HEAD>
<TITLE>Esempio 14</TITLE>
</HEAD>
<BODY>
<H1 align=center>
Esempio di visualizzazione del menu' 1
</H1>
<H3 align=center>
Esempio di visualizzazione del menu' 2
</H3>
<H5 align=center>
Esempio di visualizzazione del menu' 3
</H5>
</BODY>
</HTML>

Proseguendo la nostra carrellata troviamo la voce Formatta i documenti secondo il foglio di stile dell'utente; questa voce permette di far visualizzare le pagine attraverso un foglio di stile creato da noi e residente nella nostra macchina.

L'idea è buona ma di non facile realizzazione perché realizzare un foglio di stile che si adatti discretamente ad ogni pagina che andiamo a visitare penso che sia praticamente impossibile, perché se imponiamo la dimensione del carattere troppo grande rischiamo di ottenere un effetto molto sgradevole, cioè l'accavallamento delle parole, rendendo il documento praticamente illeggibile, quindi ottenendo l'effetto contrario.

Quindi il foglio di stile che possiamo creare senza problemi, è un foglio che contiene informazioni di stile solo sul colore dello sfondo, sul colore del carattere e sui colori dei link attivi visitati e al passaggio del mouse.

Dopo svariate prove sono giunto alla conclusione che Internet Explorer 6.0 dà valore ai settaggi di stile del foglio esterno solo se la pagina non dichiara il colore dello sfondo e dei caratteri, se invece sono stati definiti dall'autore, questi ultimi hanno la precedenza ignorando il foglio di stile.

Per concludere non possiamo tralasciare altre due voci interessanti che si trovano sotto Avanzate, sempre nel percorso Strumenti|Opzioni Internet. Con combinazione di Tab e le quattro frecce andare su Avanzate,

dove sotto Accesso facilitato troviamo la voce Espandi sempre testo alternativo alle immagini e il comando Sposta il cursore di sistema secondo le modifiche di attivazione, questa funzione permette di specificare se spostare il cursore di sistema quando cambia l'elemento attivo o selezionato; alcune unità di Accesso facilitato, quali le applicazioni per la lettura e l'ingrandimento dello schermo, utilizzano il cursore di sistema per determinare l'area dello schermo da leggere o ingrandire.

Come mostrato nella figura successiva in questo menù esistono molte altre voci che possono essere di aiuto per diversi tipi di minorazioni, per ottenere la spiegazione rapida di ogni funzione presente basta cliccare con il tasto destro e apparirà la voce guida rapida (scorrere con le frecce e premere F1 su la voce interessata).

Come ultima osservazione desidero evidenziare la funzione del testo di commento alle immagini, Internet Explorer tratta praticamente allo stesso modo il tag ALT e il tag TITLE, dando la precedenza a TITLE come mostrato dal listato e l'immagine seguente:

<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Alt & Title Internet Explorer</title>
</head>
<body>
<h1>
Prova di visualizzazione del testo alternativo
</h1>
<hr>
<img src="casina.png"
alt="casina alt" title="casina title">
<hr>
<h1>Cosa succedere</h1>
</body>
</html>

La vera grande differenza tra ALT e TITLE è che ALT deve essere visualizzato al posto della figura quando non può essere caricata per qualche motivo tecnico o si è deciso di non caricarle disabilitando la voce Mostra immagini sul menù Avanzate:

attivando questa funzione la pagina precedente con la casina si visualizzerà così:

se si desidera caricare l'immagine, basta cliccare con il tasto destro del mouse sull'iconcina e selezionare la voce Mostra immagine come mostrato in figura:

indice 

Mozilla.

In questo capitolo ci occuperemo del browser Mozilla, scarsamente impiegato su piattaforma Windows, ma di sicuro il navigatore multimediale più impiegato sotto Linux. Tuttavia, essendo questo browser praticamente la versione gratuita di Netscape Navigator, si presenta interessante anche sotto Windows, specialmente per un utilizzatore ipovedente, come vedremo meglio nel seguito. Il browser è scaricabile all'indirizzo: www.mozilla.org.

Anche questo browser è interamente personalizzabile per quanto riguarda la dimensione del carattere e il contrasto di colori.

indice 

Dimensione caratteri.

Per variare la dimensione del carattere, cliccare su Visualizza|Dimensione carattere (Alt+V, D).

La scelta è veramente ampia, da 1% a 1519%; naturalmente, sono impiegabili in modo ragionevole le percentuali che vanno da 10% a 300%, perché al di sotto del 10% i caratteri diventano illeggibili mentre aumentando sopra al 300% si perde il senso della pagina.

Come è mostrato nella figura che segue, è possibile scegliere tra le voci già presenti o cliccando su Ingrandisci o Rimpicciolisci per accedere ai passi ulteriori.

Sono presenti anche altri settaggi che controllano la dimensione e il tipo di carattere. Cliccare su Modifica|Preferenze (Alt+M, P):

Cliccando su Preferenze si accede al menù mostrato in figura:

Facendo doppio clic su Aspetto si aprirà il sotto-menù mostrato in figura:

Scegliendo Carattere a destra si aprirà il menù completo per il dimensionamento e la tipologia dei caratteri visualizzati; naturalmente, premendo OK o semplicemente Invio si confermano le scelte.

indice 

Colori.

Come già detto nell'introduzione, anche Mozilla è interamente personalizzabile per quanto riguarda il colore dello sfondo dei caratteri e dei link.

Seguendo la stessa procedura (Modifica|Preferenze doppio clic su Aspetto), scegliere Colori; in figura è mostrata l'intera schermata.

ATTENZIONE!
alcune schermate del menù di Mozilla, con basse definizioni dello schermo e con il sistema operativo settato con caratteri grandi, possono essere visualizzate in modo non completo o con delle mancanze nella parte destra.

Iniziamo la descrizione delle varie voci; le possibilità sono molto simili a quelle di Explorer, anche qui è presente la voce Utilizza colori di sistema (tre volte Tab); se abilitata, impone la visualizzazione delle pagine con lo stesso colore di sfondo e di carattere del sistema operativo (naturalmente solo se il progettista della pagina non ha specificato il colore dello sfondo e del carattere).

Per scegliere colori diversi da quelli del sistema, andare su Testo (una volta Tab all'apertura del menù); per scegliere il colore desiderato cliccare sulla casella che contiene il colore usato in quel momento (Alt+T) e scegliere il colore tra gli ottanta disponibili; la scelta può essere effettuata con le quattro frecce, quindi Invio o con il semplice clic del mouse. Allo stesso modo si sceglie il colore dello sfondo (due volte Tab all'apertura) (Alt+S).

Per ottenere sempre lo sfondo desiderato e il colore del carattere bisogna abilitare anche la funzione Utilizza i colori scelti, ignorando le immagini di sfondo e i colori specificati nella pagina (sette volte Tab all'apertura).

ATTENZIONE!
Con lo sfondo nero di sistema non si distingue se la voce è selezionata o no, quindi provate ho fatevelo dire dalla sintesi vocale (se ne usate una).

Proseguendo, andiamo ad analizzare le voci dedicate al colore e all'aspetto dei collegamenti ipertestuali Colore collegamenti non visitati (quattro volte Tab all'apertura); stesso procedimento per scegliere il colore (Alt+N); le stesse voci per i colori dei collegamenti visitati (cinque volte Tab all'apertura, Alt+V).

Infine troviamo la voce Collegamenti sottolineati, da spuntare per ottenere i collegamenti sottolineati.

Esiste un'altra interessante funzione che permette di non far caricare le immagini in una pagina sotto Strumenti|Gestioni immagini (Alt+S, M):

ATTENZIONE!
Il non caricamento delle immagini certe volte può dare dei problemi nella comprensione della pagina, perché e molto in uso di creare siti con link rappresentati da piccole immagini senza tag testuale.

Non meravigliatevi se usando Mozilla non visualizzerete il tag ALT sulle immagini, come invece è su Internet Explorer; questo è dovuto ad una interpretazione non corretta di Explorer che lo visualizza sempre; l'uso corretto di ALT è per dare un testo alternativo nel caso in cui l'immagine, per qualche motivo, non possa essere caricata o visualizzata.

<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Alt & Title Mozilla</title>
</head>
<body>
<h1>
Prova di visualizzazione del testo alternativo
</h1>
<hr>
<img src="casina.png"
alt="casina" title="casina title">
<hr>
<h1>Cosa succedera'</h1>
</body>
</html>

Come è rappresentato nella figura e dal listato HTML, viene data la precedenza al tag TITLE.

Per concludere, ci sono da fare altre due precisazioni: la prima è che, come accennato all'inizio del capitolo, tutto quello che è stato detto per Mozilla vale anche per Netscape 7.0, perché sono praticamente identici; secondo, se all'istallazione di uno di questi due browser la barra degli strumenti non rispetta la combinazione di colori adottata dal sistema operativo, e questa cosa vi disturba, non preoccupatevi, basta settare il Tema su Classico.

Dalla finestra Visualizza, selezionare Applica tema (Alt-V, P).

indice 

Opera.

In questo capitolo ci occuperemo del browser Opera e in particolare della versione 6.01 che è la più facile da reperire sul Web (si veda www.opera.com). Anche Opera è personalizzabile per quanto riguarda dimensione e contrasto dei caratteri, sfondo e colori dei link visitati e non.

Fra i browser incontrati, è secondo me il più difficile da configurare perché è nettamente diverso da Internet Explorer, Mozilla o Netscape che sia; ha molti più settaggi per quanto riguarda l'aspetto delle barre dei menù e le relative posizioni.

indice 

Dimensione dei caratteri.

Come usare lo Zoom, è di questo che dobbiamo parlare perché questa funzione non cambia solo la dimensione del carattere, ma varia la dimensione di tutti gli oggetti caricati nella pagina. Cliccare su Mostra|Zoom (Alt+R, Z):

la dimensione del carattere si regola imponendo quella di default e quella minima dal menù. Cliccare su File|Preferenze:

Cliccando su Preferenze comando veloce (Alt+P) entriamo del vasto menù delle preferenze, qui scegliere Stile della pagina.

Come è illustrato nella figura, è possibile scegliere il fattore di zoom di default che varia da 20% a 1000%; naturalmente dal 200% in su la pagina ha poco senso. Un altro parametro che si può variare è la dimensione minima del carattere, sempre sotto Preferenze, scegliere Caratteri e colori; come mostrato in figura è possibile definire il carattere minimo in pixel:

indice 

Colori.

Per quanto riguarda la personalizzazione dei colori, iniziamo con quelli dei collegamenti ipertestuali (link); per scegliere l'aspetto andare su File|Preferenze (Alt+P) e selezionare Caratteri e colori; a pie della schermata troviamo Stile dei link:

Scegliendo Aspetto dei link è possibile definire il colore del link non visitato, visitato; oltre al colore è possibile cambiare l'aspetto, come la sottolineatura e la retinatura. Nella immagine seguente sono mostrati tutti i vari settaggi che illustreremo.

1. Qui si decide se sottolineare, barrare, o entrambi, i collegamenti non visitati
2. Qui si imposta il colore del link mon visitato *
3. Qui si decide se sottolineare, barrare, o entrambi, i collegamenti visitati
4. Qui si imposta il colore del link visitato *

* per scegliere il colore dei link (2 e 4), cliccare nel colore di default e scegliere tra i sessanta disponibili.

Se i colori presentati non sono di gradimento, è possibile creare un colore personalizzato cliccando su Definisci colore personalizzato; a destra si apre una finestra dove è possibile creare un colore personalizzato inserendo la tripletta luminosità, contrasto e saturazione, valori compresi tra 0 e 239, oppure rosso, verde e blu, tra 0 e 255, come mostrato in figura:

Definito il colore, per aggiungerlo ai colori da poter selezionare, cliccare su Aggiungi ai colori personalizzati. Per altri approfondimenti sulla creazione del colore consultare il capitolo dedicato ad Internet Explorer perché la procedura è identica.

Passiamo all'analisi del colore di sfondo e del carattere. Il discorso, per quanto riguarda Opera 6.0, è abbastanza complesso perché esistono due tipi di settaggi: Modalità autore e Modalità utente. Spuntando la voce Modalità autore, predefinita sotto Preferenze|Stile della pagina, si abilitano i settaggi delle due categorie, come è mostrato nella figura che segue:

1. Spuntando questa voce si abilita la modalità autore predefinita, cioè la pagina viene visualizzata secondo i settaggi della Modalità autore; se non spuntata, valgono i settaggi della Modalità utente.
2. All'interno di questo rettangolo ci sono i settaggi per la Modalità autore; qui è possibile scegliere se usare i colori specificati nella pagina oppure quelli del proprio sistema operativo; lo stesso per i fogli di stile, è possibile usare quello della pagina web o il proprio o nessuno; è possibile definire i colori dei link, cioè se essi devono essere visualizzati con i colori della pagina o con i propri, se scelti, come è stato descritto precedentemente; e ancora se rappresentare le tabelle o linearizzarle. #
3. Qui è possibile specificare il proprio foglio di stile, una volta spuntata la voce Fogli di stile personali.
4. In questa sezione è possibile definire il comportamento del browser in caso che la pagina sia formata da frame. ##
5. Qui sono presenti i settaggi per la modalità utente, stesse voci del punto 3. #

# Non è possibile visualizzare una pagina web costruita con fogli di stile che determinano, oltre al colore, la posizione degli oggetti tramite box; con Opera vediamo o la pagina come è, cioè con i colori di sfondo e del carattere imposti dal progettista della pagina oppure, se desideriamo vederla con i nostri colori di sfondo e del carattere, salta interamente la struttura a box che viene linearizzata.

## Se una pagina è creata a frame, come nella figura seguente, è possibile non visualizzare il frame, se l'autore ha previsto una pagina sostitutiva no-frame.

Ecco il semplice listato

<HTML>
<HEAD>
<TITLE> Esempio di frame </TITLE>
</HEAD>
<FRAMESET cols="65%,35%">
<FRAMESET rows="150, 100">
<FRAME src="Es1.htm">
<FRAME src="Casina.png">
<NOFRAMES>
<P>Questa è la <A href="noframe.htm">
versione senza frame de documento.</A>
</NOFRAMES>
</FRAMESET>
<FRAME src="Corridore.png">
</HTML>

Se Opera è settato in modo che non carichi i frame e, come è illustrato nel listato precedente, esiste una pagina no-frame, il browser si comporterà così:

Selezionando il link, si aprirà la pagina no-frame che ha il seguente listato e resa a video:

<html>
<head>
<title>Noframe</title>
</head>
<body>
<h1>
Esempio di visualizzazione del menu'</h1>
<img src="Casina.png">
<img src="Corridore.png">
</body>
</html>

Passiamo adesso ai settaggi relativi al caricamento delle immagini e la trattazione sui tag TITLE e ALT.

Se prendiamo un semplice listato come il seguente:

<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//IT">
<html>
<head>
<title>Alt & Title</title>
</head>
<body>
<h1>
Prova di visualizzazione del testo alternativo
</h1>
<hr>
<img src="casina.png"
alt="casina" title="casina title">
<hr>
<h1>Cosa succedera'</h1>
</body>
</html>

la resa a video è la seguente:

Se disabilitiamo le immagini dal menù Preferenze|Multimedia:

Se spuntiamo la voce Non mostrare immagini, la pagina precedente si presenterà così:

indice 

Conclusioni.

Come accennato nell'introduzione, il contenuto di questo manuale non ha pretesa di far testo sulla materia trattata ma vuole solo offrire un'esperienza maturata sul campo e vissuta sulla pelle, nel desiderio di essere utile a qualcuno che abbia problemi simili ai miei nella consultazione di pagine Web.

Non ci sono quindi delle vere conclusioni da trarre, ma piuttosto c'è da completare quel tipo di ragionamento, molto personale, che mi ha guidato in tutto il percorso di verifica e spiegazione descritto nel manuale. Nulla vieta al lettore di giungere a conclusioni diverse o opposte alle mie, se non condivide detto ragionamento.

Essendo partito dalla constatazione che nella maggior parte dei siti Web non ci sono le condizioni di accessibilità, o meglio di leggibilità del testo, ideali per noi, non potendo aspettarci che chi cura i siti Web possa tener conto di tutte le nostre molteplici esigenze, occorre ingegnarsi a sfruttare al massimo le potenzialità degli strumenti a nostra disposizione.

Ecco allora l'importanza della ricerca meticolosa di tutte le funzioni che, in qualche modo, ci possono tornare utili e che spesso sfuggono alla nostra attenzione e che sono sconosciute anche a molti addetti ai lavori che non hanno problemi di ipovisione. Dopo aver comparato tre diversi browsers, pur rilevando molte analogie ed alcune differenze di prestazioni che creano qualche imbarazzo di scelta, non potendo considerare nessuno di essi come quello ideale per un ipovedente, lascio al lettore tutta la libertà di riflettere e scegliere in proprio, dopo aver magari ripetuto le prove che ho cercato di descrivere. Azzardo tuttavia un ultimo giudizio molto personale, quindi di valore molto relativo, esprimendo una preferenza per Mozilla, forse per via del simpatico bestione con il quale si presenta ma anche per qualche motivo più oggettivo. Innanzitutto è un prodotto gratuito, il che non guasta, di facile installazione, può convivere con Internet Explorer del quale non ci si può liberare e del quale capita sempre il caso di aver bisogno, ed infine ci permette di scegliere veramente con grande libertà il fattore di ingrandimento dei caratteri che serve in ogni circostanza, anche quando si parte da font minuscoli. Internet Explorer, da questo lato, presenta delle limitazioni che costringono in certi casi a ricorrere anche ad un programma ingranditore ausiliario, con tutti gli inconvenienti che conosciamo. Opera invece, pur presentando interessanti caratteristiche non possedute dagli altri prodotti, come quella di ingrandire anche le parti grafiche di una pagina, sia per essere un prodotto a pagamento sia per alcune incompletezze di prestazioni, che richiedono l'integrazione con altro browser, è un po' più discutibile.

Per inciso, Mozilla è disponibile anche in versione Linux, il che lo rende interessante per coloro, sempre più numerosi, che si avventurano in questo ambiente alternativo che ci affranca dal monopolio Microsoft.

Infine, gioverà ripetere la distinzione fra leggibilità e accessibilità introdotta all'inizio, per ricordare che quanto qui esposto non sostituisce la necessità di continuare a richiedere il rispetto delle regole di accessibilità dei siti Web, ma solo di evitare certe esasperazioni che creano spesso conflitti fra le necessità di utenti con problemi speciali e la naturale evoluzione di un ambiente, come il Web, che ha fatto della deregulation e della creatività un modo di vivere e lavorare. Pur non potendo concedere una libertà assoluta agli autori di pagine Web, se alcuni problemi possono essere risolti a livello client, senza quindi gravare di lavoro chi cura le pagine e degradare gli effetti estetici da loro perseguiti, si fanno dei passi in avanti verso quel punto di incontro fra esigenze e potenzialità, vero risultato concreto al di là di tante utopiche impostazioni. Le rivendicazioni appaiono molto più giustificate e accoglibili quando si riferiscono a problemi di accessibilità non aggirabili in alcun modo da parte degli utenti.

indice 

Ringraziamenti.

Questo lavoro è stato commissionato dall'I.Ri.Fo.R. provinciale di Firenze ed è stato svolto presso l'IFAC-CNR (Istituto di Fisica Applicata "Nello Carrara") di Firenze, dove ho portato a termine la mia tesi di laurea in ingegneria delle telecomunicazioni, nel gennaio 2003, prima di intraprendere questa attività di verifica e comparazione delle possibilità di personalizzazione dei browsers più comuni e di stesura di questo manuale.

Desidero perciò ringraziare l'I.Ri.Fo.R. di Firenze per il sostegno economico, e i ricercatori e tecnici del gruppo di lavoro dell'IFAC per la guida e l'assistenza ricevuta, con particolare riferimento a Paolo Graziani, Laura Burzagli e Enrico Palchetti.

Gabriele Fabbri fabbri_gabriele@libero.it 

Istituto per la Ricerca, la Formazione e la Riabilitazione (I.Ri.Fo.R.)
Sezione provinciale Di Firenze
Via Fibonacci 5, 50131 Firenze.

Consiglio Nazionale delle Ricerche
Istituto di Fisica Applicata "Nello Carrara" (CNR-IFAC)
Via Panciatichi 64, 50127 Firenze.

indice 

La versione per il Web.

La presente revisione per il Web de: "Web e ipovisione: come personalizzare la lettura", riporta fedelmente i contenuti predisposto dall'autore ed è stata promossa dai titolari del progetto per meglio favorirne la consultazione da parte dei destinatari, gli ipovedenti.

Le uniche modifiche riguardano:

• la presentazione dei comandi da menù e da tastiera, resi uniformi in tutto l'elaborato;
• il ridimensionamento delle immagini, altrimenti troppo pesanti e grandi per essere adeguatamente visualizzate a schermo.

Le immagini e le relative descrizioni testuali sono state fornite dall'autore.

Franco Frascolla

indice