Fw

Wordpress Creative Developer

I Siti e l’Accessibilità – Le Tabelle

  • Accessibilità
  • -

Riprende la serie di articoli dedicati all’accessibilità, dove si vogliono dare delle linee guida per realizzare dei siti fruibili da qualsiasi tipo di utente senza creare degli ostacoli.

Ecco gli altri articoli scritti fin’ora:

Oggi andiamo a vedere quali sono gli accorgimenti da adottare con le tabelle dati in modo da renderle accessibili gli utenti non vedenti.

Rendere le tabelle accessibili

In particolare vedremo come realizzare questa tabella in modo accessibile:

Utenti FirefoxUtenti SafariUtenti ChromeUtenti Explorer
10-20 anni33011244056
20-30 anni7618723044
30-40 anni12935150100

Per gli utenti non vedenti il problema più grande è quello di capire il dato a che colonna e riga corrisponde. L’utente vedente capisce subito che il valore 76 si trova in corrispondenza della colonna “Utenti Firefox” e della riga “20-30 anni”.

Questa possibilità la può avere anche un utente non vedente e qui di seguito trovi il codice per rendere la tabella accessibile:

Codice tabella accessibile

Ecco quali sono stati gli accorgimenti adottati.

Attributo Summary

L’attributo SUMMARY del tag TABLE contiene del testo che non viene visualizzato dai browser grafici, ma viene letto dai lettori di schermo e serve alle persone non vedenti per capire se vale la pena esaminare la tabella a fondo oppure se la si può saltare.

Tag TH e TD

I due tag TH (table header) e TD (table data), rappresentano rispettivamente per le celle intestazione e per le celle interne. Questi vanno usati all’interno del tag che rappresenta una riga della tabella (TR, table row).

In questo modo nell’HTML è rappresentata la differenza tra le diverse tipologie di celle, ed ora è responsabilità del browser (e strumenti associati) differenziarle a seconda del canale utilizzato (grafico, testuale, audio, Braille).

Attributo Scope

Usando l’attributo SCOPE (ambito) nelle celle TH si può dire che la cella TH è intestazione per la sua colonna (SCOPE=”col”) o per la sua riga (SCOPE=”row”).

In questo modo il browser vocale quando esamina una cella TD, seguendo la struttura a griglia della tabella riesce facilmente a ricavare le celle TH della riga e della colonna in cui si trova la cella TD.

Li conoscevi questi accorgimenti? Hai visto a volte quanto poco basta per rendere un sito accessibile a tutti?

5 Commenti

  1. Ottimo articolo, ma quando si parla di tabelle credo che nell’introduzione sia sempre meglio ricordare che non si usano per il layout… sia mai a qualcuno vengano idee malsane! 😉

  2. Quando un articolo tratta di accessibilità è sempre molto utile.

    Più si diffonde questo modo di sviluppare siti web meglio è
    Ottimo articolo

  3. @Anna
    Ciao Anna e benvenuta nel blog 😉
    Infatti nel testo ho specificato “tabella dati” apposta!
    Conoscevi gli attributi di cui si è parlato? li utilizzi?

    @yesWEBcan
    Ciao Salvatore! proprio quello è il mio intento: far capire che a volte basta davvero poco per non discriminare nessuno nella navigazione di un sito

  4. Ottimo mi piace, e lo condivido 😀

  5. Grazie Rocco! 😉

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *