Web Design  »  Articoli  »  Accessibilità 

Molti Web Designers sono convinti che rendere le pagine accessibili significhi sacrificare il design, accontentandosi di un compromesso. Assolutamente falso! Molto spesso per essere accessibili bisogna solamente integrare il codice html e aggiungere modifiche spesso invisibili per IExplorer - Netscape - Opera.

Quali sono le scelte tecniche che si scontrano con l'accessibilità e come si può intervenire senza modificare il layout grafico?

Immagini - integrazione codice

Per inserire un'immagine non basta semplicemente il tag <img src="nomefile">. Il tag va integrato specificando tutti gli attributi:

<img src="nomefile" alt="" width="" height="" longdesc="" />

• alt="testo alternativo che spiega la funzione dell'immagine"
• width="larghezza dell'immagine in pixel"
• height="altezza dell'immagine in pixel"
• longdesc="nomefile con spiegazione approfondita dell'immagine" - facoltativo

VANTAGGI

Dopo aver specificato tutti gli attributi l'immagine può essere letta da uno Screen Reader, da un browser testuale e da un browser con il caricamento delle immagini disabilitato. I motori di ricerca indicizzeranno la pagina basandosi anche sui testi ALTernativi. Da non sottovalutare anche il minor tempo di download della pagina: il browser non ha bisogno di caricare l'immagine per conoscere altezza e larghezza, quindi lo scheletro della pagina è già definito prima che sia terminato il download di tutte le immagini

Testi - non vedenti e ipovedenti

I testi, i contenuti, sono la parte più delicata da rendere accessibile. Da una parte ci sono Web Designers in guerra contro pixel punti font e colori, dall'altra lettori bisognosi di testi con font più grandi e documenti meglio strutturati.

La soluzione drastica adottata da alcuni Web Designers è salvare il testo come immagine in modo da ottenere una soluzione poco flessibile alle scelte del lettore:

I vantaggi di questa tecnica sono molti: il testo rimane invariato come grandezza e si possono usare font non standard. Gli svantaggi sono altrettanto numerosi: non si può modificare la grandezza dei caratteri e se l'immagine non viene integrata con testo ALTrnativo, il testo non può essere visualizzato da Browser Testuali o Screen Reader.

Questa tecnica può essere usata per brevi titoli o bottoni (facilmente integrabili con ALT), mentre si dimostra inaccessibile per lunghi testi.

NOTA: quando le immagini vengono salvate in JPG altamente compressi (e non GIF) i problemi aumentano, perché diventa molto difficile leggerle anche per utenti normodotati.

Ma anche quando non si usa la tecnica di traformare il testo in immagine, il contenuto non è sufficientemente accessibile. Lunghi testi non strutturati logicamente tramite gli Headers (h1, h2...h6) sono un problema per gli Screen Reader che non possono "scrollare" da una sezione all'altra e per i browser testuali.

Un uso errato dei CSS (un errata formattazione) può rendere il testo difficilmente leggibile per gli ipovedenti (mio padre senza occhiali ha difficoltà dai 12-11 pixel in giù). Il testo non andrebbe mai formattato sotto ai 10-12 pixel e sono sempre da preferire impostazioni relative: valori percentuali e punti (% e pt) che permettono al lettore di modificare il testo secondo le sue esigenze (Per utenti IE: menu Visualizza>Carattere>Molto Grande)

ESEMPI DI CSS

p { font-family: Verdana, sans-serif; font-size: 14px;}
Testo bloccato

p { font-family: Verdana, sans-serif; <b>font-size: 100%</b>;}
Testo flessibile

h1 { font-family: Verdana, sans-serif; font-size: 200%;}
Testo flessibile

h2,h3,h4 { font-family: Arial, sans-serif; font-size: 120%;}
Testo flessibile

Altri articoli

Altre guide

Altre newsletter