Fornire informazioni contestuali e di orientamento

La linea guida 12 associa direttamente accessibilità e comprensibilità: organizzare e spiegare i contenuti in modo che siano più comprensibili significa renderli più accessibili a tutti gli utenti, in particolare a chi è affetto da disabilità cognitive o della vista.

Punto di controllo 12.1, priorità 1

Dare un titolo significativo a ogni frame

In un sito realizzato a frame, uno dei problemi principali con cui si confrontano gli utenti che navigano con uno screen reader è la difficoltà di identificare la funzione dei vari frame, se il nome di ciascuno non è significativo e se manca una descrizione testuale.

Le Tecniche HTML per le WCAG 1.0 raccomandano di usare l’attributo title per dare un nome ai frame, e riportano il seguente codice di esempio (qui adattato alla lingua italiana).

Inizio pagina

Punto di controllo 12.2, priorità 2

Descrivere il contenuto dei frame con longdesc

Il punto di controllo 12.2 integra la funzione di orientamento svolta dal punto 12.1. L’insistenza delle WCAG 1.0 sui frame si spiega con il lasso temporale trascorso dalla loro pubblicazione: alla fine degli anni ’90 i siti organizzati a frame erano molto più numerosi di oggi e costituivano una soluzione di progettazione largamente usata, anche se problematica per l’accessibilità; da qui la necessità di appositi punti di controllo, per cercare di compensare la potenziale inaccessibilità dei frame, raccomandando agli sviluppatori l’uso di elementi come NOFRAMES e di attributi come title e longdesc.

Il lettore interessato potrà trovare nel documento di Tecniche HTML per le WCAG 1.0 un esempio di come utilizzare l’attributo longdesc per fornire una descrizione del contenuto di ciascun frame (paragrafo 10.2 Describing frame relationships ).

Dovendo progettare oggi un sito accessibile, le soluzioni a frame dovrebbero essere scartate a priori, in considerazione del fatto che le DTD consigliate per i siti accessibili sono quelle strict, che non contengono l’attributo target, essenziale per la gestione della navigazione tra frame.

Inizio pagina

Punto di controllo 12.3, priorità 2

Raggruppare i contenuti usando codice strutturale

Il punto di controllo 12.3 invita a ragionare sulle somiglianze e le differenze di contenuto all’interno di un documento, in modo da suddividere le informazioni in blocchi strutturati coerenti e maneggevoli, creati seguendo la logica interna dei contenuti.

L’applicazione di questo punto di controllo riguarda tutti i principali tipi di contenuto marcabili in HTML e XHTML: tabelle, elenchi, moduli, titoli, paragrafi. Le Tecniche HTML per le WCAG 1.0 forniscono una serie di indicazioni per l’applicazione del punto di controllo 12.3 (paragrafo 1.2 Structural grouping ):

I seguenti meccanismi di HTML 4.01 raggruppano i contenuti e li rendono più facilmente comprensibili:

• usare FIELDSET per raggruppare i controlli di modulo in unità semantiche [cioè in blocchi di significato affine] e descrivere il gruppo tramite l’elemento LEGEND;
• usare OPTGROUP per organizzare lunghi elenchi di opzioni di menu in gruppi più piccoli;
• usare le tabelle per dati di tipo tabellare e descriverle tramite CAPTION;
• raggruppare righe e colonne tramite THEAD, TBODY, TFOOT e COLGROUP;
• annidare gli elenchi usando UL, OL e DL;
• usare le intestazioni di sezione (H1 – H6) per creare documenti strutturati e per spezzare lunghe sequenze di testo;
• suddividere le righe di testo in paragrafi (usando l’elemento P);
• raggruppare i collegamenti correlati.

Inizio pagina

Uso di FIELDSET e LEGEND

L’elemento FIELDSET serve per raggruppare controlli di modulo che sono omogenei tra loro, mentre l’elemento LEGEND serve a descrivere il contenuto di un elemento FIELDSET. L’esempio seguente, adattato come sempre all’italiano, è tratto dalle Specifiche HTML 4.01. Mostra un modulo che un medico potrebbe sottoporre ai propri pazienti, per semplificare la raccolta delle informazioni personali e cliniche su ciascuno di loro. Come si può vedere dalla lettura del codice di marcatura e dal successivo esempio grafico, i contenuti sono suddisivi in tre blocchi omogenei – informazioni personali, anamnesi e cure attuali – raggruppati per mezzo di altrettanti elementi FIELDSET ed etichettati di conseguenza tramite LEGEND. Un simile modo di raggruppare i contenuti facilita all’utente la comprensione e la compilazione del modulo.

Figura 17.1 Una possibile rappresentazione grafica del modulo riportato nel Listato 17.2.

Inizio pagina

Uso di OPTGROUP

L’elemento OPTGROUP consente di raggruppare in gruppi omogenei le voci di un menu realizzato tramite l’elemento SELECT; ha lo scopo di rendere più semplice per l’utente la comprensione del contenuto del menu e la navigazione tra le varie voci. Riportiamo un esempio di codice di marcatura che mostra un frammento di menu SELECT, in cui le province italiane sono state raggruppate, tramite l’uso di OPTGROUP, in base alla regione di appartenenza. Si noti che gli elementi OPTION e OPTGROUP sono associati a un attributo label: lo scopo di quest’attributo è fornire una forma abbreviata del contenuto di OPTION. Secondo le Specifiche HTML 4.01, i programmi utente dovrebbero riprodurre di preferenza il contenuto di label, e, solo se questo manca, il contenuto di OPTION.

Figura 17.2 Riproduzione del codice di marcatura del Listato 17.3 da parte di alcuni browser su sistema operativo Mac OS X: Firefox 2.0 (A), Opera 9.02 (B), Safari 1.3.2 (C), iCab 3.0.3 (D), Internet Explorer 5.2 (E) e Lynx 2.8.6 (F).

Se sono usati OPTGROUP e label, la rappresentazione dei menu SELECT da parte dei programmi utente è la più varia, come mostra il collage di catture in Figura 17.2. Firefox e Opera non rispettano il dettato delle Specifiche HTML, dal momento che mostrano il contenuto di OPTION invece che quello di label. Lo stesso fa il browser testuale Lynx, con l’aggravante di non mostrare le etichette di raggruppamento nell’elemento OPTGROUP (le voci Lazio e Campania). Safari, iCab e Internet Explorer rispettano invece la raccomandazione del W3C, mostrando correttamente la sigla delle province invece del loro nome esteso. Internet Explorer 5 per Mac è il browser che rende al meglio la funzione di raggruppamento dell’elemento OPTGROUP, mostrando le voci incluse in ciascun gruppo solo all’atto della selezione del gruppo, così da ridurre notevolmente la lunghezza dell’elenco posto all’interno del menu SELECT.

Inizio pagina

Uso di CAPTION e dei raggruppamenti di righe e colonne

Tra i suggerimenti per l’applicazione del punto di controllo 12.3 c’è quello di usare l’elemento TABLE per strutturare dati di tipo tabellare e, in subordine, di usare in modo appropriato gli elementi che consentono di dare un titolo alla tabella (CAPTION) e di accorparne i contenuti in modi che ne facciano risaltare la logica e la gerarchia (THEAD, TBODY, TFOOT, COLGROUP).

Per esemplificare in una situazione di produzione l’uso di questi accorgimenti, riportiamo in forma di tabella strutturata una classifica della Serie A italiana di calcio (limitata per brevità alle prime sette squadre).

Chiariamo gli aspetti salienti di questa tabella di dati, cominciando dall’elemento CAPTION, che contiene la didascalia della tabella. In base alle regole definite dalle Specifiche, CAPTION deve essere il primo elemento dopo TABLE. Ha una funzione importantissima: quella di descrivere in modo sintetico e chiaro il contenuto della tabella.

Figura 17.3 Una possibile rappresentazione della tabella di dati del listato 17.4 (il browser usato è iCab 3.03 su Mac OS X).

Osservando l’immagine in Figura 17.3, notiamo innanzitutto che i dati sono suddivisi in 20 colonne. Le colonne sono poi raggruppate in quattro blocchi, riconoscibili perché separati da righe verticali: 1) Squadra e Punti, due colonne; 2) Totali, sei colonne; 3) In casa, sei colonne; 4) Fuori casa, sei colonne. Tali raggruppamenti sono stati definiti nel codice di marcatura per mezzo dell’elemento COLGROUP.

Tutti gli elementi COLGROUP presenti nel codice devono seguire CAPTION e precedere qualsiasi elemento che definisca righe (TR) o raggruppamenti di righe (THEAD, TBODY, TFOOT). Il numero di colonne racchiuso da un elemento COLGROUP può essere definito in due modi: o tramite il valore dell’attributo span (per esempio, span="6" definisce un gruppo di sei colonne) oppure tramite la somma di elementi COL contenuti all’interno di COLGROUP. Nel listato della tabella in Figura 17.3 sono stati usati tutti e due i metodi. Si osservi il codice di marcatura per comprendere il meccanismo nei dettagli.

Passiamo ora ai raggruppamenti orizzontali. Il primo che si incontra nel codice è quello marcato con l’elemento THEAD. Rappresenta la testata della tabella, cioè quella parte che contiene i nomi delle colonne. In questo caso si tratta di due righe, le cui celle sono marcate in alcuni casi con elementi TH, che servono propriamente per identificare le informazioni d’intestazione in una tabella, e in altri casi con elementi TD, che servono per marcare sia celle di dati sia celle che svolgono allo stesso tempo il ruolo di celle d’intestazione e di celle di dati. Nella nostra tabella di esempio, gli elementi della testata marcati con TD (le abbreviazioni G, V, P, N ecc.) hanno proprio questo doppio ruolo: sono dati rispetto alla categoria superiore (Totali, In casa, Fuori casa) e intestazioni rispetto ai valori numerici che indicano i risultati ottenuti dalle singole squadre.

Si noti, inoltre, che alcune celle si estendono su più colonne. Per ottenere un simile risultato si usano gli attributi rowspan e colspan: il primo indica celle che si espandono su più righe (è il caso dei TH che contengono le etichette Squadra e Punti), il secondo celle che si espandono su più colonne (è il caso dei TH con Totali, In casa e Fuori casa). I valori dei due attributi devono essere numeri; indicano per quante righe o colonne si estende la relativa cella: colspan="6" vuol dire che la cella interessata occupa lo spazio di sei colonne.

Il secondo raggruppamento orizzontale è il blocco che contiene i nomi delle squadre e i punteggi. Nel codice di marcatura corrisponde al frammento marcato con TBODY, che rappresenta il corpo della tabella, cioè la parte che contiene i dati. Tuttavia, nel codice di marcatura questo pezzo corrisponde al terzo blocco orizzontale. Il secondo è infatti la parte marcata con TFOOT, cioè il piede della tabella (la parte che contiene la legenda). Questa strana inversione, voluta dalle regole definite nelle Specifiche HTML 4.01, si spiega con la necessità di far sì che i browser possano visualizzare le tabelle in modo incrementale, mostrando per prime le informazioni di orientamento, contenute nella testata e nel piede della tabella, e lasciando per ultimi i dati contenuti nel corpo. Ciò è utile quando si hanno tabelle molto lunghe o connessioni molto lente: in simili casi, l’utente può cominciare a leggere le informazioni contestuali, mentre i dati nel corpo della tabella si compongono progressivamente sullo schermo.

La visualizzazione di bordi intorno ai raggruppamenti di righe e colonne è stata ottenuta, per semplificare il codice dell’esempio, usando gli attributi border e rules dell’elemento TABLE: tali attributi non sono deprecati, ma lo stesso risultato può essere ottenuto con i fogli di stile. Sempre per ragioni di semplificazione, abbiamo evitato di inserire nel codice della tabella gli attributi per l’accessibilità scope, headers e id, il cui uso era del resto già stato ampiamente illustrato nel commento al punto di controllo 5.2 (Capitolo 8).

Inizio pagina

Raggruppare le informazioni in elenchi e sottoelenchi

Un altro dei numerosi modi in cui può essere applicato il punto di controllo 12.3 è quello di spezzare le elencazioni di dati troppo lunghe in una serie di elenchi più brevi, annidati opportunamente in base al contenuto e marcati usando gli appositi elementi strutturali OL, UL e DL.

Facciamo un esempio concreto: immaginiamo di dover riportare su un sito di notizie politiche l’elenco dei membri della Commissione Cultura della Camera dei Deputati. Abbiamo ricevuto l’elenco in formato testo e abbiamo visto che comprende un presidente, due vicepresidenti, due segretari e quarantuno membri, citati in ordine alfabetico, con il nome del partito di appartenenza tra parentesi. Potremmo impaginare in HTML l’elenco dei quarantuno membri così com’è, mettendo ogni nome in un LI, all’interno di un elenco UL. Sarebbe tecnicamente corretto. Ma c’è un modo più strutturato di presentare lo stesso contenuto? Non potremmo per esempio raggruppare i vari membri in base ai partiti di appartenenza, così da permettere al lettore di rendersi più facilmente conto del peso relativo di ciascun partito all’interno della Commissione? Certo che sì. Ecco dunque un altro modo per applicare il punto di controllo 12.3.

Il Listato 17.5 mostra una delle possibili soluzioni del problema proposto: l’intero organico della Commissione Cultura della Camera nell’attuale Legislatura è ripartito per mezzo di un elenco di definizioni (DL) in base alla carica ricoperta; i membri comuni sono poi organizzati in un elenco UL suddiviso in sottoelenchi OL in base al partito di appartenenza. La composizione della Commissione è ricavata dal sito web della Camera dei Deputati .

Figura 17.4. Una possibile rappresentazione in un browser grafico del codice nel Listato 17.5.

[Inizio approfondimento] Uso accessibile delle liste di definizioni

La sintassi degli elementi DT e DD permette relazioni uno a molti (un DT a cui seguono più DD) e molti a uno (più DT a cui segue un solo DD). Tuttavia quest’uso legale può essere fuorviante per gli utilizzatori di JAWS. Infatti, lo screen reader, per indicare all’ascoltatore dove finisce il termine definito (DT) e dove comincia la definizione (DD), fa precedere il contenuto di ogni DD dalla lettura di un segno di uguale; sicché, quando il numero dei DD non corrisponde a quello dei DT, si hanno delle “equazioni” a cui o manca il primo membro o manca il secondo membro. Il Listato 17.6 esemplifica il problema (grazie a Leo Maria Cerreta per l’esempio e il suggerimento). L’uso più accessibile delle liste di definizioni è dunque quello in cui vi è una corrispondenza 1 a 1 tra elementi DT ed elementi DD.

Listato 17.6 Corrispondenza uno a molti tra DT e DD.

<dl>

<dt>alberi</dt>

<dd>pino</dd>

<dd>abete</dd>

<dd>cipresso</dd>

</dl>

Questo codice produce in un browser grafico una struttura a elenco del tutto comprensibile (Figura 17.5).

Figura 17.5 Riproduzione in un browser grafico del codice nel Listato 17.6.

L’utente di JAWS ascolterebbe, però, le informazioni nel modo in cui sono riportate nel Listato 17.7, che non favorisce la comprensibilità (soprattutto nel caso in cui i contenuti dei primi elementi DD siano molto lunghi).

Listato 17.7 Lettura da parte di JAWS del codice nel Listato 17.6.

alberi = pino
= abete
= cipresso

Qual è, allora, un modo accessibile di marcare elenchi in cui a un termine definito corrispondono più definizioni, come nel caso di Figura 17.5? Usando un unico elemento DD per ogni elemento DT, e inserendo le varie “definizioni” all’interno di elenchi puntati o numerati: esattamente la soluzione che abbiamo mostrato nel Listato 17.5, relativamente all’organizzazione in elenchi e sottoelenchi dei membri della Commissione Cultura della Camera. [Fine approfondimento]

Inizio pagina

Organizzare i testi per titoli e paragrafi

Si tratta forse del criterio di organizzazione più importante ai fini della comprensibilità di un documento, dal momento che la grande maggioranza dei contenuti disponibili sul Web, nonostante l’aumento esponenziale della multimedialità negli ultimi due anni, è ancora costituita da testi messi in forma di discorso strutturato. Appartengono a questa categoria, per esempio, gli articoli dei quotidiani online, la maggior parte dei contenuti dei blog, le voci di Wikipedia, le relazioni tecniche, le leggi e i regolamenti, gli articoli scientifici, le presentazioni a scopo commerciale di prodotti e società, e vari altri tipi di comunicazione testuale disseminati sul Web.

L’organizzazione per titoli e paragrafi è importante innanzitutto per chi usa una sintesi vocale, in quanto la presenza di titoli significativi permette di fare una rapida panoramica dei contenuti, senza essere costretti a leggere integralmente il testo di un documento. Ma è importante anche per l’utente che usa un comune browser grafico, perché non c’è nulla di meno accessibile alla lettura e alla comprensione che trovarsi di fronte a un muro compatto di parole, mai interrotto da un titolo o da un a capo.

In HTML e XHTML, nell’usare gli elementi di intestazione, cioè i titoli da H1 a H6, è importante fare attenzione alla gerarchia, cioè alle relazioni di subordinazione e coordinazione tra i contenuti marcati con titoli. Proponiamo anche in questo caso un esempio tratto dalla realtà del Web, che mostra un caso tipico di contenuti organizzati gerarchicamente e suddivisi in una serie di blocchi correlati (Listato 17.8). Il testo è tratto dal sito italiano di Wikipedia ed è una sintesi della prima parte della voce “Dinosauri” .

Figura 17.6 Una possibile rappresentazione grafica del testo strutturato per titoli e paragrafi, presentato nel listato 17.8.

L’elemento H1 marca il titolo principale del documento (“Dinosauri”). Con H2 sono marcati i titoli degli argomenti immediatamente subordinati a H1. Nel nostro esempio, si tratta delle principali suddivisioni della voce di Wikipedia “dinosauri”, che sono: “Cos’è un dinosauro?”, “Studio scientifico”, “Storia”, e varie altre. Per brevità, abbiamo riportato nel listato solo la prima. La sezione “Cos’è un dinosauro?” è suddivisa a sua volta in due sottoargomenti, “Definizione” e “Caratteristiche e comportamento”, i quali, rispettando la gerarchia, devono essere marcati entrambi con H3. Il primo dei due non ha sottosezioni, il secondo invece ne ha due, “Dimensione” e “Comportamento”, che vanno perciò marcate con H4.

La gerarchia creata in un documento HTML dalle intestazioni H1 – H6 può essere rappresentata visivamente come un albero, il cui tronco è l’elemento H1. I rami più grandi corrispondono agli elementi H2, le loro ramificazioni agli elementi H3, e così via.

Tale gerarchia, che serve per descrivere i rapporti tra i contenuti, deve essere comunicata in qualche modo al lettore, affinché questi possa comprendere come è organizzato il documento che sta leggendo.

Uno screen reader conforme è in grado di dire all’ascoltatore qual è il livello di ciascun titolo: un H1 sarà descritto come un titolo di primo livello, un H6 come un titolo di sesto livello. Per il lettore vedente, la medesima gerarchia deve essere resa invece per mezzo di corrispondenti grandezze dei titoli: lo sviluppatore dovrà perciò conferire la massima grandezza agli elementi H1, la minima agli elementi H6 (in assenza di definizioni di stile nel codice di marcatura, i browser grafici seguono automaticamente tale regola di progressività).

Alterare la corrispondenza tra livelli di titolo e grandezza dei relativi testi può compromettere seriamente la comprensione dei contenuti da parte del lettore: se i titoli di minor livello hanno i caratteri di grandezza uguale o maggiore rispetto ai titoli di maggior livello, la gerarchia dei contenuti apparirà infatti rovesciata.

Inizio pagina

Punto di controllo 12.4, priorità 2

Associazione esplicita tra etichette e controlli di modulo

Usare elementi LABEL per marcare le etichette di un modulo è una precauzione essenziale per l’accessibilità. Non solo, infatti, consente alle tecnologie assistive conformi di indicare senza ambiguità all’utente qual è la funzione di un campo di input, ma permette anche il trasferimento diretto del focus dall’etichetta al campo. Ciò significa che, selezionando l’etichetta, si può immediatamente scrivere un valore nel campo di input a essa associato. Questa funzione diventa utilissima soprattutto quando ci si trova a dover cambiare il valore di caselle di controllo (checkbox) e pulsanti d’opzione (radio button): la maggior parte dei programmi utente di tipo grafico non consente, infatti, di ingrandire tali elementi, neppure se lo sviluppatore ha usato opportune istruzioni di stile, il che li rende difficilmente selezionabili da utenti ipovedenti o con disabilità motorie. Poter cambiare il valore di caselle di controllo e pulsanti d’opzione semplicemente selezionando l’etichetta di testo che li identifica (etichetta che può essere ingrandita a piacere), rappresenta perciò un importante strumento di accessibilità.

Il capitolo delle Specifiche HTML 4.01 dedicato ai moduli spiega che l’associazione esplicita tra elementi LABEL ed elementi INPUT avviene per mezzo di una relazione stabilita tramite gli attributi for e id. Ecco come:

L’attributo for associa un’etichetta con un altro controllo esplicitamente: il valore dell’attributo for deve essere lo stesso del valore dell’attributo id dell’elemento di controllo associato. Più di un LABEL può essere associato con lo stesso controllo creando riferimenti multipli per mezzo dell’attributo for.

Dalle Specifiche HTML 4.01 traiamo anche l’esempio che illustra il concetto, adattato come sempre alla lingua italiana.

Si noti che, usando l’associazione esplicita, diventa possibile quel che l’associazione implicita escludeva (si veda in proposito il commento al punto di controllo 10.2): cioè la separazione di etichetta e relativo campo input in due diversi elementi a livello di blocco, che nel Listato 17.10 sono due celle TD.

Tale possibilità, unita al fatto che più etichette possono essere associate a un unico controllo, se da un lato consente di allargare notevolmente le possibilità di impaginazione, dall’altro può creare problemi di perdita di contesto: se lo sviluppatore, infatti, decide di piazzare etichetta e campo di input molto lontani l’una dall’altro, il trasferimento del focus dall’etichetta al campo di input che le è associato trasporterà l’utente, sia che navighi a vista sia che usi uno screen reader, in un punto completamente diverso del documento.

Insomma, nel progettare moduli basati sull’associazione esplicita di etichette e campi di input, gli sviluppatori dovrebbero cercare di mantenere relativamente vicini i due elementi collegati, così da eliminare il rischio che l’utente, nel passaggio del focus dall’etichetta al campo di immissione, “perda il segno”, cioè non capisca più in che punto del documento si trovi.

Inizio pagina