Giorno 19 – Usate vere intestazioni di tabella

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:

Potrebbero interessarti anche i seguenti articoli

  • Giorno 9 – Fornite ulteriori ausili alla navigazioneGiorno 9 – Fornite ulteriori ausili alla navigazione Giorno 9: Fornite ulteriori ausili alla navigazione Avete familiarità con il tag <link> in relazione all'utilizzo con i fogli di stile esterni. Ma […]
  • TraduzioniTraduzioni Traduzioni Come specificato nei termini di utilizzo, le traduzioni di questo libro sono consentite se pubblicate sotto la stessa licenza 'libera' dell'originale. […]
  • IntroduzioneIntroduzione Introduzione Questo libro è intitolato "Affrontare l'accessibilità: per un sito più accessibile in 30 giorni" [NdT titolo originale "Dive Into […]
  • Giorno 26 – Usate dimensioni relative per i fontGiorno 26 – Usate dimensioni relative per i font Giorno 26: Usate dimensioni relative per i font I siti web, con poche eccezioni, sono centrati intorno alle parole. Notizie, opinioni, pensieri, idee, storie, testi […]
  • Giorno 28 – Etichettate gli elementi dei moduliGiorno 28 – Etichettate gli elementi dei moduli Giorno 28: Etichettate gli elementi dei moduli Vi siete mai chiesti perchè i moduli (form) sul web siano così difficili da usare? Ad […]
Condividi:

Informazioni sull'autore

Franco Carcillo
Franco Carcillo
Sono nato (1956) e vivo a Torino.  Da oltre 26 anni lavoro ('da sempre') presso il Comune di Torino, presso il Sistema Informativo. Mi occupo di web.  Sono infatti Direttore Responsabile dei siti internet della Città, sin dalla loro nascita, nel 1994. Prima del 1994 mi sono occupato di informatica gestionale classica, anche se in ambiente distribuito (mini e pc, sin dal loro apparire nella Civica Amministrazione).  Negli anni 80 mi sono appassionato, nel tempo libero, di telematica.  Mio è stato il primo nodo della rete Fidonet in Torino città (Fido_Torino e  TO_news) nel 1987.  Sono stato anche coordinatore nazionale della rete amatoriale, anche se solo per 6 mesi. Poi ho abbandonato:  troppe le pressioni intorno a quello che doveva essere, alla fine, un semplice hobby. Quando non ci si diverte più, meglio spegnere. Ma la passione telematica è rimasta.  Ed ecco che ho tenuto ogni settimana (sino alla chiusura del giornale!) la prima rubrica di telematica pubblicata  su un quotidiano italiano "StampaSera"; a quei tempi di internet se ne parlava vagheggiandola nei meandri universitari e militari americani. Ho pubblicato il primo speciale pubblicato in Italia riguardante i bbs su BIT della Jackson;  ho collaborato, con altre riviste, tra cui PCWORLD dove ho avuto per lungo tempo una rubrica fissa. Di interner e dei siti, che dire? C'è ancora tanta strada da percorrere: l'accessibilità ne è un'esempio. Ma anche rendere i siti davvero fruibili così come far 'trovare' la montagna di informazioni memorizzate tra le pagine, sono sfide  non da poco. Vi pare? All'Università di Torino, quest'anno, molti studenti hanno partecipato, interessatissimi, ad un mio breve seminario su 'Progettare siti web per la Pubblica Amministrazione, la sfida dell'accessibiltià e usabilità'.  E' stupefacente notare come le persone che usano tutti i giorni la rete e a cui spieghi come e perchè i siti non sono nè usabili nè accessibili si rendano immediatamente conto e capiscano: quasi un velo, un sipario sia stato loro svelato. Ecco perchè ho deciso di tradurre 'Dive into accessibility':  perchè affrontare l'accessibilità non è così difficile. Certo nei siti mastodontici le operazioni possono essere lunghe, ma non vi sono più scuse per partire con nuovi progetti 'alla cieca'.

Commenti

Nessun commento

    Rispondi

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Link e informazioni