Bewährte Methoden für das Entwerfen von barrierefreien Ansichten

Sie haben eine aussagekräftige Ansicht erstellt und möchten sie barrierefrei gestalten, um sicherzustellen, dass alle Benutzer die von Ihnen zusammengestellten Daten sehen und verstehen können.

Tableau bietet mehrere Steuerelemente, mit denen Sie barrierefreie Ansichten erstellen können, und unterstützt Sie bei der Einhaltung der in Absatz 508 des Rehabilitationsgesetzes aufgeführten US-Richtlinien und der Web Content Accessibility Guidelines (WCAG 2.1 AA). Stellen Sie sicher, dass von Tableau Cloud oder Tableau Server freigegebene Inhalte den Schritten unter Erstellen von barrierefreien Ansichten und den folgenden WCAG 2.1 AA-Prinzipien entsprechen:

  • Wahrnehmbarkeit – Informationen und Bestandteile der Benutzeroberfläche müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können. Ziehen Sie Textalternativen und alternative Möglichkeiten zur Präsentation von Inhalten in Betracht.

  • Bedienbarkeit – Benutzer müssen über die verschiedenen verwendeten Geräte oder Methoden auf die Komponenten der Benutzeroberfläche und die Navigation zugreifen können, um mit der Ansicht zu interagieren.
  • Verständlichkeit – die Informationen in der Ansicht müssen für Ihre Benutzer verständlich sein. Verwenden Sie beispielsweise für die verschiedenen Elemente in Ihrer Ansicht Namen und Beschriftungen, die sich deutlich voneinander unterscheiden.

Setzen Sie die in diesem Artikel beschriebenen Best Practices um und führen Sie die unter Erstellen von barrierefreien Ansichten beschriebenen Schritte aus, um Ansichten zu erstellen, die nach dem Veröffentlichen auf Tableau Server oder in Tableau Cloud für alle Benutzer zugänglich sind.

Halten Sie es einfach

WCAG 2.1 AA-Prinzip: Verständlichkeit

Es kann vorkommen, dass Sie mit einer Ansicht eine große Anzahl von Informationen darstellen möchten. Komplexe Ansichten können jedoch zu Verständnis- und anderen Problemen führen, wenn Benutzer auf einen Screenreader oder auf die Tastaturnavigation angewiesen sind. Die nachstehenden Richtlinien helfen Ihnen, alle gewünschten Informationen zu kommunizieren, ohne Benutzer mit einer zu informationsreichen Ansicht zu überfordern.

  • Aggregieren Sie Ihre Daten, wo immer dies möglich ist, um die Anzahl der angezeigten Markierungen zu reduzieren. Das Anzeigen von mehr als 1000 Markierungen in einer Ansicht kann außerdem dazu führen, dass die Ansicht vom Server und nicht im Browser gerendert wird. Diese vom Server gerenderten Ansichten werden in Bezug auf die WCAG-Konformität noch nicht unterstützt.

    Benutzer haben außerdem Zugriff auf die Seite Daten anzeigen (standardmäßig aktiviert), um die Markierungen in den zugrunde liegenden Daten zu prüfen, oder können die Daten von dieser Seite in eine barrierefreie Anwendung herunterladen und auf diese Art anzeigen.

    Beispiel: In diesem Beispiel werden zwei verschiedene Balkendiagrammansichten gezeigt, um den Unterschied zwischen einer detaillierten und einer aggregierten Ansicht zu veranschaulichen.

    Nicht leicht zugänglich – zu viele MarkierungenLeichter zugänglich – aggregierte Ansicht
    Säulendiagramm mit 5.000 MarkierungenSäulendiagramm mit Textbeschriftungen und weniger Markierungen
    • Durch so viele Details wird die Ansicht schwerer verständlich.

    • Die Ansicht enthält über 5000 Markierungen und nicht genügend Text, um anzugeben, was die unterschiedlichen Markierungen darstellen.

    • Für Benutzer, die auf einen Screenreader angewiesen sind, gestaltet sich die Verwendung zu schwierig.

    • In diesem Beispiel wird die gleiche Ansicht gezeigt, wobei die Daten allerdings auf einer höheren Ebene aggregiert sind.

    • Die wichtigsten Datenpunkte sind immer noch vorhanden, können jetzt aber von Benutzern leichter gelesen und verstanden werden.

    • Die Anzahl der Markierungen wurde von über 5000 auf etwa 20 reduziert.

    • Benutzer können die zugrunde liegenden Details der Markierungen immer noch lesen, indem sie den Fokus auf die Ansicht setzen und die Eingabetaste drücken, um die Seite Daten anzeigen aufzurufen.

     

  • Sie können einfache grafische Elemente wie Balken- oder Liniendiagramme verwenden, die Ihnen die Verwendung von Text, Farbe und Formen ermöglichen, um der Ansicht weitere Kontextinformationen hinzuzufügen.

  • Beschränken Sie sich bei den Markierungen auf diejenigen, bei denen die wichtigsten Datenpunkte hervorgehoben werden.

Informationen und Beispiele für die Erstellung dieses Ansichtstyps finden Sie im Abschnitt Halten Sie es einfach unter Erstellen von barrierefreien Ansichten.

 

Titel und Überschriften

WCAG 2.1 AA-Prinzip: Wahrnehmbarkeit, Verständlichkeit

Wenn Sie hilfreiche Textbeschreibungen in Titeln und Überschriften verwenden, erhalten Benutzer, die auf unterstützende Technologien zurückgreifen, mehr Kontextinformationen und somit ein besseres Verständnis der Daten in Ihrer Ansicht. Berücksichtigen Sie die folgenden Richtlinien, um die visuelle Funktionsweise von Tableau anzupassen, sodass die Anforderungen aller Ihrer Benutzer erfüllt werden.

  • Überlegen Sie, wie Ihre Ansichten als Zusatz zu dem Text dienen können, den Sie für die Beschreibung verwenden.

  • Beschreiben Sie Ihre Visualisierung und die darin dargestellten Elemente mithilfe von Text in Titeln und Überschriften.

  • Verwenden Sie eine einfache und verständliche Sprache. Vermeiden Sie Jargon, Akronyme oder Abkürzungen.

  • Integrieren Sie keine Wörter wie "Bild von" oder "Bild von" in Ihren Textbeschreibungen, da Screenreader diese Informationen manchmal bereits automatisch enthalten.

  • Vermeiden Sie die durchgängige Verwendung von Großbuchstaben (beispielsweise in Überschriften oder Titeln), da diese Schreibweise schwer lesbar ist.

    Beispiel: In diesem Beispiel werden zwei unterschiedliche Balkendiagramme gezeigt. In dem einen Beispiel wird sehr wenig Text verwendet, in dem anderen wurden Titel und Überschriften als zusätzliche Kontextinformationen hinzugefügt.

    Nicht leicht zugänglich – zu wenig TextLeichter zugänglich – zusätzliche Kontextinformationen durch beschreibenden Text
    Säulendiagramm mit minimalem TextSäulendiagramm mit hinzugefügten Titeln und Bildunterschriften
    • Ein Titel, der aus nur einem Wort besteht, ist nicht aussagekräftig genug.

    • Die Markierungen werden durch Farbe und Größe unterschieden. Ohne zusätzlichen Text kann der Kontext dieser Markierungen jedoch schwer verständlich sein.

    • Diese Ansicht enthält weder eine Überschrift noch erklärenden Text zur Erläuterung.

    • In diesem Beispiel wird die gleiche Ansicht gezeigt, jedoch mit zusätzlichem erklärenden Text im Titel und in der Überschrift.

    • Die gleiche Kontrastfarbenskala und die gleichen Größenunterschiede werden verwendet. Den Balkenmarkierungen wurden jedoch Beschriftungen hinzugefügt, um zusätzliche Kontextinformationen bereitzustellen.

Informationen und Beispiele zum Erstellen einer Ansicht, die mehr Text enthält und somit mehr Kontextinformationen bietet, finden Sie im Abschnitt Anzeigen von zusätzlichem hilfreichen Text unter Erstellen von barrierefreien Ansichten.

 

Zusätzlicher Text

WCAG 2.1 AA-Prinzip: Wahrnehmbarkeit, Verständlichkeit

Wenn Sie in Ihrer gesamten Ansicht zusätzlich zu Titeln und Überschriften auch Text hinzufügen, können Benutzer den Kontext der unterschiedlichen Elemente in der Ansicht besser verstehen. Außerdem können Sie so die Beziehung zwischen den unterschiedlichen Steuerelementen (wie z. B. Legenden und Filtern) und den Daten beschreiben.

Nutzen Sie die folgenden Richtlinien für das Hinzufügen von zusätzlichem Text:

  • Verwenden Sie Text in Überschriften zu Legenden oder Filtern, um das jeweilige Steuerelement und dessen Funktion zu beschreiben. Sie können außerdem Textbereiche in einem Dashboard einsetzen, um Ihre Visualisierungen mit zusätzlichem Kontext zu erweitern, der weitere Informationen zu den von Ihnen dargestellten Elementen bereitstellt.

  • Fügen Sie alternativen Text (Alt-Text) zu Visualisierungen hinzu. Seit Tableau 23.1 wird Alt-Text für Visualisierungen automatisch erstellt. Ab Tableau 23.2 können Sie den automatisch generierten Alternativtext bearbeiten, um zusätzlichen, für Ihre Leser wichtigen Kontext hinzuzufügen.
  • Beziehen Sie sich, sofern möglich, anhand der entsprechenden Beschriftung auf Steuerelemente. Wenn Sie beispielsweise die Beschriftung für eine Legende von Unterkategorie in Farbschlüssel für Produkttyp ändern, ist es für Benutzer einfacher, die Beziehung zwischen den Steuerelementen und den Daten zu verstehen.

  • Wenn Sie Ihrer Ansicht Text für einen Link hinzufügen, verwenden Sie Text, der Benutzern das Ziel des Links erläutert. Verwenden Sie beispielsweise Linktext wie "Statistische Werte für die globale Erwärmung von 1990 bis 2000". Vermeiden Sie Ausdrücke wie "Hier klicken", "Mehr dazu" oder "Weitere Informationen". Der Linktext in diesen Beispielen ist zu allgemein und kann Benutzer verwirren.

  • Beispiel: Im folgenden Beispiel werden zwei Blasendiagramme gezeigt. Eine Ansicht verwendet nur den Text, der bei ihrer Erstellen standardmäßig angezeigt wird, und die andere Ansicht enthält zusätzlichen Text, der der gesamten Ansicht mehr Kontext verleiht, sodass ihre Bedeutung klarer wird.

    Nicht leicht zugänglich – zu wenig TextLeichter zugänglich – zusätzlicher erklärender Text
    Blasendiagramm mit sehr wenig TextBlasendiagramm mit Titel, Bildunterschriften und mehr Text
    • Diese Ansicht enthält nur den Standardtext für den Blatttitel und die Standardbeschriftungen für die Filter und Legenden.

    • Die Markierungen unterscheiden sich nur durch Größe und Farbe.

    • Die Ansicht enthält weder eine Überschrift noch anderen erklärenden Text für mehr Kontextinformationen.

    • In diesem Beispiel wird die gleiche Ansicht gezeigt, es ist jedoch zusätzlicher erklärender Text enthalten.

    • Zusätzlicher Text wurde dem Titel und der Überschrift hinzugefügt, um die Beziehung der Markierungen zu erläutern und zusätzliche Kontextinformationen zum Inhalt der Ansicht zu bieten.

    • Die Markierungen wurden mit den Gewinnzahlen beschriftet, sodass Benutzer beim Verständnis der Informationen nicht auf die Farbe angewiesen sind.

Informationen und Beispiele zum Erstellen einer Ansicht, die mehr Text enthält und somit mehr Kontextinformationen bietet, finden Sie unter Erstellen von barrierefreien Ansichten im Abschnitt Anzeigen von zusätzlichem hilfreichen Text und Erstellen von barrierefreien Ansichten .

 

Farbe und Kontrast

WCAG 2.1 AA-Prinzip: Wahrnehmbarkeit, Verständlichkeit

Farbe erleichtert die Unterscheidung zwischen Markierungen in einer Ansicht. Für Benutzer mit beeinträchtigter Sehfähigkeit ist die alleinige Verwendung von Farbe für die Darstellung von Unterschieden nicht immer ausreichend, insbesondere dann, wenn eine Ansicht viele Markierungen aufweist. Nutzen Sie die folgenden Richtlinien für den Einsatz von Farbe in Ihren Ansichten:

  • Tableau bietet eine spezielle Palette für Personen mit einer Farbsehschwäche, die Ihnen bei der Auswahl der geeigneten Farben für Ihre Ansicht hilft. Achten Sie bei jeder verwendeten Farbpalette auf ausreichend Kontrast und weisen Sie Farben zu, die sich durch die jeweilige Helligkeit unterscheiden.

  • Verwenden Sie bei Linienmarkierungen zusätzliche Optionen wie Formen, Größe und Beschriftungen zur Unterscheidung.

  • Verwenden Sie Tools zur Kontrastanalyse(Link wird in neuem Fenster geöffnet), um die besten Textfarben und Hintergründe mit einem geeigneten Kontrastverhältnis auszuwählen. Achten Sie darüber hinaus bei Text auf einen ausgeprägten Farbkontrast, der dem Standard für Kontrastverhältnisse von 4,5:1 (3:1 für großen Text) entspricht.

    Beispiel: In diesem Beispiel werden zwei Liniendiagramme angezeigt. In dem einen Diagramm unterscheiden sich die Linien nur durch die Farbe, in dem anderen werden geeignetere Farben und Formen zur Unterscheidung der Markierungen verwendet.

    Nicht leicht zugänglich – Markierungen unterscheiden sich nur durch die FarbeLeichter zugänglich – Markierungen unterscheiden sich durch Farbe und Form
    Liniendiagramm, das nur Farben zur Unterscheidung von Markierungen anzeigtLiniendiagramm, das sowohl Farben als auch Formen zur Unterscheidung von Markierungen verwendet
    • In dieser Ansicht unterscheiden sich die Linien nur durch die Farbe voneinander.

    • Für die Markierungen in dieser Ansicht wird keine Farbpalette verwendet, die für Benutzer mit Sehbehinderungen barrierefrei zugänglich ist.

    • In diesem Beispiel wird die gleiche Ansicht gezeigt, es werden jedoch sowohl Farbe als auch Formen zur Unterscheidung der Markierungen verwendet.

    • Eine Farblegende und eine Formenlegende mit deutlichen Titeln erläutern, was die Farben und Formen in der Ansicht darstellen.

Informationen und Beispiele zum Erstellen einer Ansicht, in der Farben zur Unterscheidung von Markierungen verwendet werden, finden Sie im Abschnitt Erstellen von barrierefreien Ansichten unter Erstellen von barrierefreien Ansichten.

 

Veröffentlichen Ihrer Ansicht

WCAG 2.1 AA-Prinzip: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit

Damit Ihre Ansichten Ihren Benutzern zur Verfügung stehen, veröffentlichen Sie Ihre Ansicht in Tableau Server oder Tableau Cloud, klicken Sie im Menü der Symbolleiste auf Freigeben/Benutzer können mit der Ansicht und den Symbolleistenschaltflächen über eine Bildschirmsprachausgabe oder eine Tastatur interagieren. Weitere Informationen finden Sie unter Bedienen von Tableau-Ansichten mit der Tastatur.

Informationen zum Veröffentlichen und Einbetten von Arbeitsmappen sowie zum Auffinden und Kopieren des Einbettungscodes in Ihre Webseiten finden Sie im Abschnitt Veröffentlichen und Freigeben der Ansicht unter Erstellen von barrierefreien Ansichten.

Vielen Dank für Ihr Feedback!Ihr Feedback wurde erfolgreich übermittelt. Vielen Dank.