Tecniche per un blog accessibile e usabile - DIODATI.ORG - Accessibilità e traduzioni dal W3C
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
DIODATI.ORG – Accessibilità e traduzioni dal W3C
Tecniche per un blog
accessibile e usabile
Roma, 3 novembre 2005
Presentazione di
Michele Diodati
michele@diodati.org
http://www.diodati.org
http://pesanervi.diodati.orgPESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 2
di
22
Tipici problemi di accessibilità dei blog
• Pagine troppo affollate di contenuti
• Tempi di caricamento troppo lunghi
• Immagini prive di testi alternativi
• Moduli privi di etichette per l’accessibilità
• Caratteri troppo piccoli
• Menu lunghissimi e privi di meccanismi di salto
• Contrasto insufficiente tra primo piano e sfondo
• Apertura di nuove finestre (invio commenti)
• Criteri di navigazione tra i contenuti poco chiari
• Testo non strutturato
• Gabbia d’impaginazione bloccata su misure fisse
• Parte gestionale non accessibilePESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 3
di
22
Il Pesa-Nervi, un blog di “frontiera”
• Il Pesa-Nervi, http://pesanervi.diodati.org, nasce come blog
sperimentale: è una forma di ricerca continua sia dal punto di
vista tecnico sia dal punto di vista dei contenuti.
• Il nome è tratto da un brano dello scrittore
e attore Antonin Artaud, autore visionario
vissuto nella prima metà del ’900.
Il nome “pesa-nervi” è il simbolo di una ricerca
ininterrotta.
• Dal punto di vista tecnico, questo blog cerca di annullare i difetti di
accessibilità elencati nella schermata precedente, cercando nello
stesso tempo soluzioni che garantiscano una buona usabilità per
l’utente medio.PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 4
di
22
1°accorgimento: il testo prima di tutto
In modalità
grafica, la
struttura del
blog appare
su due
colonne,
con il testo
principale a
sinistra ed i
vari menu
di naviga-
zione a
destra.PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 5
di
22
Il testo principale a CSS disabilitati
In modalità solo testo
(che si ottiene disabilitando
i CSS), il blog appare
strutturato su una sola
colonna. Il testo
dell’articolo è
immediatamente leggibile
dopo la testata. Come
ulteriore ausilio per chi
naviga con una sintesi
vocale, c’è a inizio
pagina un menu di
scelte rapide, che
consente di andare
direttamente al testo
dell’articolo, alla casella di
ricerca o al menu diPESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 6
di
22
Un blog che non segue il 1°accorgimento
Macchia-
nera, uno
dei più
famosi
blog
italiani, si
presenta in
modalità
grafica
con una
struttura a
tre
colonne.PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 7
di
22
Un’odissea prima di arrivare al testo
Il blog Macchianera, in modalità solo
testo, richiede di scorrere circa dieci
schermate prima di arrivare al testo
dell’articolo in primo piano.
Mancano
meccanismi
di salto che
consentano
di andare
subito al
testo.PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 8
di
22
2°accorgimento: garantire la ridimensionabilità
800 x 600
I contenuti si adattano alla grandezza della finestra,
permettendo di occupare lo schermo intero, qualsiasi sia la
risoluzione adoperata dall’utente.
1280 x 1024
1024 x 768PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 9
di
22
La barra di scorrimento orizzontale
Risoluzione di 800 x 600
Se la gabbia d’impaginazione è bloccata, come nel caso di Macchianera, su una
dimensione orizzontale fissa di 1024 pixel, chi ha il monitor impostato ad una risoluzione
inferiore (800 x 600, 640 x 480 o meno ancora, se si usa un palmare), è costretto ad usare di
continuo la barra di scorrimento orizzontale per visualizzare i contenuti posti più a destra. Ciò
rappresenta un grave impedimento per l’accessibilità: penalizza soprattutto gli utenti
ipovedenti, che perdono facilmente il segno nel passaggio da un rigo al successivo.PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 10
di
22
Il grande vuoto…
640 x 480
Nel caso di quest’altro blog, il
problema è opposto al
precedente. La gabbia
d’impaginazione è bloccata
su una dimensione troppo
piccola. Più cresce la
risoluzione impostata, e più si
allarga la fascia laterale che
1280 x 1024 rimane desolatamente vuota.PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 11
di
22
3°accorgimento: il guadagno di spazio
Risoluzione di 640 x 480
Alla risoluzione di 640 x 480, l’ingombro del menu di navigazione riduce in modo svantaggioso lo spazio
disponibile per il testo principale. Per ovviare a questa scomodità, il Pesa-Nervi utilizza un javascript
che consente di aprire e chiudere istantaneamente, a seconda della necessità, il menu di
navigazione. Si tratta di una funzione piuttosto innovativa, che va contro le abitudini consolidate. Vari
utenti hanno segnalato che a 640x480 il menu si sovrapponeva parzialmente ai contenuti:
paradossalmente, nessuno di loro si era accorto che bastava un clic su “Chiudi il menu” per risolvere il
problema! La mancanza di un’abitudine specifica a volte fa preferire soluzioni meno usabili.PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 12
di
22
Anche i sottomenu usano il guadagno di spazio
I sottomenu a
scomparsa consentono di
mantenere compatto il
blocco delle voci di menu.
In tal modo l’utente ha
sempre sotto controllo i
comandi disponibili e non
deve esplorare l’intera
interfaccia alla ricerca del
comando che gli serve.PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 13
di
22
4°accorgimento: l’indipendenza dalla tecnologia
E’ fondamentale
progettare in
modo che tutta
l’informazione
rimanga
disponibile
anche con
javascript
disabilitato.
Senza
javascript, i
menu a
scomparsa del
Pesa-Nervi
appaiono in
forma
esplosa, l’uno
di seguito
all’altro. E’
meno
comodo, ma
non si perde
nulla.PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 14
di
22
5°accorgimento: margini proporzionali
Tramite un
javascript, il
Pesa-Nervi
migliora
l’usabilità
dell’interfaccia,
aumentando e
diminuendo i
margini in modo
proporzionale
al crescere e al
diminuire della
risoluzione del
monitor.
1280 x 1024
1024 x 768
800 x 600
640 x 480PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 15
di
22
6°accorgimento: scelta del carattere
A = Arial
G = Georgia
V = Verdana C = CourierPESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 16
di
22
7°accorgimento: caratteri ingrandibili
Dimensione di base dei
caratteri: 100% o 1 em
E’ importantissimo per l’accessibilità che
l’utente possa ingrandire i caratteri.
Affinché ciò sia possibile anche con
Internet Explorer, occorre usare nel
CSS misure relative e proporzionali
(em o %) in luogo dei pixel.PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 17
di
22
8°accorgimento: moduli personalizzabili
Grazie a opportuni javascript, il modulo per scrivere commenti da inviare al Pesa-Nervi
è ampiamente personalizzabile: si possono scegliere la larghezza della finestra, il tipo
e la dimensione del carattere nonché lo spessore (normale o grassetto).PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 18
di
22
9°accorgimento: gestione accessibile
Il tallone d’achille dei CMS è
in genere il lato gestionale,
non accessibile. Il Pesa-
Nervi risolve il problema
rinunciando all’uso di un
editor WYSIWYG, che viene
sostituito da una normale
TEXTAREA. Il codice
XHTML per strutturare gli
articoli viene immesso per
mezzo di marcatori
stenografici (p.es. \b in
luogo di ).
Per semplificare il lavoro,
sono disponibili numerosi
pulsanti, che scrivono i
marcatori al posto
dell’utente. Se javascript
non è attivo, i pulsanti non
funzionano, ma i marcatori
possono essere immessi
manualmente, senza
alcuna perdita di
funzionalità.PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 19
di
22
10°accorgimento: tasti di accesso rapido
L’accessibilità di un’interfaccia utente
può essere migliorata associando ai
comandi delle scorciatoie da tastiera,
accesskey in linguaggio tecnico.
I moduli per l’immissione degli articoli nel
Pesa-Nervi sono associati a numerose
scorciatoie da tastiera, che permettono
non solo di selezionare con la pressione di
un solo tasto (o di una combinazione di
tasti) il campo che si desidera compilare,
ma anche di inserire i marcatori
stenografici all’interno del testo. Le
scorciatoie da tastiera sostituiscono in
questo caso la griglia di pulsanti posta alla
sommità della TEXTAREA, mostrata nella
schermata precedente.
NOTA BENE. Le scorciatoie utilizzate attualmente nella sezione di amministrazione del Pesa-Nervi sono
provvisorie e servono per uso interno. Alcune di loro vanno infatti in conflitto con le scorciatoie utilizzate
normalmente da browser e tecnologie assistive. Gli accesskey sono una tecnologia ancora immatura,
potenzialmente molto potente, ma che necessita di raggiungere uno standard sia nella scelta dei tasti
utilizzabili sia nella modalità di applicazione da parte dei browser.PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 20
di
22
11°accorgimento: mantenere la validità del codice
Avviso di errore nel tentativo di archiviare un articolo
Nel codice di programmazione del Pesa-Nervi vi sono oltre 2000 linee dedicate specificamente a
controllare la corrispondenza alla DTD strict di XHTML 1.0 della marcatura inserita dagli autori. I marcatori
vanno inseriti sempre a coppie: uno iniziale (es.: \p) e uno finale (es.: ^p). Se manca un elemento della
coppia, si ottiene un avviso di errore. Ogni volta che si utilizza una combinazione non legale in XHTML, il
sistema produce un avviso di errore come quello sopra riportato. Seguendo le indicazioni dell’avviso, anche
un utente non esperto è in grado, con un po’ di attenzione, di rintracciare e correggere tutti gli errori.
Correggerli è indispensabile, perché nessun articolo può essere pubblicato finché contiene degli errori.
NOTA BENE. Inserire codice di marcatura non è indispensabile, anche se aiuta a strutturare meglio i
documenti. Gli utenti inesperti possono pubblicare articoli dal codice valido anche senza inserire alcun
marcatore.PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 21
di
22
12°accorgimento: strutturare i documenti
L’elenco qui a sinistra è stato generato
usando la funzione “show outline” (cioè
“mostra struttura”), fornita dal validatore del
W3C. Rappresenta la gerarchia dei contenuti
di un articolo lungo e complesso del Pesa-
Nervi.
Tale gerarchia è di grande utilità per chi
naviga con un sintetizzatore vocale, perché
permette di navigare rapidamente i
contenuti di pagina saltando da un blocco al
successivo. In mancanza di adeguata
strutturazione, l’utente è costretto ad
ascoltare serialmente l’intera pagina, fino a
che non trova, se lo trova, ciò che gli
interessa.
Il criterio per strutturare correttamente i
documenti consiste nell’usare i livelli di
titolo di XHTML, cioè gli elementi da H1 fino
a H6, in modo appropriato all’importanza di
ciascun titolo. Se per esempio si dà H1 al
titolo principale della pagina, tutti i titoli
immediatamente subordinati al principale
dovranno avere il livello H2, e così via fino a
H6.PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile 22
di
22
Riepilogo finale degli accorgimenti proposti
1°. Il testo prima di tutto
2°. Garantire la ridimensionabilità Agli accorgimenti qui
3°. Il guadagno di spazio ricordati, potremmo
aggiungerne altri due,
4°. L’indipendenza dalla tecnologia validi a priori:
5°. Margini proporzionali
1. Cercare di scrivere
6°. Scelta del carattere sempre qualcosa di
7°. Caratteri ingrandibili interessante
8°. Moduli personalizzabili
2. Non stancarsi mai di
9°. Gestione accessibile ricercare nuove e migliori
10°. Tasti di accesso rapido soluzioni.
11°. Mantenere la validità del codice
12°. Strutturare i documentiPuoi anche leggere
