Linee Guida

Elenchi e tabelle strutturati in modo accessibile

Elenchi e tabelle correttamente strutturati consentono anche agli utenti che utilizzano tecnologie assistive di comprendere le informazioni. Allo stesso tempo, migliorano la chiarezza, la leggibilità e l’orientamento nei contenuti per tutti gli utenti.
Vrsta: Accessibilità digitale
Zahtevnost: Base
Autore: Andreja Bevc
Pubblicato:
Aggiornato:
Deli na:

Smernica pokriva oviranosti:

Gli elenchi e le tabelle sono tra gli elementi più utilizzati nelle pagine web e nei documenti. Se non sono realizzati con una struttura corretta, le tecnologie assistive non possono interpretarli adeguatamente e gli utenti hanno maggiori difficoltà a comprendere le relazioni tra le diverse informazioni.

Per quali utenti è particolarmente importante?

Gli elenchi e le tabelle correttamente strutturati sono particolarmente importanti per:

  • utenti ciechi e ipovedenti che utilizzano lettori di schermo,
  • persone con disabilità cognitive,
  • utenti che utilizzano strumenti di ingrandimento dello schermo,
  • tutti gli utenti che desiderano consultare e comprendere rapidamente le informazioni.

Un contenuto ben strutturato consente di trovare più rapidamente le informazioni, orientarsi più facilmente e comprendere meglio i dati.

Elenchi accessibili

Quando elenchiamo più elementi, utilizziamo un elenco. Questo vale sia per le pagine web sia per i documenti Word, PDF e altri contenuti digitali.

Nelle pagine web gli elenchi devono essere contrassegnati con gli elementi HTML semantici <ul> o <ol>, mentre nei documenti utilizziamo la funzione Elenco. L’aggiunta manuale di punti elenco mediante trattini, asterischi o altri caratteri non è sufficiente, poiché le tecnologie assistive non li riconoscono come un vero elenco.

Quando un elenco è realizzato correttamente, il lettore di schermo comunica innanzitutto all’utente che si tratta di un elenco e successivamente anche il numero di elementi che contiene. In questo modo l’utente comprende più facilmente la struttura del contenuto e può orientarsi al suo interno in modo più efficace.

Come verificare se un elenco è realizzato correttamente?

In una pagina web

  • esaminiamo il codice sorgente e verifichiamo che siano utilizzati gli elementi <ul>, <ol> e <li>;
  • selezioniamo il testo e, se insieme al testo viene selezionato anche il punto elenco o il numero, generalmente si tratta soltanto di testo normale e non di un vero elenco.

Maggiori informazioni sul contrasto adeguato e sull’uso del colore

Esempio di un elenco strutturato in modo non corretto (a sinistra), in cui durante la selezione vengono selezionati anche i punti elenco, e di un elenco strutturato correttamente (a destra), in cui viene selezionato soltanto il testo.

In Microsoft Word

  • facciamo clic su un singolo elemento dell’elenco e verifichiamo se la funzione Elenco è attiva;
  • nelle versioni più recenti di Word, l’elenco viene generalmente creato automaticamente quando l’utente inserisce un punto elenco e preme la barra spaziatrice.
Suggerimento: Se l’elenco è stato creato utilizzando la funzione per gli elenchi, la tecnologia assistiva comunicherà all’utente che si tratta di un elenco e quanti elementi contiene.

Tabelle accessibili

Utilizziamo le tabelle per presentare dati che hanno una relazione chiara tra righe e colonne. Non devono essere utilizzate per disporre i contenuti all’interno della pagina.

Oltre a garantire un contrasto adeguato e una buona leggibilità, le tabelle devono avere le intestazioni delle righe e delle colonne correttamente definite. Ciò consente alle tecnologie assistive di comprendere la struttura della tabella e, durante la lettura di una singola cella, di comunicare all’utente anche a quale riga o colonna si riferisce il dato.

Se le intestazioni non sono definite, il lettore di schermo spesso legge soltanto il contenuto della singola cella e l’utente può avere difficoltà a comprenderne il significato senza poter visualizzare l’intera tabella.

 

Tabella con un orario scolastico, in cui le intestazioni sono correttamente definite nella prima riga e nella prima colonna per facilitare la comprensione dei dati.

Come verificare se una tabella è realizzata correttamente?

Per una tabella verifichiamo:

  • che il testo abbia un contrasto sufficiente e sia leggibile;
  • che la tabella non sia inutilmente complessa;
  • che le intestazioni delle righe e/o delle colonne siano chiaramente definite.

In una pagina web

  • verifichiamo che le intestazioni siano contrassegnate con l’elemento <th> e non come normali celle <td>.

In Microsoft Word

  • selezioniamo la tabella e apriamo Progettazione tabella;
  • verifichiamo che siano attivate le opzioni Riga di intestazione e, se necessario, Prima colonna.
Visualizzazione di un documento Microsoft Word in cui la prima riga e la prima colonna sono contrassegnate come intestazioni della tabella.
Suggerimento: Se una tabella presenta intestazioni correttamente definite, durante lo spostamento tra le celle il lettore di schermo leggerà, oltre al valore, anche l’intestazione della colonna o della riga. In questo modo, anche nelle tabelle più grandi, l’utente può sempre comprendere il significato di ciascun valore.

Collegamento con le linee guida per l’accessibilità (WCAG)

L’ambito relativo agli elenchi e alle tabelle riguarda principalmente i seguenti criteri di successo WCAG:

  • 1.3.1 Informazioni e relazioni (Info and Relationships)
  • 1.4.3 Contrasto (minimo)
  • 1.4.11 Contrasto non testuale

Gli elenchi e le tabelle correttamente strutturati consentono di comprendere le informazioni con la stessa efficacia sia agli utenti vedenti sia agli utenti che utilizzano tecnologie assistive. Utilizzando elenchi semanticamente corretti e intestazioni delle tabelle adeguatamente definite, miglioriamo l’accessibilità, la chiarezza e la qualità dei contenuti digitali per tutti gli utenti.