Terza parte – vademecum e test di verifica

• 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…

Utilizzare tipi di carattere comuni e di facile lettura.

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

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.

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

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

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

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

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

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

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

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.

• 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…

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.

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

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

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

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.

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

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

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