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
Link per la navigazione del sito
Siamo così abituati a navigare utilizzando i bottoni "Indietro-Avanti" del Browser che spesso ci dimentichiamo di inserire i link per navigare nel sito facendo affidamento esclusivamente sul tasto back del browser. Tutti sappiamo che dalla home page l'utente farà un click, arriverà in una seconda pagina e da qui potrà andare avanti e cliccare su altri link o tornare indietro cliccando sul link....sul link...sul tasto "Indietro" del browser. IPOTESI: il nostro lettore è entrato nel sito da google.com e si ritrova direttamente nella seconda pagina. Come farà ad andare all'home page del sito? Stavolta il tasto "Indietro" non funziona, riporta su google.com. La risposta semplice: se non è espero di "URL-Barra degli indirizzi" non arriverà mai nella Home Page.
Questo è un grave problema di usabilità/accessibilità. Non devono esistere in un sito pagine orfane: ogni pagina deve contenere almeno un link all'home page. A livello di Design non ci sono cambiamenti in quanto basta linkare il logo del sito/società (di solito in alto a sinistra) con la prima pagina del sito ed eventualmente aggiungere un link all'home page anche in fondo alla pagina.
NOTA: molto utile la visualizzazione di una navigation bar a briciole di pane del tipo home > dvd > nuove uscite per permettere all'utente di capire immediatamente dove si trova e dove può andare.
Il colore dei link deve cambiare
Navigando mi capita spesso di incontrare siti che lasciano invariato il colore dei link da visitare/visitati. Questo è un grave errore di usabilità/accessibilità perché impone al lettore la memorizzazione dei link visitati quando potrebbe essere il browser a ricordarci quali link abbiamo visitato semplicemente visualizzandoli con un colore differente.
Per alcuni Web Designers sembra inconcepibile sporcare i documenti con troppi colori e preferiscono fissare un colore unico per active/visited link. Questo errore si paga con uno sforzo maggiore da parte dell'utente che dimenticando in quali parti del sito è già stato, potrebbe decidere di abbandonare la ricerca quando mancava un solo link da visitare, e l'informazione ricercata era proprio in quella pagina (es: stava ricercando le coordinate bancarie per un bonifico alla società)
Personalmente ritengo l'impostazione standard la migliore, in quanto quasi tutti gli utenti sanno che un link sottolineato blu è attivo e un link viola è un link già visitato. Ad ogni modo altre soluzioni sono possibili (su usabile.it i link sono rosso scuro e i visited link rosso chiaro) sempre stando attenti a non spostare troppo il lavoro sulla memoria del lettore.
Ritengo un problema serio l'impostazione dei link attivi in viola e/o link visitati in blu (come mettere nella doccia di un albergo l'acqua fredda rossa e l'acqua calda blu!)
Frames - perché sì?
Vsitando un sito fatto con i frames non riesco mai a capirne l'utilità. Mantenere una pagina fissa sullo schermo e far variare il resto del sito è qualcosa che si può fare anche senza frames ma allora perché proprio i frames? Semplice...il lavoro per webmaster e Web Designers è notevolmente semplificato, c'è solo una pagina da aggiornare/modificare. Come sempre chi ne fa le spese sono gli utenti che si ritrovano siti difficili da navigare:
- nella barra degli indirizzi rimane fisso l'indirizzo della pagina con il frameset: l'utente non sa esattamente dove si trova, non può copiare il link per inviarlo ad un amico e alcuni browser hanno perfino problemi con l'aggiunta del sito ai Preferiti/Bookmark. Tutto questo inoltre si traduce in problemi di accessibilità quando i nomi dei frames non sono impostati correttamente o quando si entra in una pagina interna del sito, usando un motore di ricerca, senza caricare l'intero frameset e quindi senza menu di navigazione.
- più è grande il frame con la barra di navigazione più sarà ridotto lo spazio per i contenuti. Tutto questo significa testi che si allungano e costringono allo scroll, problemi di stampa.
Considero l'uso dei frames una sconfitta in quanto (tolto il vantaggio per chi aggiorna il sito) non ci sono vantaggi per l'utente. I frames creano problemi per la navigazione del sito ed in alcuni casi, quando non supportati dal browser, rappresentano una grave barriera di accessibility.
L'uso dei frames è molto controverso, ma dopo anni di battaglie, finalmente ce ne sbarazzeremo per sempre: al W3C hanno detto no ai frames ed entro breve (parliamo sempre di anni) non vedremo più siti fatti con i frames.
Url Complesse
Sembra strano ma a volte usare URL complesse può essere un problema di accessibilità/usabilità. Più informazioni possiamo dare agli utenti/lettori più sarà gradevole la loro permanenza nel nostro sito.
URL SEMPLICE - www.mangiaebevi/bibite/spremute/aranciolimone.asp
Leggendo solo l'url si ha già chiaro in mente lo schema del sito. Siamo nel sito mangiaebevi all'interno della sezione bibite > spremute > arancio e limone.
URL COMPLESSA - www.mangiaebevi/bbt/id_17/ar_lem.asp
Fondamentalmente l'url non ci da nessuna informazione sulla struttra del sito e non ci aiuta a costruire mentalmente la mappa del sito. Anzi un URL così completa potrebbe confondere l'utente invece di aiutarlo.
COME NOMINARE FILE E CARTELLE: quando dobbiamo dare un nome ad un'immagine o ad un documento html dobbiamo fare in modo che se ne comprenda il contenuto sin dalla lettura del nome.
Molto spesso i lettori valutano un link leggendo l'indirizzo nella barra di stato: fondamentale quindi fornire informazioni addizionali tramite il nome del file, soprattutto ora che non è più valido il limite degli 8 caratteri.
