Interaktive Diagramme können Daten in fesselnde Geschichten verwandeln und auf einen Blick wertvolle Erkenntnisse liefern. Doch was passiert, wenn diese visuellen Hilfsmittel für Menschen mit Sehbehinderungen nicht zugänglich sind? In diesem Beitrag zeigen wir Ihnen, wie Sie sicherstellen können, dass Ihre interaktiven Diagramme für alle Nutzer zugänglich sind, unabhängig von ihren Fähigkeiten.
Bevor wir näher darauf eingehen, wollen wir zunächst klären, was wir unter einem „interaktiven“ Diagramm verstehen. Bei interaktiven Diagrammen können Nutzer das Erscheinungsbild des Diagramms über verschiedene Steuerelemente ändern. Beispielsweise ist eine Seite zur Verfolgung des Website-Traffics – auf der sich die Ansicht durch Ändern des Datumsbereichs ändert – ein interaktives Diagramm. Eine Seite hingegen, auf der die Noten von Schülern angezeigt werden und die ein Nutzer nicht beeinflussen kann, ist ein statisches Diagramm.
Im Folgenden finden Sie einige bewährte Vorgehensweisen, mit denen Sie Ihre interaktiven Diagramme barrierefrei gestalten und sicherstellen können, dass alle Nutzer, einschließlich Menschen mit Behinderungen, mit den Informationen interagieren und diese verstehen können.
Wählen Sie Diagrammbibliotheken mit integrierten Barrierefreiheitsfunktionen
Barrierefreie Diagrammbibliotheken sind in der Regel von Haus aus so konzipiert, dass sie die Bedürfnisse von Menschen mit Behinderungen berücksichtigen, und legen bei der Barrierefreiheit den Schwerpunkt auf Anpassungsmöglichkeiten und die Bedienbarkeit über die Tastatur. So bieten beispielsweise Highcharts, Recharts und Google Charts sowohl Anpassungsmöglichkeiten als auch Unterstützung für Barrierefreiheit.
Stellen Sie eine nahtlose Tastaturnavigation bei interaktiven Elementen sicher
Zur individuellen Anpassung der Datenvisualisierung nutzen interaktive Diagramme interaktive Elemente wie Schaltflächen, Schieberegler und Datenpunkte, die die Daten an einer bestimmten Stelle mithilfe von Tooltips beschreiben. Diese interaktiven Elemente müssen ausschließlich über die Tastatur bedienbar und fokussierbar sein. Zudem ist eine klare, gut sichtbare Fokusanzeige für diese interaktiven Elemente unerlässlich, damit Nutzer, die ausschließlich die Tastatur verwenden, erkennen können, wo sich der Fokus befindet, und der Tab-Reihenfolge folgen können.
Die Tabulatorreihenfolge bezeichnet die Reihenfolge, in der Elemente auf einer Webseite, in einem Formular oder in einer Softwareoberfläche bei der Navigation mit der Tabulatortaste ausgewählt werden. Die Tabulatorreihenfolge hilft Benutzern – insbesondere solchen, die eine Tastatur oder assistive Technologien verwenden –, sich in einer logischen und intuitiven Reihenfolge durch interaktive Elemente zu bewegen. Im obigen Bild sind beispielsweise die Nummerierungselemente zu sehen, die verdeutlichen, wie sich der Fokus für Benutzer, die ausschließlich die Tastatur verwenden, bewegen sollte.
Verbesserung der Kompatibilität mit Bildschirmleseprogrammen
Alle Informationen, die ein sehender Nutzer aus einem Diagramm entnehmen kann, müssen durch Textalternativen ergänzt werden, die die Beziehungen zwischen verschiedenen Datenpunkten sowie alle weiteren Informationen beschreiben, die ein sehender Nutzer erhält. Alle interaktiven Elemente benötigen Namen, damit Nutzer von Bildschirmleseprogrammen erkennen können, um welche Elemente es sich handelt und welche Funktion sie haben. Sie sollten stets der Verwendung nativer HTML-Elemente den Vorzug geben. Wenn Sie jedoch benutzerdefinierte Elemente verwenden, können Sie ARIA (Accessible Rich Internet Applications) nutzen, um Rollen, Eigenschaften und Zustände bereitzustellen, mit denen die Diagrammstruktur, die interaktiven Elemente und die Daten für Screenreader beschrieben werden.
Sie sollten außerdem sicherstellen, dass jedes interaktive Element und jedes Bild die folgenden Angaben enthält, damit Bildschirmleseprogramme die dargestellten Daten verstehen können:
- Aussagekräftige Titel und Beschriftungen für alle Diagrammelemente
- Zusammenfassungen oder Beschreibungen des Zwecks der Grafik und der wichtigsten Erkenntnisse
- Barrierefreie Tooltips und Datenwerte, die über die Tastatur bedienbar und von Bildschirmleseprogrammen gelesen werden können
Farbkontrast und die Verwendung von Farbe allein zur Vermittlung von Informationen
Benutzer mit Farbenblindheit können die Aussagekraft der Daten in Ihrer Grafik möglicherweise nicht erkennen, wenn die Darstellungen ausschließlich auf Farben basieren. Daher müssen Sie auf die Kontrastverhältnisse zwischen Vorder- und Hintergrundfarben achten. 3:1 ist das Mindestkontrastverhältnis, doch 4,5:1 sorgt für eine noch bessere Barrierefreiheit. Bei der Darstellung von Text vor einem Hintergrund schreiben die WCAG-Richtlinien ein Kontrastverhältnis von 4,5:1 vor.
Sie können zur Darstellung von Daten auch verschiedene Muster verwenden, anstatt sich ausschließlich auf Farben zu verlassen. So können beispielsweise interaktive Diagramme mit Datenbeschriftungen allen Nutzern ein klares Verständnis dafür vermitteln, was die einzelnen Balken in einem Diagramm darstellen. Ist dies nicht möglich, sollten Sie zumindest für jeden Teil des Diagramms eine Textalternative bereitstellen, damit auch farbenblinde oder sehbehinderte Nutzer denselben „Aha“-Moment erleben können wie andere Nutzer.
Fazit
Wenn Sie diese bewährten Vorgehensweisen befolgen, können Sie sicherstellen, dass Ihre interaktiven Diagramme für alle Nutzer zugänglich sind, auch für Menschen mit Behinderungen. Beginnen Sie noch heute damit, Ihre Diagramme auf Barrierefreiheit zu überprüfen, und denken Sie daran, dass Inklusion für eine effektive Datenkommunikation unerlässlich ist.
Wenn Sie Unterstützung bei der Überarbeitung von Diagrammen benötigen, um diese für alle Ihre Nutzer barrierefrei zu gestalten, wenden Sie sich bitte noch heute an Deque !
