Tra le decine di ottime estensioni per i browser basati su Gecko (Mozilla e
Firebird), spicca per la sua completezza la Web Developer Toolbar.
Si tratta di un eccellente supporto al servizio dello sviluppatore alle prese
con la valutazione di aspetti cruciali di un documento, dall'accessibilità
alla validazione del codice.In questo articolo vi presentiamo una panoramica
delle sue principali funzionalità.
La Web Developer Toolbar può essere scaricata e installata dal sito del suo creatore, Chris Pederick, o dalla pagina
dedicata alle estensioni di Firebird. Una volta installata comparirà
in bella evidenza sotto la barra di navigazione del browser. Presenta nove voci
relative alle varie funzionalità sotto forma di menu a discesa. Ci soffermeremo
innanzitutto su due strumenti attivabili dal menu "Disable":
Disable Stylesheets e Disable Javascript.
Disabilitare i fogli di stile
Il motivo principale per cui è importante testare una pagina disabilitando
i CSS ha a che fare con l'accessibilità. Il checkpoint 6.1 delle Linee
Guida sull'Accessibilità del W3C dichiara esplicitamente che il contenuto
di un documento deve essere accessibile anche senza l'ausilio di fogli di stile.
Testare la pagina con questa configurazione ci consente di rilevare eventuali
problemi e adottare le opportune soluzioni. Basta osservare e porsi semplici
domande. Il documento è ben strutturato? Sto usando titoli, liste e paragrafi
nel modo giusto? L'ordine di presentazione del contenuto è corretto e
logico?
Il metodo ci consente anche di valutare la bontà della soluzione di
layout tableless rispetto a quello basato su tabelle. Se si osserva questa
pagina (layout tabellare) e la si confronta con questo
secondo esempio (layout senza tabelle) disabilitando i fogli di stile, siamo
in grado di comprendere che solo nel secondo caso si ha una perfetta linearizzazione,
ovvero una resa del contenuto secondo un ordine logico e coerente. Quello, per
intenderci, che dovrebbe essere adatto a tool come screen readers e browser
testuali. Testate voi stessi con la toolbar.
Disabilitare Javascript
Un'altra opzione della Web Developer Toolbar è quella consente di disabilitare
Javascript in modo rapido e semplice, senza addentrarci tra i meandri delle
preferenze. Anche questo test è cruciale per valutare aspetti importanti
di accessibilità generale. Le Linee Guida indicano esplicitamente la
via da seguire. Il contenuto di un sito deve essere fruibile da tutti. Se uso
uno script per accedere a una parte di questo contenuto devo pensare che alcuni
software di navigazione non supportano questa tecnologia. Devo pertanto fornire
un'alternativa.
Facciamo un esempio, per così dire, da manuale. Nell'esempio
abbiamo un link attivato da uno script (abbiamo volutamente usato un behavior
di Dreamweaver). Provate ad aprire la pagina linkata con i Javascript abilitati
e quindi disabilitati. Nel secondo caso è evidente che si impedisce a
certe categorie di utenti di fruire dell'informazione. Anche in questo caso,
usare la Web Developer Toolbar per effettuare questo test ci consente di valutare
rapidamente le situazioni critiche.
Le immagini
Un altro menu della Web Developer Toolbar è dedicato ai test sull'uso appropriato
delle immagini. Cinque le opzioni a disposizione:
- Identificare le immagini con URL scorretti
- Nascondere tutte le immagini
- Evidenziare le immagini prive dell'obbligatorio attributo alt
- Evidenziare le immagini prive dell'attributo title
- Sostituire le immagini con il testo alternativo
Ecco, un test da effettuare sempre è visualizzare una pagina combinando
quest'ultima opzione con quella che disabilita i fogli di stile. Avrete una
ottima simulazione della resa di un documento in uno screen reader. Ricordiamo,
infatti, che a chi naviga senza poter fruire delle immagini, dobbiamo sempre
fornire un'alternativa testuale. E' la funzione dell'attributo alt.
Per una discussione dettagliata sul punto vi rimandiamo alle lezioni della Guida Accessibilità dei siti Web di Michele Diodati. Qui ci limiteremo
a valutare l'aiuto che può darci la nostra toolbar.
Ritorniamo alla pagina di esempio. Scegliamo l'opzione "Replace
Images with Alt Tags" dal menu. Nel primo caso possiamo notare
il delitto più grave. Senza alt,
nascondiamo completamente il contenuto ad una fetta più o meno grande
dei nostri visitatori. Nel secondo caso possiamo rilevare un uso scorretto del
testo alternativo (l'esempio riflette il comportamento di diversi editor). Usare
un testo privo di significato come il nome con estensione del file, è
da evitare in tutti i modi. La via giusta è quella del terzo esempio.
L'attributo alt deve fornire un equivalente
testuale dell'immagine.
Nel quarto e quinto esempio, possiamo invece osservare un altro caso. Bisogna
anche evitare che il testo alternativo sia ridondante rispetto al contesto.
Abbiamo una piccola immagine usata come marcatore di un paragrafo, puramente
decorativa. Nel primo caso, usando come testo per alt "Pillola", non
facciamo che ripetere inutilmente per due volte lo stesso contenuto. Per questo
tipo di immagine la soluzione giusta è l'uso di un asterisco (*) o di
un alt vuoto (alt="").
Le altre opzioni
Altre interessanti funzionalità della toolbar. Dal menu "Informations"
si può accedere rapidamente ad una serie di schermate informative su
vari aspetti della pagina. Comoda la possibilità di visualizzare con
un click i CSS collegati o le informazioni sui cookies. Da segnalare il collegamento
al servizio di valutazione della velocità di caricamento su websiteoptimization.com.
Il menu "Outline" consente di evidenziare i principali
componenti struttrali di un documento, elementi blocco, in linea o celle di
tabella. Le voci di quello "Resize", invece, ci fanno
facilmente ridimensionare la finestra a tre diverse risoluzioni per testare
questo fondamentale aspetto.
Sempre a portata di mano il collegamento a diversi servizi di validazione con
il menu "Validations". Di default sono quelli del
W3C per HTML, CSS e link, e quelli per i preliminari test di accessibilità
rispetto alle WCAG e alle norme della section 508. Il menu può essere
arricchito e personalizzato con altri validatori.
