4 – Inserire tabelle accessibili
Problema
Come inserire tabelle dati all’interno della pagina tenendo conto dei requisiti di accessibilità senza operare sul codice? (“Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti dalla DTD adottata per descrivere i contenuti e identificare le intestazioni di righe e colonne” da Requisito 9, Decreto Ministeriale 8 luglio 2005 – Allegato A)
Soluzione
E’ necessario utilizzare il plugin Tiny MCE Advanced che è in grado di gestire diversi elementi per l’accessibilità: l’attributo “summary” che descrive la tabella; il tag “caption” che identifica il titolo; i tag <th> che identificano le celle di intestazione
A) Installare e configurare il plugin Tiny MCE Advanced
- Scaricare il plugin da http://wordpress.org/extend/plugins/tinymce-advanced/, installarlo e attivarlo
- Personalizzare il plugin da Impostazioni – Tiny MCVE Adanced, trascinando in alto il gruppo di icone “Table”
B) Inserire la tabella nell’articolo
- Scegliere Nuovo articolo, editare quanto serve e spostare il cursore in corrispondenza del punto dove inserire la tabella
- Fare clic sull’icona “Inserisci nuova tabella”
- Nella scheda Generale, spuntare la casella a fianco di Table caption
- Nella scheda Avanzate, descrivere la tabella a fianco di Sommario
- Fare clic sul pulsante “Inserisci”
Ora il lavoro passa all’editor di testo
E’ necessario editare il titolo (caption) nella prima riga, le intestazioni e i dati:
L’ultimo passaggio consiste nell’associare a Cognome, Nome e Ruolo il tag th. Purtroppo, al momento di andare in stampa, non è ancora ben funzionante in metodo automatico che utilizza le iconcine Tabella di Tiny MCE Advanced. Lo aggiungiamo nel codice:
Dobbiamo modificare
<td scope"col">Cognome</td>
<td>Nome</td>
<td>Ruolo</td>
in
<th scope"col">Cognome</th>
<th scope"col">Nome</td>
<th scope"col">Ruolo</td>
Il risultato, ottenuto anche grazie alla personalizzazione grafica data dal foglio di stile è riportato in figura.
La mancata visualizzazione del titolo è dovuta alla scelta di non mostrarlo in modalità grafica. E’ stato pertanto nascosto agendo sul foglio di stile:
caption {display:none;}