Best practice per la progettazione di viste accessibili

Hai creato un’ottima vista e desideri renderla più accessibile per assicurarti che tutti gli utenti possano visualizzare e comprendere i dati creati.

Tableau supporta diversi controlli per consentirti di creare viste accessibili e garantire l’allineamento ai requisiti della Sezione 508 degli Stati Uniti e alle Linee guida per l’accessibilità dei contenuti Web (WCAG 2.1 AA). Assicurati che i contenuti condivisi da Tableau Cloud o Tableau Server seguano i passaggi indicati in Authoring delle viste per l’accessibilità e siano in linea con i seguenti principi WCAG 2.1 AA:

  • Percepibile: le informazioni e le componenti dell’interfaccia utente devono essere presentati agli utenti in modo che possano essere percepiti. Prendi in considerazione di includere le alternative di testo e i modi alternativi per presentare il contenuto.

  • Utilizzabile: le componenti dell’interfaccia utente e la navigazione devono essere accessibili agli utenti dai diversi dispositivi o dai metodi che utilizzano per interagire con la vista.
  • Comprensibile: le informazioni presentate nella vista devono essere comprensibili per gli utenti. Ad esempio, utilizza nomi ed etichette chiaramente distinguibili per i diversi elementi mostrati nella vista.

Segui le procedure consigliate descritte in questo articolo e incorpora i passaggi descritti in Authoring delle viste per l’accessibilità per creare viste accessibili a tutti gli utenti quando vengono pubblicate in Tableau Server o Tableau Cloud.

Resta sul semplice

Principio WCAG 2.1 AA: comprensibile

Potresti avere molte informazioni che vuoi comunicare con la tua vista. Tuttavia, le viste dense possono essere difficili da comprendere o da navigare utilizzando uno screen reader o una tastiera. Utilizza le seguenti linee guida per comunicare tutto ciò che vuoi senza travolgere gli utenti con una vista sovraffollata.

  • Aggrega i tuoi dati quando possibile per ridurre il numero di indicatori mostrati. Inoltre, mostrare più di 1.000 indicatori nella vista può portare a un rendering della vista da parte del server anziché del browser e le viste con rendering sul lato server non sono ancora supportate per l’allineamento alle linee guida WCAG.

    Gli utenti possono accedere anche alla pagina Visualizza dati (abilitata per impostazione predefinita) per rivedere i dati sottostanti degli indicatori o per scaricare i dati da tale pagina in un’applicazione accessibile per visualizzarla.

    Esempio: questo esempio mostra due diverse viste del grafico a barre per illustrare la differenza tra una vista dettagliata e aggregata.

    Non facilmente accessibile: troppi indicatoriPiù accessibile: vista aggregata
    Grafico a colonne con 5.000 indicatoriGrafico a colonne con etichette di testo e meno indicatori
    • Questa quantità di dettagli rende la vista più difficile da capire.

    • La vista mostra oltre 5.000 indicatori e non include abbastanza testo per indicare cosa rappresentano i vari indicatori.

    • È troppo difficile da usare per gli utenti che hanno bisogno di utilità per la lettura dello schermo.

    • Questo esempio mostra la stessa vista con i dati aggregati a un livello superiore.

    • I punti dati chiave sono ancora inclusi, ma sono ora più facili da leggere e da capire.

    • Il numero di indicatori è ridotto da oltre 5.000 a circa 20.

    • Gli utenti possono ancora leggere i dettagli sottostanti degli indicatori facendo attenzione alla vista e quindi premere Invio per aprire la pagina Visualizza dati.

     

  • Prendi in considerazione l’uso di elementi grafici semplici come grafici a barre o grafici a linee che consentono di utilizzare il testo, il colore e le forme per aggiungere più contesto alla vista.

  • Limita il numero degli indicatori a quelli che enfatizzano i punti dati più importanti.

Per informazioni ed esempi su come creare questo tipo di vista, consulta Resta sul semplice in Authoring delle viste per l’accessibilità.

 

Titoli e didascalie

Principio WCAG 2.1 AA: percepibile, comprensibile

Fornendo un buon testo descrittivo nei titoli e nelle didascalie puoi offrire il contesto agli utenti che utilizzano la tecnologia assistiva e puoi aiutarli a capire i dati nella vista. Utilizza le seguenti linee guida per adattare la natura visiva di Tableau per soddisfare le esigenze di tutti gli utenti.

  • Pensa alle viste come supplemento al testo che usi per descriverle.

  • Usa il testo nei titoli e nelle didascalie per descrivere le tue visualizzazioni e quello che stai mostrando.

  • Utilizza un linguaggio semplice e facile da capire. Evita forme gergali, acronimi o abbreviazioni.

  • Non includere parole come “immagine di” o “foto di” nelle descrizioni di testo, perché gli screen reader a volte includono già queste informazioni.

  • Evita di utilizzare scritte tutte in maiuscolo (ad esempio nelle intestazioni o nei titoli) perché possono essere difficili da leggere.

    Esempio: questo esempio mostra due diversi grafici a barre. Uno utilizza troppo poco testo e l’altro utilizza titoli e didascalie per aggiungere contesto

    Non facilmente accessibile: troppo poco testoPiù accessibile: aggiunta di testo descrittivo per fornire contesto
    Grafico a colonne con testo minimoGrafico a colonne con l’aggiunta di titoli e didascalie
    • Un titolo di una sola parola non è abbastanza descrittivo.

    • Gli indicatori sono differenziati per colore e dimensione. Ma senza il testo aggiuntivo, il contesto di questi indicatori può essere difficile da capire.

    • Non è presente alcuna didascalia o altro testo esplicativo per spiegare la vista.

    • Questo esempio mostra la stessa vista, ma include del testo esplicativo aggiuntivo sia nel titolo che nella didascalia.

    • Vengono utilizzati gli stessi elementi distintivi delle dimensioni e della scala dei colori, ma le etichette vengono aggiunte agli indicatori a barre per fornire un contesto aggiuntivo.

Per informazioni ed esempi su come creare una vista che includa del testo per il contesto, consulta Mostra altro testo e rendilo utile in Authoring delle viste per l’accessibilità.

 

Testo aggiuntivo

Principio WCAG 2.1 AA: percepibile, comprensibile

L’utilizzo del testo, oltre ai titoli e alle didascalie all’interno della vista, può aiutare gli utenti a capire il contesto dei diversi elementi visualizzati, nonché a descrivere la relazione tra i diversi controlli (ad esempio, legende e filtri) e i dati.

Utilizza le seguenti linee guida quando aggiungi del testo aggiuntivo:

  • Utilizzare il testo nelle intestazioni delle legende o dei filtri per descrivere il controllo e le relative operazioni. Inoltre, puoi utilizzare le aree di testo su una dashboard per aggiungere ulteriore contesto per le tue visualizzazioni in modo da descrivere ulteriormente ciò che stai mostrando.

  • Aggiunta di testo alternativo (alt text) alle visualizzazioni. Tableau ha iniziato a generare automaticamente il testo alternativo per le visualizzazioni nella versione 23.1. In Tableau 23.2 e versioni successive, puoi modificare il testo alternativo generato automaticamente per aggiungere un contesto aggiuntivo che è importante per i destinatari.
  • Fai riferimento ai controlli per etichetta quando possibile. Ad esempio, la modifica dell’etichetta di una legenda da Sottocategoria in Chiave colore per tipo di prodotto può aiutare gli utenti a capire la relazione tra i controlli e i dati.

  • Se includi il testo del collegamento nella tua vista, utilizza il testo che descrive la destinazione del collegamento. Ad esempio, utilizza un testo del collegamento come "Statistiche sul riscaldamento globale per il 1990-2000". Evita "Fai clic qui", "Altro" o "Maggiori informazioni". Questi esempi di testo del collegamento sono troppo generici e possono confondere gli utenti.

  • Esempio: il seguente esempio mostra due grafici a bolle. Una vista utilizza solo il testo visualizzato per impostazione predefinita durante la creazione di una vista, mentre l’altra contiene testo aggiuntivo, che fornisce contesto in tutta la vista per aiutare a trasmettere il significato.

    Non facilmente accessibile: troppo poco testoPiù accessibile: testo più descrittivo
    Grafico a bolle con pochissimo testoGrafico a bolle con titolo, didascalie e più testo
    • Questa vista utilizza solo il testo predefinito per il titolo del foglio e le etichette predefinite per i filtri e la legenda.

    • Gli indicatori sono differenziati per dimensioni e per colore.

    • Nella vista non è presente alcuna didascalia o altro testo esplicativo per fornire il contesto.

    • Questo esempio mostra la stessa vista, ma include il testo esplicativo aggiuntivo.

    • Il testo aggiuntivo è stato aggiunto al titolo e alla didascalia per spiegare la relazione tra gli indicatori e fornire ulteriore contesto sulla vista mostrata.

    • Vengono aggiunte etichette dell’indicatore per mostrare i numeri di profitto in modo che gli utenti non debbano affidarsi al colore solo per capire queste informazioni.

Per informazioni ed esempi su come creare una vista che includa del testo aggiuntivo per il contesto, consulta Mostra altro testo e rendilo utile e Authoring delle viste per l’accessibilità in Authoring delle viste per l’accessibilità.

 

Colore e contrasto

Principio WCAG 2.1 AA: percepibile, comprensibile

Puoi utilizzare il colore per distinguere gli indicatori nella vista. Tuttavia, per gli utenti con problemi visivi, l’uso di un solo colore non sempre fornisce una distinzione sufficiente, specialmente quando ci sono molti indicatori in una vista. Utilizza le seguenti linee guida quando utilizzi il colore nelle viste:

  • Tableau offre una gamma di colori per persone con problemi visivi che consente di selezionare i colori appropriati per la vista. Per qualsiasi gamma di colori utilizzata, prova a fornire abbastanza contrasto e assegna i colori che differiscono l’uno dall’altro nello spettro chiaro-scuro.

  • Per gli indicatori di linea, utilizza opzioni aggiuntive come forme, dimensioni ed etichette per distinguerli.

  • Utilizza gli strumenti di analisi del contrasto(Il collegamento viene aperto in una nuova finestra) per semplificare la selezione dei colori e degli sfondi del testo con rapporti di contrasto sufficienti. Assicurati che il contrasto del colore per il testo sia forte e che soddisfi gli standard di contrasto 4,5:1 (3:1 per il testo grande).

    Esempio: questo esempio mostra due grafici a linea. Uno che utilizza il colore solo per differenziare le linee e l’altro che utilizza i colori più appropriati insieme alle forme per differenziare gli indicatori

    Non facilmente accessibile: utilizza il colore solo per differenziare gli indicatoriPiù accessibile: utilizza il colore e la forma per differenziare gli indicatori
    Grafico a linee che mostra solo il colore per differenziare gli indicatoriGrafico a linee che utilizza sia il colore che le forme per differenziare gli indicatori
    • Questa vista utilizza solo il colore per differenziare le linee l’una dall’altra.

    • Gli indicatori nella vista non utilizzano una gamma di colori completamente accessibile per gli utenti con problemi visivi.

    • In questo esempio viene visualizzata la stessa vista, ma è utilizzato sia il colore che la forma per identificare gli indicatori.

    • Una legenda dei colori e una legenda delle forme con titoli chiari identificano i colori e forme rappresentati nella vista.

Per informazioni ed esempi su come creare una vista che utilizzi il colore per distinguere gli indicatori, consulta Authoring delle viste per l’accessibilità in Authoring delle viste per l’accessibilità.

 

Pubblica la vista

Principio WCAG 2.1 AA: percepibile, utilizzabile, comprensibile

Per rendere le viste disponibili agli utenti, pubblica la vista in Tableau Server o Tableau Cloud, quindi nel menu della barra degli strumenti fai clic su Condividi. Gli utenti possono interagire con la vista e i pulsanti della barra degli strumenti utilizzando un’utilità di lettura dello schermo o una tastiera. Per maggiori informazioni, consulta Accessibilità da tastiera per le viste di Tableau.

Per informazioni su come pubblicare e incorporare le cartelle di lavoro, trovare il codice di incorporamento da copiare nelle pagine Web e disattivare la barra degli strumenti, consulta Pubblica e condividi la vista in Authoring delle viste per l’accessibilità.

Grazie per il tuo feedback.Il tuo feedback è stato inviato. Grazie!