L’accessibilità web e i browser – Supporto all’Html accessibile

Questo articolo fa parte di un corso gratuito di accessibilità web ospitato su questo sito.

Progettare e costruire un sito accessibile prevede il rispetto di alcune linee guida e la verifica dei risultati ottenuti con screen reader, browser e browser di testo.

Purtroppo, il supporto dei browser ai tag e agli attributi accessibili è vario e alquanto carente. Anche se una persona disabile usa probabilmente un software dedicato, una maggiore aderenza agli standard è sicuramente auspicabile, così da evitare allo sviluppatore di ricorrere a soluzioni “ad interim”.

Per i test sono prese in esame le piattaforme:

  • Windows 2000
    • Internet Explorer 5
    • Internet Explorer 5.5
    • Internet Explorer 6
    • Netscape 4.7
    • Netscape 6.2
    • Netscape 7.0 pr1
    • Mozilla 1.0
    • Opera 5
    • Opera 6
  • Mac Os 9.1
    • Internet Explorer 5
    • Netscape 4.7
    • Netscape 6.2
    • Mozilla 1.0
    • iCab 2.8
    • Opera 5

Una pagina per il test di “conformità”

Abbiamo realizzato una semplice pagina di test contenente i tag normalmente usati per migliorare l’accessibilità di un documento Html.

Nella pagina sono presenti:

  • un menu realizzato come link ipertestuali, ognuno dei quali raggiungibile con scorciatoia da tastiera (in particolare con 1,2,3) e con un ordine di tabulazione dato dall’attributo tabindex
  • una form per un’iscrizione fittizia, che utilizza:
    • il tag fieldset e il tag legend per raggruppare elementi della form concettualmente simili
    • il tag label per associare esplicitamente un’etichetta al campo della form
    • l’attributo tabindex per modificare l’ordine di tabulazione all’interno dei campi
    • un tag optgroup utilizzato, all’interno di una combo-box, per raggruppare gli elementi in sottocategorie
  • una lista di acronimi realizzati con il tag acronym
  • una serie di abbreviazioni con il tag abbr
  • una tabella che sfrutta i tag th, caption e l’attributo summary
  • una image map che utilizza l’attributo alt
  • una image map che utilizza l’attributo title
  • una immagine con una descrizione estesa riferita dall’attributo longdesc
  • l’attributo title inserito in un link
  • l’attributo title inserito in un’immagine

I risultati del test

I risultati della pagina sono molto vari tra le diverse piattaforme.

Netscape 4.7

Data l’età, il supporto di Netscape 4.7 è piuttosto scadente:

  • non sono riconosciuti i tag fieldset e legend delle form
  • non sono raggruppati gli elementi della combo-box
  • non è possibile utilizzare i tasti di scelta rapida e nemmeno l’ordine di tabulazione
  • sono ignorati gli attributi title per i link e le immagini
  • non sono visualizzate le abbrevazioni e gli acronimi
  • sono visualizzati gli attributi alt nelle immagini, ma non nelle image map
Form in Netscape 4.7 senza fieldset e optgroup
Netscape 4.7: non vengono riconosciuti i tag e gli attributi che rendono le form accessibili e neppure optgroup per le combobox

Netscape 6+ / Mozilla

Con Netscape 6+ e Mozilla le cose migliorano sensibilmente: sono riconosciuti correttamente molti tag ed attributi.

I limiti principali di questa versione rimangono:

  • mancata visualizzazione degli alt nelle image map (ma non del tag title)
  • scadente gestione delle tabulazioni all’interno della pagina: è vero che l’attributo tabindex viene correttamente riconosciuto, ma procedendo con la tabulazione il browser non scrolla la pagina per posizionarsi sugli elementi non a video

Molto buona la gestione degli acronimi e delle abbreviazioni, che compaiono come parole sottolineate, delle virgolette (tag q) e del tag optgroup, visualizzato come intestazione agli elementi.

Netscape 6 supporta acronimi e abbreviazioni
Netscape 6: vengono gestiti correttamente sia gli acronimi sia le abbreviazioni, evidenziandoli con una sottolineatura tratteggiata
Netscape 6 supporta le form accessibili
Netscape 6: le form accessibili sono visualizzate correttamente e sono anche raggruppati eventuali elenchi presenti in un optgroup

Cominciano timidamente a farsi vedere gli attributi longdesc, anche se per visualizzare la pagina è necessario posizionarsi sull’immagine, scegliere “Proprietà” dal menù contestuale e cliccare sul link della descrizione.

Netscape 6 visualizza le pagine di descrizione per le immagini
Netscape 6: è possibile aprire una finestra di proprietà per le immagini che contiene un link al file di descrizione specificato nell’attributo longdesc. Il metodo è effettivamente un po’ laborioso, ma funziona.

Internet Explorer Windows

Anche Internet Explorer 5+ ha un buon supporto per l’accessibilità, anche se in alcuni punti (come gli acronimi), potrebbe essere migliorato, per esempio sottolineando le voci, come fa Netscape. Dalla versione 6 Windows anche il tag optgroup per raggruppare gli elementi di una combo-box è interpretato correttamente.

Internet Explorer visualizza gli acronimi ma non li evidenzia
Internet Explorer 6 per Windows: vengono visualizzati gli acronimi se vi si posiziona il muose, ma non sono evidenziati

Internet Explorer Macintosh

Anche la versione 5 Mac gestisce optgroup, ed è forse il browser che visualizza i gruppi nel modo più efficace.

Internet Explorer 5 per Mac visualizza gli optgroup come più livelli di menù a tendina
Internet Explorer 5 per Mac: visualizza gli optgroup come più livelli di menù a tendina, una soluzione davvero efficace

Opera

Opera, in entrambe le versioni provate, non ha brillato per il suo riconoscimento dei tag accessibili. Solo con la versione 6 si comincia a vedere qualche timido miglioramento, soprattutto nelle form.

Opera 6 ha un supporto limitato per le form
Opera: nella versione 6 gestisce l’attributo fieldset, ma non l’optgroup

iCab

iCab per Macintosh include un’interessante opzione: visualizza tra parentesi i tasti di scelta rapida (accesskey) per le scorciatoie da tastiera.

È inoltre possibile richiedere, dal menu contestuale, l’apertura in una nuova finestra del file assegnato ad un’immagine con l’attributo longdesc, un po’ più rapidamente che in Netscape.

iCab visualizza i tasti di scelta rapida tra parentesi angolate
iCab: visualizza delle parentesi angolate nelle quali sono evidenziati i tasti di scelta rapida (accesskey) raggiungibili da tastiera.

Tabelle riassuntive

Segue una serie di tabelle con i dettagli del test.

Non è presentata una scheda riepilogativa con il supporto alle tabelle accessibili in quanto tutti i browser provati visualizzano correttamente i tag.

Se riesci a provare la pagina di esempio con un browser e una piattaforma non presente nella lista (ad esempio Linux), contattaci così che possiamo includere i risultati della tua prova e creare un elenco più completo, a disposizione di tutti.

Form

Nella tabella è evidenziato il supporto dei browser ai tag fieldset e optgroup che consentono di raggruppare rispettivamente i campi di una form e gli elementi di una combo-box.

È anche evidenziata la possibilità o meno di muoversi correttamente nelle form utilizzando il tabulatore secondo l’ordine definito dall’attributo tabindex.

Accessibilità delle form
BrowserFieldsetOptgroupTabindex
Windows 2000
Internet Explorer 5No
Internet Explorer 5.5No
Internet Explorer 6
Netscape 4.7NoNoNo
Netscape 6.2Parz.
Netscape 7.0 pr1Parz.
Mozilla 1.0Parz.
Opera 5NoNoNo
Opera 6NoNo
Mac Os 9.1
Internet Explorer 5
Netscape 4.7NoNoNo
Netscape 6.2Parz.
Mozilla 1.0Parz.
iCab 2.8No
Opera 5NoNoNo

Nota: Netscape 6+ e Mozilla gestiscono l’attributo tabindex, però hanno qualche difficoltà nel visualizzare l’oggetto che ha il “fuoco” fuori della parte visibile dello schermo.

Una curiosa particolarità: mentre Internet Explorer considera i radio button come una sola entità quando si usa il tabulatore, Netscape 6+ e Mozilla distinguono ognuna delle opzioni del controllo.

Testo

I tag Html offrono la possibilità di arricchire il testo con abbreviazioni, acronimi, citazioni, che dovrebbero essere interpretate dal browser. Nella tabella, “virgolette” si riferisce al supporto del tag q, mentre citazioni indica il tag blockquote.

Accessibilità del testo
BrowserAcronimiAbbreviazioniVirgoletteCitazioni
Windows 2000
Internet Explorer 5Parz.NoNo
Internet Explorer 5.5Parz.NoNo
Internet Explorer 6Parz.NoNo
Netscape 4.7NoNoNo
Netscape 6.2
Netscape 7.0 pr1
Mozilla 1.0
Opera 5Parz.Parz.
Opera 6Parz.Parz.
Mac Os 9.1
Internet Explorer 5Parz.Parz.
Netscape 4.7NoNoNo
Netscape 6.2
Mozilla 1.0
iCab 2.8
Opera 5Parz.Parz.

Nota: Internet Explorer visualizza correttamente gli acronimi. A differenza di Netscape e Mozilla, però, non dà indicazioni sulla presenza dell’acronimo, per esempio sottolineandolo, rendendo così difficile il suo riconoscimento. È comunque possibile utilizzare delle regole Css per simulare il comportamento di Netscape. La stessa cosa vale per Opera, che in più visualizza anche le abbreviazioni.

Link

È possibile estendere le informazioni dei link con l’attributo title. Inoltre, è prevista dall’Html la possibilità di introdurre delle scorciatoie da tastiera e di navigare i link con il tabulatore.

Accessibilità dei link
BrowserTitleAccesskeyTabindex
Windows 2000
Internet Explorer 5
Internet Explorer 5.5
Internet Explorer 6
Netscape 4.7NoNoNo
Netscape 6.2Parz.
Netscape 7.0 pr1Parz.
Mozilla 1.0Parz.
Opera 5NoNo
Opera 6NoNo
Mac Os 9.1
Internet Explorer 5
Netscape 4.7NoNoNo
Netscape 6.2Parz.
Mozilla 1.0Parz.
iCab 2.8No
Opera 5NoNoNo

Immagini

Anche per le immagini è possibile utilizzare l’attributo title, mentre invece l’attributo longdesc consente di collegare una pagina di dettaglio dell’immagine.

Accessibilità delle immagini
BrowserAltTitleLongdesc
Windows 2000
Internet Explorer 5No
Internet Explorer 5.5No
Internet Explorer 6No
Netscape 4.7NoNo
Netscape 6.2Parz.
Netscape 7.0 pr1Parz.
Mozilla 1.0Parz.
Opera 5No
Opera 6No
Mac Os 9.1
Internet Explorer 5No
Netscape 4.7NoNo
Netscape 6.2Parz.
Mozilla 1.0Parz.
iCab 2.8
Opera 5No

Nota: la gestione dell’attributo longdesc è ancora un po’ troppo precaria e complessa in Netscape 6+ e Mozilla per considerarla definitiva.

Image Maps

Sia l’immagine sia le aree della mappa consentono di specificare l’attributo alt, anche se questa seconda possibilità non viene visualizzata sullo schermo quando si disabilitano le immagini. Sarebbe utile riuscire a vedere i contorni delle area anche quando l’immagine non viene caricata, e trovare all’interno le descrizioni alternative.

Accessibilità delle image map
BrowserAlt (immagine)Alt (area)Title (area)
Windows 2000
Internet Explorer 5
Internet Explorer 5.5
Internet Explorer 6
Netscape 4.7NoNo
Netscape 6.2No
Netscape 7.0 pr1No
Mozilla 1.0No
Opera 5No
Opera 6No
Mac Os 9.1
Internet Explorer 5No
Netscape 4.7NoNo
Netscape 6.2No
Mozilla 1.0No
iCab 2.8No
Opera 5NoNo

The Design of Sites

The Design of Sites è un libro che comprende 90 problemi e relative soluzioni (chiamati pattern) con i quali il progettista di un sito web si imbatte durante il proprio lavoro.

Il concetto di pattern non è nuovo, ma arriva dal mondo della programmazione e ancor prima da quello dell’architettura (a coniare il termine pattern è stato infatti l’architetto Christopher Alexander, nel libro dal titolo “A Pattern Language: Towns, Buildings, Construction” del 1977).

I pattern proposti in The Design of Sites non sono né regole scritte nella pietra, né la parola finale e definitiva per le problematiche di progettazione web. Gli autori hanno invece analizzato l’evoluzione del web design riscontrando come i progettisti abbiano realizzato nel corso degli anni soluzioni che sono presto diventate degli standard de facto (come la barra di navigazione in alto e a sinistra, il logo in alto a sinistra, ecc.).

Il libro è così una raccolta di queste soluzioni, suddivise in categorie (tipologia di sito, navigazione, home page, contenuto, credibilità, e-commerce, layout di pagina, ecc.). Ad ogni pattern sono affiancate diverse immagini descrittive, una presentazione del problema e una dettagliata spiegazione della o delle soluzioni possibili. Ogni pattern non è isolato dagli altri, ma frequenti riferimenti lo pongono in relazione con quelli correlati.

Questo manuale non è sicuramente la soluzione a tutti i mali: il vostro progetto non sarà migliore impiegando ciecamente quello che gli autori presentano nel testo. Diciamo piuttosto che è un comodissimo riferimento per evitare di inventare ogni volta “l’acqua calda”: prima di cominciare lo sviluppo del sito date un’occhiata ai pattern che si avvicinano alla vostra realtà, così da valutare se ce ne sono di applicabili, e quali influenze possono avere per il vostro lavoro. Ottima, davvero ottima, la lista di risorse di approfondimento e ragionate presentata in appendice al testo e riproposta sul sito web del manuale.

Contattati da Fucinaweb, gli autori hanno accettato di rispondere a qualche domanda sul futuro dei pattern nel web design.

  1. Il titolo del vostro libro è “The Design of Sites” e a prima vista sembra solo un altro testo che insegna come realizzare siti web. In che senso è diverso e come avete deciso di organizzarlo? A che pubblico si rivolge? [Risposta 1]
  2. Cosa sono i pattern e in che modo è possibile applicarli alla realtà web? Potete darci un esempio tratto dal libro? [Risposta 2]
  3. Non è troppo presto per analizzare i siti web o organizzare una lista di buone abitudini come pattern? [Risposta 3]
  4. Il libro e i pattern sono basati sullo “User Centered Design“. Ma cos’è precisamente e come si collega al campo della “User Experience“? [Risposta 4]
  5. Non pensate che sarebbe stato utile per i lettori disporre di una versione elettronica del testo, così da permettergli di organizzare i pattern secondo le proprie esigenze? [Risposta 5]

Il titolo del vostro libro è “The Design of Sites” e a prima vista sembra solo un altro testo che insegna come realizzare siti web. In che senso è diverso e come avete deciso di organizzarlo? A che pubblico si rivolge?

Gli scaffali sono pieni di libri che descrivono come NON realizzare i siti e che elencano i più diffusi errori di usabilità. Molti di questi sono estremamente divertenti da leggere, ma in realtà non aiutano a costruire dei buoni siti.

Il nostro libro si concentra invece sulle regole, i processi e i modelli (principles, processes, patterns) che consentono di realizare siti web efficaci. Per regole si intendono i concetti di alto livello che guidano l’intero processo di progettazione. Un esempio è capire le necessità e le capacità degli utenti prima di realizzare qualsiasi cosa. Un altro è imparare le basi delle disabilità visive legate ai colori, così da evitare combinazioni di colore che possono creare difficoltà alle persone interessate da queste problematiche.

Per processo intendiamo invece il modo con cui le regole sono messe in pratica. Questa categoria include i passi principali e le pietre miliari nella costruzione di un sito e si preoccupa anche di come valutare un sito e come condurre un test di usabilità.

La parte principale del libro è però dedicata ai web design pattern (modelli per la progettazione web) . Abbiamo pensato e organizzato 90 pattern in diverse aree: navigazione, home page, gestione dei contenuti, layout di pagina.

Cosa sono i pattern e in che modo è possibile applicarli alla realtà web? Potete darci un esempio tratto dal libro?

I design pattern rappresentano un modo per comunicare tipici problemi che affrontiamo nella progettazione di un sito, insieme alla soluzioni per risolverli. Posti di fronte ad una pagina web, ad esempio, non sempre è chiaro quali immagini possono essere cliccate. Per risolvere questo problema i web designer realizzano queste immagini in modo da farle sembrare dei bottoni che è possibile cliccare. Un altro esempio: quando ci troviamo in un sito spesso non è facile capire come possiamo muoverci al suo interno. In questo caso i designer costruiscono barre di navigazione che sono disposte coerentemente in alto e a sinistra delle pagine del sito.

Lo scopo di un design pattern è catturare l’essenza di un problema insieme alla sua soluzione, descrivere quali sono gli obiettivi e i limiti, e far capire cosa funziona e cosa non funziona. Invece che reinventare continuamente la ruota, il pattern fornisce un modello e diversi esempi da utilizzare.

Sul nostro sito abbiamo caricato un pattern di esempio che descrive il Process Funnel [Pdf, 260 Kbyte] (lett. “processo di incanalamento”). In questo tipo di processo l’utente segue una serie di passi ben definiti per compiere un’operazione, come ad esempio creare un nuovo account o procedere a un pagamento.

I pattern, considerati nella loro individualità, sono in realtà solo marginalmente utili. Quello che è realmente importante è il linguaggio dei pattern, che descrive come i diversi pattern sono in relazione gli uni agli altri. Tornando all’esempio del Process Funnel, questo pattern può far parte di un sito di e-commerce o di una intranet, cioè due pattern che si trovano ad un livello più alto. Inoltre, nel progettare con il pattern Process Funnel è importante considerare anche altri elementi, come un sistema di help che dipenda dal contesto (Context-Sensitive Help), l’importanza di visualizzare gli elementi più importanti senza scorrere la pagina (Above
the Fold
) e prevenire gli errori (Preventing Errors). Questi 3 sono invece pattern che si posizionano ad un livello più basso.

Non è troppo presto per analizzare i siti web o organizzare una lista di buone abitudini come pattern?

E’ sicuramente vero che il web sta evolvendo constantemente, ma le cose hanno cominciato a stabilizzarsi. Non assistiamo a nuovi design al ritmo di qualche tempo fa, e questo è positivo, perché vuol dire che i designer sono più interesatti al web come strumento per soddisfare gli obiettivi, piuttosto che come ambiente in cui divertirsi a sperimentare.

I pattern di questo libro offrono una serie di progettazioni che sono pensate per soddisfare le aspettative degli utenti. Il dipartimento di psicologia di Wichita ha condotto un interessante studio, che consiste nel consegnare alle persone un foglio bianco, a rappresentare una home page. A questo punto è stato chiesto alle persone di disporre sulla pagina, come ritenevano più opportuno, le barre di navigazione, la casella di ricerca, i banner, ecc. Come potete immaginare, quasi tutti hanno disegnato la barra di navigazione in alto e a sinistra, la casella di ricerca in alto a destra e i banner in cima alla pagina.

Quello che è interessante notare è che siamo di fronte ad una co-evoluzione dei pattern e delle aspettative degli utenti. I pattern si basano sulle aspettative degli utenti e queste sono a loro volta basate sui pattern usati per costruire i siti. È una conversazione in continuo divenire.

Il libro e i pattern sono basati sullo “User Centered Design“. Ma cos’è precisamente e come si collega al campo della “User Experience“?

L’idea principale che sta alla base dello User Centered Design è quella di progettare il sito tenendo sempre in considerazione le esigenze degli utenti, in modo da avere continui riscontri sull’utilità e usabilità del sito in costruzione. Il modo migliore di farlo è di cominciare la progettazione e rielabolarla ogni volta che si ricevono nuove importanti indicazioni dagli utenti.

Non si tratta quindi di un approccio monolitico, dove si parla agli utenti all’inizio del progetto, si spendono alcuni mesi per realizzarlo e poi si lancia il sito, solo per scoprire che non funziona come dovrebbe. L’idea dello User Centered Design è quella di compiere un elevato numero di piccoli passi, invece che un solo grande passo.

C’è da fare un’importante distinzione tra utente e cliente (customer and client). Per utente (customer) intendiamo ogni persona che userà il sito che stiamo progettando, mentre per cliente (client) intendiamo le persone per le quali stiamo facendo il lavoro, in poche parole le persone che pagano. Nel costruire una intranet, ad esempio, i clienti potrebbero essere i dirigenti, mentre gli utenti sono le persone che usano il sito web. Questo ci aiuta ad enfatizzare il fatto che è estremamente importante ricevere dei riscontri dagli utenti perché sono queste persone, e non i clienti, che possono decretare il successo o il fallimento del progetto.

Si sente spesso parlare di User Experience. Questa disciplina riguarda fondamentalmente la percenzione che si ha di un sito, il fatto che sia divertente e facile da usare, piuttosto che un tormento. Lo User Centered Design è uno dei modi che favoriscono una User Experience soddisfacente, in quando si propone di capire le necessità e le capacità degli utenti e di costruire un sito web che soddisfi i loro obiettivi.

Non pensate che sarebbe stato utile per i lettori disporre di una versione elettronica del testo, così da permettergli di organizzare i pattern secondo le proprie esigenze?

Una delle idee originarie del libro era di organizzare i pattern in un quaderno ad anelli, in modo che i progettisti potessero organizzarli secondo quelli più rilevanti per il loro lavoro. Questa idea non è stata possibile per diverse ragioni, ma abbiamo appena finito di realizzare delle versioni a singola pagina di tutti i pattern che, per un periodo limitato, sono disponibili gratuitamente a chi acquista il libro su Amazon. I lettori di Fucinaweb hanno però la possibilità di scaricarne due in esclusiva: Multiple Ways to Navigate [Pdf, 890 Kbyte] e Preventing Errors [Pdf, 300 Kbyte]

Douglas van Duyne è presidente e amministratore di NetRaker Corporation, un’agenzia che pronone soluzioni basate sulla customer user experience
James Landayè docente di informatica all’Universtità della California a Berkeley.
Jason Hong è ricercatore di Hci presso l’Università della California a Berkeley.

The Design of Sites – Patterns, principles and processes for crafting a customer-centered web experience * di Douglas K. Van Duyne, James A. Landay, Jason I. Hong * pagine 760 * prezzo 54.99 dollari * edito da Addison Wesley * pubblicato nel 2002