Giorno 19: Usate vere intestazioni di tabella

Se sul vostro sito avete un calendario, dovrebbe essere inserito in una tabella HTML. Anche se ci sono stati alcuni tentativi di creare calendari con l’uso dei soli fogli di stile CSS, a tutti gli effetti i calendari sono tabelle di dati e vanno trattati come tali.

La cosa più importante in un tabella di dati è l’inserimento di intestazioni corrette. Nel caso di un calendario ciò significa indicare i giorni della settimana in alto. E’ proprio necessario: se non volete renderli visibili, è possibile renderli invisibili con i fogli di stile CSS. (Lo faccio anch’io nel mio weblog.) Ma le intestazioni devono essere lì, comunque, perchè i lettori di schermo ne hanno bisogno per aiutare i non vedenti a navigare nella tabella di dati senza perdersi.

Il calendario (e per ogni tabella di dati, ma parleremo principalmente di calendari oggi)  è molto semplice da usare se potete vederlo tutto insieme, ma molto difficile se visto giorno per giorno. Immaginate di avere un calendario sulla scrivania, di quelli giornalieri, ma su ogni pagina c’è solo il giorno del mese e non il giorno della settimana. Pagina dopo pagina: 1, 2, 3, 4, 5, 6, 7… Oggi è il 4, e magari ricordo che è giovedì. Ora saltate a 11, 12, 13. Velocemente: che giorno della settimana è il 13? La pagina non ve lo dice; dovete arrangiarvi tenendo voi il conto dei giorni.

Questo è quello che succede ad un utente non vedente  nel consultare un calendario senza intestazioni. Una serie di numeri senza alcuno contesto che lo aiuti a tenere traccia del loro significato. L’aggiunta delle corrette intestazioni consente ai lettori di schermo di associare l’intestazione della tabella (il giorno dlela settimana) con i dati in tabella (giorno del mese), leggendoli insieme. “giovedì 4, giovedì 11, venerdì 12, sabato 13.” Oh, è sabato!

Notate che ho fatto riferimento ad intestazioni corrette . Mettere il giorno della settimana nel tag <td> della prima riga non  è sufficiente. E’ invece necessario che siano nel tag <th>. Molti modelli per i  weblog sbagliano, ma è semplice correggerli e il vostro calendario, una volta fatto,  sarà visualizzato allo stesso modo nei browser visuali.

A chi serve?

  • A Jackie. Quando incontra il calendario , JAWS prima  legge la didascalia , poi l’intestazione, quindi Jackie può premere Control + ALT e muoversi nella tabella con i tasti freccia. Nel muoversi così, JAWS pronuncia l’intestazione (il giorno della settimana) e il dato presente nella cella (il giorno del mese).

Tutti i principali lettori di schermo consentono questa navigazione. Home Page Reader permette di passare alla modalità “Table Navigation” (ALT+T), e quindi muoversi attraverso il calendario senza premere ulteriori tasti.  Home Page Reader fa davvero un passo avanti rispetto a JAWS. Come vedremo fra poco, potete definire un titolo più corto (o più lungo) per ogni intestazione di tabella (al pari di  aggiungere un titolo al link), e Home Page Reader lo leggerà al posto del testo dell’intestazione di tabella originale. Ciò significa che potete rendere visivamente i giorni come “Dom”, “Lun”, “Mar”, ma Home Page Reader potrà leggerli come  “Domenica”, “Lunedì”, “Martedì”.  Furbo!

Come fare

Se non l’avete ancora fatto, assicuratevi che il calendario abbia una vera didascalia. Il tag   <caption> deve essere subito dopo <table>, e subito prima di  <th>.

Con Movable Type, trovate il calendario nel modello Main Index (cercando “calendarhead” lo troverete). Subito dopo il <caption>, vedrete i giorni della settimana definiti così:

<tr>
<td align="center"><span class="calendar">Sun</span></td>
<td align="center"><span class="calendar">Mon</span></td>
<td align="center"><span class="calendar">Tue</span></td>
<td align="center"><span class="calendar">Wed</span></td>
<td align="center"><span class="calendar">Thu</span></td>
<td align="center"><span class="calendar">Fri</span></td>
<td align="center"><span class="calendar">Sat</span></td>
</tr>

Cambiatelo con questo:

<tr>
<th abbr=”Sunday”align="center"><span class="calendar">Sun</span></th>
<th abbr=”Monday”align="center"><span class="calendar">Mon</span></th>
<th abbr=”Tuesday”align="center"><span class="calendar">Tue</span></th>
<th abbr=”Wednesday”align="center"><span class="calendar">Wed</span></th>
<th abbr=”Thursday”align="center"><span class="calendar">Thu</span></th>
<th abbr=”Friday”align="center"><span class="calendar">Fri</span></th>
<th abbr=”Saturday”align="center"><span class="calendar">Sat</span></th>
</tr>

Due cose da notare: tutti i <td> cambiano in <th>, ed ognuno con l’attributo “abbr” per specificare il giorno della settimana per intero (l’attributo ”abbr” ha un duplice scopo: per tabelle con intestazioni lunghe, come abbreviazione, da cui il nome; ma per tabelle con intestazioni corte, serve per fornire una versione più lunga, come in questo caso).

In Radio, la procedura è simile a quella svolta ieri, dando alla tabella una vera didascalia con caption.

  1. In Radio, aprite il programma  Radio. In Windows, doppio click sull’icona Radio nella barra di sistema e selezionate “Open Radio”.
  2. Nel menu “Tools”, selezionate “Developers”, e poi  ”Jump…” (Control+J). Arrivate a “system.verbs.builtins.radio.weblog.drawCalendar” (senza virgolette).
  • Ora nel menu “Edit” con “Find and Replace”, “Find…” (Control+F ) cercate “addDayName”. Arrivate così alla funzione addDayName. Doppio click sul triangolino per rivelare l’effettivo codice della funzione, dovreste vedere questo:

on addDayName (name)
  add ("<td width=\"19\" height=\"10\" align=\"center\" style=\"font-size:9px\">" + name + "</td>")

  • Cambiatelo così:

on addDayName (name, fullname)
  add ("<th abbr=\”” + fullname + “\”width=\"19\" height=\"10\" align=\"center\" style=\"font-size:9px\">" + name + "</th>")

  • Ora, doppio click subito sotto la  linea  ”for i = 1 to 7” per vedere questo:

for i = 1 to 7
  addDayName (radio.string.getLocalizedString ("dayOfWeekShort."
+ i))

  • Da cambiare così:

for i = 1 to 7
  addDayName (radio.string.getLocalizedString ("dayOfWeekShort."
+ i), radio.string.getLocalizedString (“dayOfWeek.” + i))

Nota importante per la disposizione di pagina tramite tabelle

Le tabelle utilizzate per disporre visualmente le pagine (layout table) hanno regole completamente differenti. Non usate i tag <th> in questo caso. A parte mettere a punto la tabella per presentare prima il contenuto principale, c’è poco da fare per rendere accessibili le tabelle utilizzate come contenitori di pagine. Ne discuteremo domani.

Approfondimenti

Se trattate tabelle di dati più complesse di un calendario (come tabelle con più livelli di intestazioni e sottointestazioni), sono ‘fatti vostri’. Ecco qualche punto di partenza: