Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 42 di 72
  • livello avanzato
Indice lezioni

Gli attributi "headers" e "id"

Stabilire relazioni tra le celle usando gli attributi headers e id
Stabilire relazioni tra le celle usando gli attributi headers e id
Link copiato negli appunti

Vediamo adesso un altro sistema per rendere accessibile la tabella esaminata in precedenza. Renderemo esplicite le relazioni tra celle d'intestazione e celle di dati usando gli attributi "headers" e "id" in luogo dell'attributo "scope". Ecco di seguito il codice della tabella opportunamente modificato:

<table border="1" cellpadding="5" cellspacing="2" summary="Corsi di storia offerti nella comunità di Bath, organizzati per nome del corso, insegnante, sommario, codice e tassa d'iscrizione">

  <caption>

  Corsi comunitari—Bath, Autunno 1997

  </caption>

  <tr>

    <th

id="c1" abbr="Corso">Nome del corso</th>

    <th

id="c2" abbr="Prof">Insegnante</th>

    <th

id="c3" abbr="Desc">Descrizione</th>

    <th

id="c4">Codice</th>

    <th

id="c5">Tassa</th>

  </tr>

  <tr>

    <td id="c6" headers="c1">Dopo la Guerra Civile</td>

    <td headers="c6 c2">Dr. John Wroughton</td>

    <td headers="c6 c3">Il corso esaminerà i turbolenti anni in Inghilterra dopo il 1646. <em>6 incontri settimanali, a partire da Lunedì 13 Ottobre.</em></td>

    <td headers="c6 c4">H27</td>

    <td headers="c6 c5">£32</td>

  </tr>

  <tr>

    <td id="c7" headers="c1">Introduzione all'Inghilterra degli Anglo-Sassoni</td>

    <td headers="c7 c2">Mark Cottle</td>

    <td headers="c7 c3">Corso di un solo giorno, introduttivo alla ricostruzione della società anglo-sassone nel Primo Medioevo. <em>Sabato

18 Ottobre.</em></td>

    <td headers="c7 c4">H28</td>

    <td headers="c7 c5">£18</td>

  </tr>

  <tr>

    <td id="c8" headers="c1">Lo splendore della Grecia Antica</td>

    <td headers="c8 c2">Valerie Lorenz</td>

    <td headers="c8 c3">Luogo di nascita della democrazia, della filosofia, patria d'elezione del teatro e della disputa logica. Ciò che i Romani hanno fatto, i Greci lo avevano realizzato per primi. <em>Sabato 25 Ottobre 1997 (giorno scolastico)</em></td>

    <td headers="c8 c4">H30</td>

    <td headers="c8 c5">£18</td>

  </tr>

</table>

Primo cambiamento: la cella d'intestazione principale, cioè il TH contenente la scritta "Corsi comunitari—Bath, Autunno 1997", è diventata in questo secondo esempio un elemento CAPTION. Quest'elemento può comparire in una tabella solo dopo l'elemento table e deve essere unico. Il suo scopo è analogo a quello dell'attributo "summary" - descrivere la tabella – ma, poiché è destinato ai programmi utente visuali, la descrizione può limitarsi al contenuto della tabella, dal momento che la struttura è normalmente afferrabile con lo sguardo.

Secondo cambiamento: scomparsi gli attributi "scope", è presente ora una serie di "id" e di "headers". Cerchiamo di capire il loro funzionamento. tramite l'attributo "id" si identifica una cella che contiene informazioni di intestazione: dunque tutte le celle marcate con TH, ma anche le celle marcate con td nella prima colonna, le quali contengono il nome del corso a cui fanno riferimento le successive celle di dati sulla medesima riga.

L'attributo "headers" serve per risalire alle celle d'intestazione da porre in relazione con la cella corrente. Consideriamo a titolo esemplificativo la cella di dati contenente la scritta "Mark Cottle". Osserviamo che l'attribuito "headers" di questa cella elenca i valori "c7" e "c2". Con un criterio simile a quello usato nei giochi della battaglia navale e degli scacchi, questi valori ci dicono che dobbiamo ritrovare le celle marcate rispettivamente da id="c7" e id="c2", per conoscere quali celle, all'interno della tabella, forniscono informazioni d'intestazione sulla cella che contiene il nome "Mark Cottle".

La cella con id="c7" ha come contenuto "Introduzione all'Inghilterra degli Anglo-Sassoni", la cella con id="c2", invece, contiene "Insegnante" (abbreviato in "Prof"). Un programma utente in grado di utilizzare questi ausili per l'accessibilità premetterà dunque alla lettura del nome "Mark Cottle" le due informazioni di intestazione di riferimento: il nome del corso e la qualifica ("prof"). L'obiettivo - fornendo tali correlazioni - è di aiutare chi non può vedere la tabella a capire che Mark Cottle sarà l'insegnante del corso introduttivo all'Inghilterra degli Anglo-Sassoni!

Dal punto di vista dell'accessibilità, il sistema di marcatura basato su "scope" è equivalente a quello basato sull'uso combinato di "headers" e "id". Il primo sistema è sicuramente più semplice da implementare, in quanto richiede di marcare solo le celle che contengono informazioni d'intestazione. La scelta su quale dei due sistemi adoperare è lasciata allo sviluppatore. Come indicazione di massima valgano le seguenti considerazioni: il sistema basato su "scope" è più adatto per tabelle semplici, in cui le informazioni di intestazione sono posizionate a inizio riga e/o inizio colonna. Il sistema basato su "headers – id" è invece più adatto a tabelle di struttura complessa e irregolare, nelle quali le relazioni di appartenenza tra dati e intestazioni non sono riconducibili semplicemente a righe, colonne, gruppi di righe o gruppi di colonne.


Ti consigliamo anche