Überlegungen zur Barrierefreiheit für Diagramme, Grafiken und Infografiken
Diagramme und Grafiken sind eine großartige Möglichkeit, Daten visuell darzustellen. Unabhängig davon, ob Sie ein Liniendiagramm, ein Balkendiagramm oder ein Tortendiagramm verwenden, steht außer Frage, dass diese Inhalte dazu beitragen können, ein klares Bild der betreffenden Daten zu zeichnen.
Was passiert jedoch, wenn jemand mit Sehbehinderung oder Farbenblindheit versucht, die Karteninformationen zu lesen, und dies nicht kann? Da Diagramme und Grafiken normalerweise mit Volltonfarben erstellt werden, könnte dies für einige Leute schwierig zu konsumieren sein. Wie können wir sicherstellen, dass unsere Diagramme und Grafiken so gestaltet sind, dass sie diejenigen einbeziehen, die keine Farben wahrnehmen können? Und was ist mit Leuten, die rechtlich blind sind und das Bild überhaupt nicht sehen können?
Sehen wir uns einige Optionen an, um sicherzustellen, dass die komplexen Bilder, die wir zur Darstellung von Daten entwerfen, für alle verfügbar sind.
Diagramme und Grafiken
Erhöhen der Diagrammsichtbarkeit
Es gibt ein paar Dinge, die wir tun können, um unsere Diagramme und Grafiken für Menschen mit Sehbehinderung oder Farbenblindheit zugänglicher zu machen:
-
Hilfreich können eindeutige Beschriftungen sein, die auf dem Diagramm so platziert werden, dass angezeigt wird, welche Linie, welcher Balken oder welches Tortenstück für welche Daten verantwortlich ist.
Die Idee ist, die Legende, die an der Seite wäre, zu nehmen und das Etikett direkt in der Nähe des betreffenden Datenpunkts zu platzieren. Auf diese Weise müsste jemand, der eine Zoom-Software verwendet, nicht vom Diagramm zur Legende hin und her gehen, um die Verbindung herzustellen.
-
Formen und Texturen können verwendet werden, um zwischen farbigen Linien oder Tortenstücken in einem Diagramm visuell zu unterscheiden.
Mit Texturen kann jemand, der möglicherweise keine Farben wahrnehmen kann, die Datenpunkte unterscheiden. Die Texturen sollten auch als Teil der Legende definiert werden, um die Verbindung zwischen Diagramm und Beschriftung herzustellen.
Schnelltests
Um zu sehen, wie einfach oder schwierig Ihr Diagramm für jemanden mit Farbenblindheit zu lesen ist, sind hier zwei Übungen, die Sie als Test durchführen könnten:
- Verwenden Sie die NoCoffee Chrome-Erweiterung , um verschiedene Grade von Farbenblindheit zu simulieren. Ist Ihr Diagramm oder Ihre Grafik leicht oder schwer verständlich?
- Wenn Sie können, drucken Sie Ihr Diagramm in Schwarzweiß aus. Überprüfen Sie erneut, ob die Datenpunkte und Informationen lesbar und verständlich sind.
Hier geht es darum sicherzustellen, dass der Inhalt konsumierbar und die Informationen auf Ihrer Website farbneutral sind.
Hinzufügen von Textalternativen
Für Menschen, die rechtlich blind sind und auf Screenreader-Software angewiesen sind, ist es ideal, eine Textalternative für Ihre Daten bereitzustellen.
Eine Textalternative für ein Diagramm oder eine Grafik wird in der Regel über eine HTML- table zur Verfügung gestellt, die die Daten in einer tabellarischen Struktur ausgibt. Dies ermöglicht es jemandem, der Hilfstechnologien verwendet, ein Verständnis der Daten zu erlangen, ohne sich auf das visuelle Diagramm oder Diagramm zu verlassen.
Schauen Sie sich zum Beispiel die Diagramme und Grafiken in der WebAIM Screen Reader User Survey an. Beachten Sie, wie jede Grafik von einer HTML- table mit demselben Inhalt begleitet wird, die für Screenreader-Benutzer oder alle anderen Personen verfügbar ist, die es vorziehen, Daten auf diese Weise zu lesen.
Diagrammbibliotheken
Es ist erwähnenswert, dass Diagrammbibliotheken wie D3.js und Highcharts verfügbar sind. Diese Bibliotheken nehmen Rohdaten und erstellen Diagramme und Grafiken in Echtzeit beim Laden der Seite. Der Nachteil bei der Verwendung dieser Bibliotheken besteht darin, dass sie möglicherweise nicht sehr zugänglich sind und die Nutzung der Daten für einige schwierig sein kann.
Wenn Sie beispielsweise das Highcharts Accessibility-Modul hinzufügen, sind die Diagramme tastaturfreundlich, aber wenn Sie versuchen, mit den Daten zu interagieren, während Sie einen Bildschirmleser ausführen, können die Daten schwer zu lesen sein. Aus diesem Grund ist es ratsam, die gleichen Daten alternativ in einer HTML- table zur Verfügung zu haben.
Infografiken
Wenn Sie nicht vertraut sind, ist eine Infografik normalerweise ein großes Bild mit in das Bild eingebetteten Informationen oder Dateninhalten. Der Reiz besteht darin, dass der Designer viele Daten auf interessante, auffällige und farbenfrohe Weise teilen kann. Die Methode ist effektiv; Es gibt einen Grund, warum Facebook es Benutzern erlaubt, Beiträgen Farbe hinzuzufügen – als eine Methode, um die Aufmerksamkeit der Leute zu erregen, während sie durch ihren Feed scrollen.
Bedenken hinsichtlich der Zugänglichkeit
Typischerweise gibt es bei diesem Ansatz eine Reihe von Problemen, die bei der Veröffentlichung einer Infografik angegangen werden müssen:
- Der Farbkontrast ist ausreichend, damit Textinhalte vor dem Hintergrund gelesen werden können
- Bereitstellung einer Textalternative für alle in das Bild eingebetteten Daten
- Zulassen, dass der Text beim Zoomen skaliert wird
Farbkontrast
Um die vom W3C festgelegten Farbkontrastregeln zu erfüllen, verwenden Sie einen Farbwähler, um die Farbwerte zu erfassen und die Textfarbe mit einigen Pixeln zu testen, die in unmittelbarer Nähe des Textes erscheinen. Verwenden Sie ein Farbkontrast-Tool, um festzustellen, ob die Farben den Test bestehen oder nicht bestehen, um sicherzustellen, dass der Textinhalt lesbar ist.
Wenn die Text- und Hintergrundfarbe fehlschlägt und die Farbwerte nicht geändert werden können, ziehen Sie in Betracht, dem Text einen border oder drop-shadow hinzuzufügen. Dadurch wird die Lesbarkeit des Textinhalts erhöht, ohne dass die tatsächlichen Farben in der Infografik angepasst werden müssen.
Bereitstellung einer Textalternative
Da es sich bei einer Infografik in der Regel um ein HTML-Bild handelt, könnte es verlockend sein, den gesamten Inhalt des Bildes innerhalb des alt -Attributs hinzuzufügen. Wie wir in Alt-Text gelernt haben, kann es für manche Benutzer ziemlich umständlich und überfordernd sein, zu viel Inhalt in das alt -Attribut zu stecken.
Zu einem bestimmten Zeitpunkt gab es das Attribut longdesc . Dieses Attribut sollte zu img -Elementen hinzugefügt werden, um eine Verbindung zu weiteren Inhalten herzustellen, die das Bild beschreiben. Es war eine gute Idee, aber die schlechte Unterstützung und Implementierung durch Browserhersteller hat das longdesc Attribut inzwischen obsolet gemacht.
Was ist der beste Ansatz, um eine Textalternative für in Text eingebettete, datenintensive Bilder bereitzustellen? Geben Sie den Text einfach auf derselben Seite neben dem Bild aus. Mit den reinen Textdaten in unmittelbarer Nähe zum Bild können blinde oder sehbehinderte Benutzer von Bildschirmlesegeräten die Daten problemlos lesen, und Personen, die sich leicht von farbenfrohen Bildern ablenken lassen, können sich auf den reinen Text konzentrieren und suchen Engines werden auch in der Lage sein, den Inhalt zu indizieren. Alle gewinnen!
WCAG-Erfolgskriterien
Dies kommt auf 1.1.1 Nicht-Text-Inhalt zurück, der besagt:
"Alle Nicht-Text-Inhalte, die dem Benutzer präsentiert werden, haben eine Textalternative, die dem entsprechenden Zweck dient."