Tecniche per un blog accessibile e usabile - DIODATI.ORG - Accessibilità e traduzioni dal W3C

Pagina creata da Filippo Biondi
 
CONTINUA A LEGGERE
Tecniche per un blog accessibile e usabile - DIODATI.ORG - Accessibilità e traduzioni dal W3C
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.org
PESANERVI.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 accessibile
PESANERVI.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 di
PESANERVI.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 768
PESANERVI.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 480
PESANERVI.DIODATI.ORG - Tecniche per un blog accessibile e usabile   15	
 di	
 22

       6°accorgimento: scelta del carattere

A = Arial
G = Georgia
V = Verdana   C = Courier
PESANERVI.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 documenti
Puoi anche leggere