Diodati.org | Accessibilità e traduzioni dal W3C      30 EURO per te!

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.

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.