Diodati.org - Accessibilità e traduzioni dal W3C

Sponsor ufficiale di Diodati.org: Hosting a partire da 25 euro/anno | Domini a partire da 10,79 euro/anno | Server dedicati a partire da 120 euro/mese

Proseguiamo il confronto tra il codice di cssforma.htm e di struttura.htm, analizzando il contenuto della terza colonna della pagina illustrata in figura 1, che mostra i due gruppi di link ad altri siti. Ecco come appare il relativo codice in cssforma.htm:

<div class="capo">
  Link ad altri siti
</div>
<div class="gruppo">
  Gruppo n.1
</div>
<div class="argo">
  argomento
</div>
<div class="link">
  <a href="cssforma.htm">collegamento n.01</a> 
  <div class="descri">
    breve descrizione
  </div>
 
[...]

  <a href="cssforma.htm">collegamento n.05</a> 
  <div class="descri">
    breve descrizione
  </div>
</div>
<div class="gruppo">
  Gruppo n.2
</div>
<div class="argo">
  argomento
</div>
<div class="link">
<a href="cssforma.htm">collegamento n.06</a> 
  <div class="descri">
    breve descrizione
  </div>

[...]

  <a href="cssforma.htm">collegamento n.10</a> 
  <div class="descri">
    breve descrizione
  </div>
</div>

Ed ecco l'equivalente di questo codice, tratto da struttura.htm:

<h2 class="capo">
  Link ad altri siti
</h2>
<h3 title="nome del gruppo di link" class="gruppo">
  Gruppo n.1
</h3>
<p title="argomento del gruppo di link" class="argo">
argomento
</p>
<dl class="link">
<dt>
  <a href="cssforma.htm">collegamento n.01</a>
</dt>
<dd class="descri">
  breve descrizione
</dd>

[...]

<dt>
  <a href="cssforma.htm">collegamento n.05</a>
</dt>
<dd class="descri">
  breve descrizione
</dd>
</dl>
<h3 title="nome del gruppo di link" class="gruppo">
Gruppo n.2
</h3>
<p title="argomento del gruppo di link" class="argo">
  argomento
</p>
<dl class="link">
<dt>
  <a href="cssforma.htm">collegamento n.06</a>
</dt>
<dd class="descri">
  breve descrizione
</dd>

[...]

<dt>
  <a href="cssforma.htm">collegamento n.10</a>
</dt>
<dd class="descri">
  breve descrizione
</dd>
</dl>

Due le cose importanti da notare. La prima è l'uso di titoli subordinati. Il titolo della sezione è "Link ad altri siti" ed è marcato con H2. Gli sono subordinate gerarchicamente due sottosezioni, "Gruppo 1" e "Gruppo 2": entrambe sono state marcate con H3 (senza salti di livello, come richiesto dalle WCAG 1.0). Benché compaiano più titoli nella stessa sezione, è stata rispettata la regola "un titolo per un contenuto": infatti "Gruppo 1" si riferisce al contenuto del primo gruppo di collegamenti, "Gruppo 2" al contenuto del secondo gruppo, mentre "Link ad altri siti", infine, ha come contenuto l'intera sezione. Ognuno dei tre elementi H utilizzati fa dunque riferimento ad un contenuto differente.

La seconda cosa è l'uso delle liste di definizioni, al posto dei generici DIV usati in cssforma.htm, per marcare gli elenchi di collegamenti. La caratteristica di tali elenchi è che ogni link è seguito da una descrizione. Questa struttura "oggetto - descrizione" è resa al meglio in (X)HTML proprio dalle liste di definizioni. L'elemento DL racchiude l'intera lista, DT i singoli collegamenti, DD la descrizione relativa a ciascun collegamento.

Dopo la colonna di destra, ci rimane da esaminare unicamente il pie' di pagina. In cssforma.htm il suo contenuto era racchiuso all'interno del solito DIV generico:

<div id="piede">
  <span class="gras">Pie' di pagina</span> (informazioni
  sul diritto d'autore e sulla tutela della riservatezza)
</div>

In struttura.htm viene reso in un elemento P:

<p id="piede">
  <strong>Pie' di pagina</strong> (informazioni
  sul diritto d'autore e sulla tutela della riservatezza)
</p>

Notate che nel primo esempio, la scritta "Pie' di pagina" viene messa in evidenza per mezzo di una classe applicata all'elemento SPAN, che crea l'effetto grafico del grassetto, un effetto di presentazione limitato alla sola riproduzione visuale del documento. Nel secondo esempio abbiamo invece sostituito l'effetto di presentazione con un elemento strutturale universale: STRONG. Per mezzo di esso, attribuiamo alla scritta una forte enfasi rispetto al resto del testo: enfasi che potrà essere resa in qualsiasi modo, anche non visuale, a seconda delle capacità del programma utente utilizzato.

Dove sono andati a finire, nel frattempo, tutti i DIV che riempivano il codice di cssforma.htm? Eliminati quasi tutti! Sono rimasti solo quelli che identificano veri contenitori generici, per i quali non esiste in (X)HTML un equivalente strutturale più specifico. Sono rimasti dunque i DIV che marcano la testata, le tre colonne centrali della pagina e il contenitore invisibile in cui tutte e tre sono racchiuse insieme al pie' di pagina. Lo scopo di questi DIV non è altro che quello di fungere da aggancio per gli stili che determinano la presentazione visuale della pagina: rappresentano l'equivalente evoluto della griglia di tabelle d'impaginazione usata in tabforma.htm. Ecco, ridotto all'essenziale, il codice che mostra la gerarchia dei DIV in struttura.htm:

<div id="testata">
  ... il contenuto della testata ...
</div>
<div id="corpo">
  <div id="corposin">
    ... il contenuto della colonna sinistra ...
  </div>
<div id="princip">
    ... il contenuto della colonna centrale ...
  </div>
<div id="corpodes">
    ... il contenuto della colonna destra ...
  </div>
<p id="piede">
    ... il contenuto del pie' di pagina ...
  </p>
</div>

Il P che racchiude il pie' di pagina diventerà anch'esso un DIV nel momento in cui i suoi contenuti, diversificandosi, non potranno più essere definiti per mezzo di un unico paragrafo e si vorrà comunque che siano raccolti insieme sotto uno stile grafico omogeneo.

In conclusione di argomento, vale la pena di rimarcare un aspetto importante per l'accessibilità: se da un lato è fondamentale, per una buona comprensione dei documenti, valorizzare il più possibile le suddivisioni strutturali dei contenuti, dall'altro occorre ricordare che alcune tecnologie assistive come i lettori di schermo sono in grado di produrre una quantità ridondante di informazioni, per spiegare all'utente come sono strutturati i contenuti via via incontrati nella pagina.

Facciamo un esempio concreto. Consideriamo un forum di discussione in cui l'elenco dei messaggi è reso come una serie di elenchi puntati annidati, in cui titolo e autore di ogni risposta appaiono indentati (fanno parte cioè di un elenco più interno) rispetto a titolo e autore del messaggio precedente: si tratta di un'ottima soluzione dal punto di vista della percezione visiva dei rapporti strutturali.

• Messaggio n.1 - autore 1
  • Messaggio n.2 - autore 2
  • Messaggio n.3 - autore 3
    • Messaggio n.4 - autore 1
    • Messaggio n.5 - autore 3

Il guaio di questa soluzione è che un sintetizzatore vocale non leggerà di seguito solo l'elenco dei messaggi, ma, ogni volta che una risposta rappresenta l'inizio di un nuovo elenco (quattro volte su cinque, nell'esempio riportato), descriverà all'utente di che tipo di elenco si tratta e quanti elementi contiene. Tutto ciò può finire per appesantire insopportabilmente la lettura della pagina.

E' vero che l'utente ha in genere la possibilità di disabilitare la verbosità del programma, riducendo tramite apposite opzioni di configurazione la quantità di metainformazioni che gli verrà letta, ma è comunque una buona pratica di sviluppo prevedere in anticipo degli strumenti per evitare, all'utente che naviga tramite lettore di schermo, di incorrere in lunghe litanie di dati strutturali. Nel caso degli elenchi annidati, si può creare ad esempio un meccanismo per nascondere, a scelta dell'utente, le risposte annidate o, in alternativa, per linearizzare tutte le risposte in un elenco semplice . Soluzioni di questo genere sono al confine tra accessibilità e usabilità.