Tecniche per un blog accessibile e usabile

Transcript

1 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

2 Tipici problemi di accessibilità dei blog 2 di 22 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 accessibile

3 Il Pesa-Nervi, un blog di frontiera 3 di 22 Il Pesa-Nervi, 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.

4 1 accorgimento: il testo prima di tutto 4 di 22 In modalità grafica, la struttura del blog appare su due colonne, con il testo principale a sinistra ed i vari menu di navigazione a destra.

5 Il testo principale a CSS disabilitati 5 di 22 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 di

6 Un blog che non segue il 1 accorgimento 6 di 22 Macchianera, uno dei più famosi blog italiani, si presenta in modalità grafica con una struttura a tre colonne.

7 Un odissea prima di arrivare al testo 7 di 22 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.

8 2 accorgimento: garantire la ridimensionabilità 8 di x 600 I contenuti si adattano alla grandezza della finestra, permettendo di occupare lo schermo intero, qualsiasi sia la risoluzione adoperata dall utente x x 768

9 La barra di scorrimento orizzontale 9 di 22 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.

10 Il grande vuoto 10 di x x 1024 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 rimane desolatamente vuota.

11 3 accorgimento: il guadagno di spazio 11 di 22 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.

12 Anche i sottomenu usano il guadagno di spazio 12 di 22 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.

13 4 accorgimento: l indipendenza dalla tecnologia 13 di 22 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.

14 5 accorgimento: margini proporzionali 14 di 22 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 x x x x 480

15 6 accorgimento: scelta del carattere 15 di 22 A = Arial G = Georgia V = Verdana C = Courier

16 7 accorgimento: caratteri ingrandibili 16 di 22 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.

17 8 accorgimento: moduli personalizzabili 17 di 22 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).

18 9 accorgimento: gestione accessibile 18 di 22 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 <blockquote>). 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à.

19 10 accorgimento: tasti di accesso rapido 19 di 22 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.

20 20 di 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.

21 12 accorgimento: strutturare i documenti 21 di 22 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.

22 22 di 22 Riepilogo finale degli accorgimenti proposti 1. Il testo prima di tutto 2. Garantire la ridimensionabilità 3. Il guadagno di spazio 4. L indipendenza dalla tecnologia 5. Margini proporzionali 6. Scelta del carattere 7. Caratteri ingrandibili 8. Moduli personalizzabili 9. Gestione accessibile 10. Tasti di accesso rapido 11. Mantenere la validità del codice 12. Strutturare i documenti Agli accorgimenti qui ricordati, potremmo aggiungerne altri due, validi a priori: 1. Cercare di scrivere sempre qualcosa di interessante 2. Non stancarsi mai di ricercare nuove e migliori soluzioni.