Bästa praxis vid utformning av tillgängliga vyer

Du har skapat en fantastisk vy och vill göra den mer tillgänglig. På så sätt kan alla användare se och förstå de data som du har presenterat.

Tableau har stöd för flera kontroller vilket låter dig skapa tillgängliga vyer och anpassa dig till kraven i US Section 508 samt Web Content Accessibility Guidelines (WCAG 2.1 AA). Se till att innehåll som delas från Tableau Cloud eller Tableau Server följer stegen i Författarvyer för tillgänglighet och efterlever följande WCAG 2.1 AA-principer:

  • Uppfattningsbar - Information och användargränssnittets komponenter måste presenteras för användarna på ett sätt som de kan uppfatta. Överväg att inkludera textalternativ och alternativa sätt att presentera innehållet.

  • Användbar - Användargränssnittets komponenter och navigering måste vara tillgängliga för användare från de olika enheter eller metoder som de använder för att interagera med vyn.
  • Förståelig -Dina användare måste kunna förstå den information som presenteras i vyn. Använd till exempel tydligt särskiljbara namn och etiketter för olika element som visas i vyn.

Följ bästa praxis som beskrivs i den här artikeln och införliva de steg som beskrivs i Författarvyer för tillgänglighet, för att bygga vyer som är tillgängliga för alla användare när de publiceras på Tableau Server eller Tableau Cloud.

Håll det enkelt

WCAG 2.1 AA-princip: Förståelig

Du kanske har mycket information som du vill kommunicera i din vy. Kompakta vyer kan dock vara svåra att förstå eller navigera med en skärmläsare eller tangentbord. Använd följande riktlinjer för att kommunicera allt du vill utan att överväldiga dina användare med en överfylld vy.

  • Aggregera dina data när det är möjligt för att reducera antalet markeringar som visas. Dessutom kan visning av fler än 1000 markeringar i vyn leda till att den återges av servern istället för webbläsaren. Vyer som återges av servern stöds ännu inte för efterlevnad av WCAG.

    Användare kan också komma åt sidan Visa data (aktiverad som standard) för att granska underliggande data till markeringarna eller ladda ner data från den sidan till ett tillgängligt program för att visa den på det sättet.

    Exempel: Detta exempel visar två olika stapeldiagramvyer för att illustrera skillnaden mellan en detaljerad och aggregerad vy.

    Inte lättillgänglig – För många markeringarBättre tillgänglighet – aggregerad vy
    Kolumndiagram med 5 000 markeringarKolumndiagram med textetiketter och färre markeringar
    • Såhär mycket information gör vyn svårare att förstå.

    • Vyn visar över 5000 markeringar och innehåller inte tillräckligt med text för att ange vad de olika markeringarna representerar.

    • Den är för svår att använda för användare som behöver skärmläsare.

    • Detta exempel visar samma vy med data aggregerade på en högre nivå.

    • Viktiga datapunkter finns fortfarande med men de är nu enklare för användare att läsa och förstå.

    • Antalet markeringar minskas från över 5 000 till cirka 20.

    • Användare kan fortfarande läsa de underliggande detaljerna till markeringarna genom att placera fokus på vyn och sedan trycka på Enter för att öppna sidan Visa data.

     

  • Överväg att använda enkla grafiska element såsom stapeldiagram eller linjediagram som gör det möjligt att använda text, färg och former för att lägga till ytterligare sammanhang i vyn.

  • Begränsa antalet markeringar till de som framhäver de viktigaste datapunkterna.

Information om och exempel på hur du skapar den här sortens vyer finns i Håll det enkelt i Författarvyer för tillgänglighet.

 

Titlar och bildtexter

WCAG 2.1 AA-princip: uppfattningsbar och förståelig

Att tillhandahålla bra beskrivande text i titlar och bildtexter ger sammanhang till användare som använder hjälpmedelsteknik, och kan hjälpa dem att förstå data i din vy. Använd följande riktlinjer för att anpassa den visuella karaktären i Tableau för att uppfylla behoven hos alla dina användare.

  • Tänk på dina vyer som ett komplement till den text du använder för att beskriva den.

  • Använd text i titlar och bildtexter för att beskriva dina visualiseringar och vad du visar.

  • Använd ett enkelt och lättförståeligt språk. Undvik jargong, akronymer eller förkortningar.

  • Inkludera inte ord som ”bild av” eller ”foto av” i dina textbeskrivningar, eftersom skärmläsare ibland redan inkluderat denna information.

  • Undvik att använda bara versaler (till exempel i rubriker eller titlar), eftersom de kan vara svåra att läsa.

    Exempel: Detta exempel visar två olika stapeldiagram. Den ena använder mycket lite text och den andra använder titlar och bildtexter för att lägga till sammanhang

    Inte lättillgänglig – för lite textMer tillgänglig - Lägga till beskrivande text för att ge sammanhang
    Kolumndiagram med minimal textKolumndiagram med titlar och bildtexter tillagda
    • En titel med ett ord är inte tillräckligt beskrivande.

    • Markeringarna är differentierade efter färg och storlek. Men utan ytterligare text kan sammanhanget i dessa markeringar vara svårt att förstå.

    • Det finns ingen bildtext eller annan förklarande text som kan hjälpa till att förklara den här vyn.

    • Det här exemplet visar samma vy, men innehåller ytterligare förklarande text i både titeln och bildtexten.

    • Samma kontrastfärgsskala och storleksskiljare används, men etiketter läggs till i stapelmarkeringarna för att ge ytterligare sammanhang.

För information och exempel på hur man bygger en vy som innehåller text för sammanhang, se Visa mer text och gör den användbar i Författarvyer för tillgänglighet.

 

Ytterligare text

WCAG 2.1 AA-princip: uppfattningsbar och förståelig

Att använda text, utöver bara titlar och bildtexter, över hela vyn kan hjälpa användare att förstå sammanhanget för de olika elementen som visas. Den kan även hjälpa till att beskriva förhållandet mellan de olika kontrollerna (t.ex. förklaringar och filter) och dina data.

Använd följande riktlinjer när du lägger till ytterligare text:

  • Använd text i rubriker på förklaringar eller filter för att beskriva kontrollen och vad den gör. Du kan också använda textzoner på en instrumentpanel för att lägga till ytterligare sammanhang för dina visualiseringar för att ytterligare beskriva vad du visar.

  • Lägg till alternativ text till visualiseringar. Tableau började automatiskt generera alternativ text för visualiseringar i Tableau 23.1. I Tableau 23.2 och senare kan den automatiskt genererade alternativa texten redigeras för att lägga till ytterligare sammanhang som du vet är viktigt för målgruppen.
  • Se kontrollerna på etiketten när så är möjligt. Att t.ex. ändra etiketten för en förklaring från underkategori till färgnyckel för produkttyp kan hjälpa användare att förstå förhållandet mellan kontrollerna och data.

  • Använd text som beskriver var länken kommer att ta användaren om länktext inkluderas i vyn. Använd till exempel länktext såsom ”Global uppvärmningsstatistik för 1990–2000”. Undvik ord som ”Klicka här”, ”Mer” eller ”Mer information”. Dessa exempel på länktexter är för generiska och kan vara förvirrande för användarna.

  • Exempel: Detta exempel visar två bubbeldiagram. En vy använder bara texten som visas som standard när en vy skapas. Den andra vyn har ytterligare text som ger mer sammanhang över hela vyn för att hjälpa till att förmedla meningen.

    Inte lättillgänglig – för lite textMer tillgänglig - Mer beskrivande text
    bubbeldiagram med väldigt lite textbubbeldiagram med titel, bildtexter och mer text
    • Den här vyn använder endast standardtexten för bladets titel och standardetiketterna för filtren och förklaringen.

    • Markeringarna särskiljs endast efter storlek och färg.

    • Det finns ingen bildtext eller annan förklarande text i vyn som kan bidra till sammanhanget.

    • Detta exempel visar samma vy, men innehåller ytterligare förklarande text.

    • Ytterligare text lades till i titeln och bildtexten för att förklara förhållandet mellan markeringarna och ge ytterligare sammanhang till vad vyn visar.

    • Markeringsetiketter läggs till för att visa vinstsiffror så att användarna inte behöver förlita sig på färgen bara för att förstå denna information.

För information och exempel på hur man bygger en vy som innehåller ytterligare text för sammanhang, se Visa mer text och gör den användbar och Författarvyer för tillgänglighet i Författarvyer för tillgänglighet.

 

Färg och kontrast

WCAG 2.1 AA-princip: uppfattningsbar och förståelig

Du kan använda färg för att särskilja markeringar i vyn. Men för användare med synnedsättningar räcker det inte alltid med att bara använda färg för att skilja på dem, i synnerhet när det finns många markeringar i en vy. Använd följande riktlinjer när du använder färg i dina vyer:

  • Tableau tillhandahåller en färgblind palett som du kan använda för att hjälpa dig att välja lämpliga färger för din vy. För alla färgpaletter som du använder ska du säkerställa att du ger tillräckligt med kontrast och tilldelar färger som skiljer sig från varandra i spektrumet ljus/mörk.

  • För radmarkeringar kan du använda ytterligare alternativ såsom former, storlek och etiketter för att skilja dem åt.

  • Använd verktygen kontrastanalysinstrument(Länken öppnas i ett nytt fönster) att välja de bästa textfärgerna och bakgrunder med tillräckliga kontrastförhållanden. Se till att färgkontrasten för text är stark och uppfyller kontrastförhållandets standarder på 4,5:1 (3:1 för stor text).

    Exempel: Detta exempel visar två linjediagram. Ett som använder färg endast för att särskilja linjerna och den andra som använder mer lämpliga färger plus former för att särskilja markeringarna

    Inte lättillgängligt - Endast färg för att särskilja markeringarMer tillgänglig - Färg och form för att särskilja markeringar
    linjediagram som endast visar färg för att skilja markeringar åtlinjediagram som använder både färg och former för att skilja markeringar åt
    • Denna vy använder endast färg för att skilja linjerna från varandra.

    • Markeringarna i vyn använder inte en färgpalett som är helt tillgänglig för användare med nedsatt syn.

    • Det här exemplet visar samma vy, men använder både färg och form för att identifiera markeringarna.

    • En färgförklaring och en formförklaring med tydliga titlar identifierar vad färgerna och formerna representerar i vyn.

För information och exempel på hur man bygger en vy som använder färg för att särskilja markeringar, se Författarvyer för tillgänglighet i Författarvyer för tillgänglighet.

 

Publicera din vy

WCAG 2.1 AA-princip: Uppfattningsbar, användbar, förståelig

För att göra dina vyer tillgängliga för dina användare publicerar du vyn på Tableau Server eller Tableau Cloud och klickar på Dela/ i verktygsfältmenyn. Användare kan interagera med vyn och verktygsfältets knappar med en skärmläsare eller ett tangentbord. För mer information, se Åtkomst till tangentbord i Tableau-vyer.

Om du vill ha information om hur du publicerar och bäddar in arbetsböcker hittar du den inbäddningskod som du vill kopiera till dina webbsidor och stänger av verktygsfältet, se Publicera och dela vyn i Författarvyer för tillgänglighet.

Tack för din feedback!Din feedback har skickats in. Tack!