Accessibilità delle tabelle nei PDF

Una recente domanda sulla lista Webaccessibile mi offre lo spunto per una piccola spiegazione su un oggetto piuttosto sconosciuto anche se molto usato, le tabelle. Sconosciuto nel senso che le tabelle vengono utilizzate con gli scopi più vari, anche molto diversi dal loro originale scopo, intabellare dati, e non si pensa mai alla loro accessibilità.

La domanda era questa:

Sono alle prese con un'ottimizzazione di tabelle create in Word,
ma trasformando in PDF le tabelle sono incomprensibili.
La particolarità delle tabelle è che sono tabelle/matrici
diciamo "visive" nel senso che le celle sono colorate in modo
diverso ad esempio:

Legenda
-----------------                             ----------------
|   rosso     |    Presente           | verde       |        Assente
-----------------                             ----------------

------------------------------------------------------------------
|    Prodotto   |   nitriti  |   sodio    |  caffeina  |  potassio |
------------------------------------------------------------------
|    Caffè      |   verde    |   verde    |  rosso     |   verde   |
--------------------------------------------------------------------
|    Sale       |   verde    |   rosso    |  verde     |   rosso   |
--------------------------------------------------------------------
|    Zucchero   |   rosso    |   verde    |  verde     |   verde   |
------------------------------------------------------------------

Eseguendo la lettura integrata da Acrobat, la tabella viene letta
riga per riga senza leggere ovviamente il colore della cella,
una cosa tipo:
Prodotto, nitriti, sodio, caffeina, potassio, caffè, sale, zucchero.

Come si può rappresentare al meglio questo tipo di
tabella/matrice in modo che la lettura sia simile a:
Prodotto: caffè, nitriti assente (o verde), sodio assente,
caffeina presente, potassio assente Prodotto: sale,
nitriti assente ecc.?

Riguardo l’accessibilità, c’è un evidente errore di progettazione poiché lo stato Sì/No viene indicato esclusivamente con i colori (rosso: presente, verde: assente). E come farà chi i colori non li vede o li vede alterati? E cosa potrà mai leggere uno screen reader? Il colore di una cella?

Inoltre, un altro errore è pensare di utilizzare per i test di una tabella la funzione Leggi a voce alta di Acrobat. La funzione non sostituisce le complesse opzioni di uno screen reader, e non è possibile leggere la tabella ricorrendo ai tasti  di navigazione come si fa, per esempio con Jaws.

In ogni caso, sarà necessario introdurre nella tabella le necessarie informazioni testuali, ora mancanti, preservando i colori di sfondo. Ammettendo che no significhi assente (verde) e sì presente (rosso), la tabella avrebbe una struttura simile a questa:

--------------------------------------------------------------------------
|    Prodotto     |   nitriti  |   sodio    |  caffeina  |  potassio     |
--------------------------------------------------------------------------
|    Caffè        |      no    |      no    |     sì     |      no       |
--------------------------------------------------------------------------
|    Sale         |      no    |      sì    |     no     |      sì       |
--------------------------------------------------------------------------
|    Zucchero     |      sì    |      no    |     no     |      no       |
--------------------------------------------------------------------------

Ovvero:
tabella di esempio

Senza pretesa di stile. Meglio partire col piede giusto, quindi in Word selezionare la tabella e impostare la larghezza delle colonne in % invece che in pixel: selezionare la tabella, Tabella > Proprietà tabella > scheda Colonna e impostare le dimensioni in percentuale (clic sull’elenco a discesa Unità di misura) in modo che la tabella se sottoposta a ingrandimento in Acrobat con la funzione Ridisponi attiva si ingrandisca senza produrre la comparsa della barra di scorrimento orizzontale.

Word non permette di definire colonne come intestazioni di righe, ma di determinare quali siano le intestazioni delle colonne sì: selezionare la prima riga e nella scheda Riga della finestra di dialogo Proprietà tabella clic sulla casella di controllo Ripeti come riga di intestazione in ogni pagina. Quando verrà creato il PDF, quella riga della tabella possiederà una sezione THead che contiene gli elementi TH.

La tabella è pronta, clic su Adobe PDF > Converti in Adobe PDF per creare il file.

Il risultato sarà questo:

Il pannello Tag mostra la struttura della tabella

Però, anche se la sezione THead è presente, Leggi a voce alta leggerà la tabella partendo dalla cella in alto a sinistra e procedendo verso destra passerà alle righe successive fino ad arrivare alla cella in basso a destra.

Ben diverso risultato si ottiene con Jaws. Basta usare i tasti Ctrl+Alt+Frecce per sentirsi leggere intestazioni e contenuto delle celle, compresa la posizione del cursore o Ctrl+Alt+Numpad5 per le informazioni relative alla cella corrente (riferirsi alla guida di Jaws per tutti i tasti disponibili).

Possiamo migliorare l’accessibilità della tabella? Certo, magari aggiungendo Titolo e Testo alternativo al tag Table in Acrobat. Clic destro sul tag Table, selezionare Proprietà nel menu contestuale e aggiungere le informazioni relative a Titolo e Testo alternativo.

Aggiunta di title e testo alternativo alla tabella

Finito? No, volendo si può rifinire la tabella definendo le intestazioni di riga della colonna 1.

Aprire il pannello Ritocco ordine di lettura (Pannello Ordine > Opzioni > Mostra pannello ordine di lettura). Clic destro sulla tabella, selezionare Inspector tabella.

Clic sulla cella Caffè, per esempio, e definire Funzione (Cella di intestazione) e Portata (nel nostro caso, Riga). Ora per la colonna 1 la lettura sarà: Prodotto-Caffè, e così via.

definire funzione e portata di una cella
Le modifiche effettuate saranno visibili nel pannello Tag.

Annunci

14 pensieri su “Accessibilità delle tabelle nei PDF

  1. Esatto, confermo la procedura.
    Anche nella versione dalla 8 in giù (la 7 praticamente) la procedura è la stessa, attribuendo in sostanza il testo alternativo alle celle (avendo cura di incrociare le colonne e righe). Cosa che nella versione 8 penso possa essere fatta in automatico tramite Inspector tabella.

  2. No, non c’è automatismo, in questi casi l’Inspector va usato a manina. Nelle altre versioni era possibile intervenire nel pannello Tag, ma con una certa abilità e conoscenza delle specifiche PDF. Cosa intendi con “attribuzione del testo alternativo alle celle incrociando colonne e righe”?
    Il barbatrucco dell’alt non funziona con le tabelle.

  3. Pingback: Tabelle accessibili nei file PDF - Vivi Arese

  4. Ciao Gioacchino. Ho letto il tuo post, ma così non si ottiene una tabella accessibile… aggiungere title e alt a ogni cella presuppone un enorme lavoro manuale, e in ogni caso la tabella resta inaccessibile a chi soffre di cecità ai colori. Che lo screen reader legga i testi alternativi ci mancherebbe, è il suo lavoro. Ma francamente non direi che quella tabella sia accessibile. Inoltre, se hai messo a mano tutti gli alt, a che serve modificare i tag?

  5. In che senso non è accessibile?
    Lo so che è un enorme lavoro, lo scopo era solo dimostrativo.
    Nell’esempio i colori non sono stati studiati per chi soffre di cecità ai colori, voleva solo essere un esempio e non una best practice.
    Volendo si potrebbe rifare con i colori calcolati con gli algortimi, ma non era questo lo scopo.

  6. Bè, anche utilizzando l’algoritmo non si risolverebbe il problema. L’algoritmo funziona sul contrasto fra testo e colore di sfondo. Nel tuo esempio il testo è assente, quindi è impossibile calcolare rapporti di qualsiasi tipo.
    Inoltre, Requisito n. 4
    Enunciato: Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina.

    E come si legge quella tabella se il colore viene tolto? La legge soltanto un screen reader, accessibilità al contrario 🙂

  7. Boh allora non ho capito cosa intendi per cecità ai colori: se non vedo i colori non vedo niente, ergo sono un non vedente, quindi uso uno screen reader o cosa?
    Quindi aggiungendo del testo all’interno delle celle si risolverebbe?
    A parte l’enorme lavoro ovviamente.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...