Porte Aperte sul Web

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;}