Terza parte – vademecum e test di verifica

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; sperando che possano essere di aiuto e giovamento a tutti i soggetti interessati.

Dimensioni del testo.

  • non inserire testo di dimensioni inferiori a 14 e superiori a 24 pt;
  • le dimensioni dei caratteri devono comunque sempre essere “relative”; ovvero personalizzabili. Il navigatore deve sempre poter decidere quanto grande far apparire il testo sullo schermo.
  • progettare le pagine Web impostando la dimensione «più grande» dei caratteri da parte del browser (in IE: Visualizza|Carattere|Molto grande); così si avrà la certezza quasi matematica di non fare pasticci…

Tipi di carattere.

Utilizzare tipi di carattere comuni e di facile lettura.

Attributi del testo.

  • utilizzare 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: utilizzare perciò il grassetto solo dove veramente necessario;
  • utilizzare il corsivo solo nei titoli e nelle citazioni. Molte righe consecutive di corsivo possono affaticare la vista;
  • evitare 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 stessa di alcuni caratteri (g, j, p, q e y);
  • evitare l’uso simultaneo degli attributi. Più il tratto è ricco e complesso, meno è leggibile.

Allineamento del testo.

Allineare il testo normale a sinistra; in caso di testo allineato a destra o al centro, contenerne la lunghezza complessiva e distribuirlo in maniera uniforme tra le eventuali diverse righe.

Organizzazione/distribuzione del testo.

  • presentare 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.

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;
  • preferire sfondi chiari e tenui con testo decisamente scuro, ovvero sfondo decisamente scuro con testo chiaro, magari non troppo sgargiante;
  • il basso contrasto tra testo e sfondo dalle tonalità medie, normalmente sconsigliato (“NI”), può essere aumentato mettendo il testo in grassetto.

Il testo nella pagina.

Lasciare almeno 10-15 pixel di distanza tra il testo e gli altri elementi della pagina, margini della finestra compresi.

Frame, barre dei link, tabelle, form…

  • troppi frame possono generare confusione nella pagina;
  • non esagerare con le barre dei link e le tabelle;
  • lasciare almeno 10-15 pixel di distanza tra il testo e gli altri elementi della pagina e tra gli elementi stessi;
  • l’aspetto grafico 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;
  • evitare le immagini dinamiche;
  • non sovrapporre testo alle immagini;
  • distanziare di almeno 10-15 pixel il testo e gli altri elementi dalle immagini;
  • inserire la descrizione testuale delle immagini, (attributo Alt);
  • dimensionare 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, cercare di mantenere la 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 inserire il bordo e ispessirlo leggermente, onde ottenere un effetto analogo a quello dei link testuali;
  • nelle “mappe immagine” separare i settori con collegamenti attivi in modo che il puntatore del mouse possa cambiare aspetto.
  • inserire sempre la descrizione testuale dei link;
  • nelle “mappe immagine” i contenuti testuali devono sempre essere chiari e leggibili;
  • se non indispensabili, evitare gli “effetti di attivazione” dei link o comunque contenerli alla sola modifica del colore del testo.

Organizzazione della pagina e del sito.

Le pagine di un sito web devono essere chiare e semplici da gestire. Devono rispondere ad una logica di navigazione ben precisa in tutto il sito. Devono essere ben contestualizzate e caratterizzate rispetto ai contenuti e non devono essere di dimensioni spropositate (una pagina che supera i 100 Kb, non è di certo leggera…).

I fogli di stile.

Nel caso, non obbligatorio…, di utilizzo dei fogli di stile:

  • implementare più soluzioni, intercambiabili tra loro, capaci di soddisfare le molteplici esigenze percettive dei navigatori;
  • permettere la disattivazione dei fogli, facendo in modo che la pagina conservi una sua armonia e logica.

La risoluzione dello schermo.

  • dimensionare gli oggetti presenti nella pagina in modo relativo/proporzionale (in percentuale);
  • dimensionare il testo, le immagini e ogni altro elemento, in modo che possa essere percepibile in maniera ottimale a bassa e alta risoluzione;
  • dimensionare le immagini in modo che siano interamente visibili nella schermata, anche a bassa risoluzione (800 x 600);
  • progettare le pagine Web impostando la risoluzione dello schermo utilizzato per lo sviluppo a 800 x 600; così si avrà la certezza quasi matematica di non fare pasticci…

La visualizzazione e il sistema operativo.

Prevedere la possibilità da parte del navigatore di utilizzare la propria Combinazione di visualizzazione degli elementi grafici del SO, lasciando o prevedendo l’opzione Predefinito/Standard/Default, nel settaggio degli attributi degli elementi utilizzati.

I “filtri” del browser.

  • Verificare cosa succede ai contenuti Web implementati se si applicano dei filtri.
  • Cercare di rendere i contenuti il più possibile logici e gradevoli anche se fruiti per mezzo di filtri.

Test di verifica

Non avendo molta fiducia negli attuali sistemi di “validazione” dei siti, se non altro perché secondo recenti ricerche 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. Non offro “bollini blu”; ma, si spera, un numero sempre maggiore di “faccine sorridenti”…

1. Risoluzione e dimensioni dello schermo

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

Provate ad ingrandire i caratteri utilizzando gli strumenti messi a disposizione dal browser (non solo deve essere possibile, ma la pagina deve conservare un aspetto gradevole e funzionale).

3. Opzioni di visualizzazione.

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

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

5. Condizioni ambientali.

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

6. La stampa.

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

Potrebbero interessarti anche i seguenti articoli

  • Prima parte – le basi del Web e l’accessibilitàPrima parte – le basi del Web e l’accessibilità Dimensioni del testo Tipi di carattere Attributi del testo Allineamento del testo Organizzazione/distribuzione del testo Contrasto testo-sfondo Il testo nella […]
  • PremessaPremessa Un disabile visivo (non vedente o ipovedente), uditivo, motorio, può trovarsi in serie difficoltà se messo di fronte a soluzioni tecnologiche difficilmente o affatto […]
  • Prima-vera…Prima-vera… Per quanti lottano da decenni a favore dell'integrazione scolastica, lavorativa e sociale dei disabili visivi in generale e degli ipovedenti in particolare, non è […]
  • Ipovisione e accessibilità e fruibilità del webIpovisione e accessibilità e fruibilità del web Questa categoria di disabili è infatti particolarmente svantaggiata nell'attuale panorama di siti Internet, costruiti per la stragrande maggioranza con criteri per loro […]
  • Seconda parte – l’adattabilitàSeconda parte – l’adattabilità I fogli di stile La risoluzione dello schermo La visualizzazione e il sistema operativo I "filtri" del browser I fogli di stile I fogli di stile, […]

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.