In dieser Präsentation wird aufgezeigt wie man Diagramme auf Webseiten barrierefreier machen kann

1. 1

2. 2
• Für manche Graphen kann es sinnvoll sein sie direkt lesbar machen
• Aufwändig bei komplexen Graphen
• Alternativtext kann sinnvollere Option sein
Lesbare Graphen für Screenreader

3. 3
<figure>
<figcaption>Preferred Operating System</figcaption>
<ul>
<li class="percent-50"><span>Windows
(100)</span></li>
<li class="percent-30"><span>Mac (60)</span></li>
<li class="percent-20"><span>Linux (40)</span></li>
</ul>
</figure>
CSS:
http://www.ashleysheridan.co.uk/blog/Accessible+Graphs+
and+Charts
Gut für einfache Graphen

4. 4
Für komplexe Graphen
Beispiel

5. 5
Bieten von Haus aus Barrierefreiheit
https://www.highcharts.com/accessibility/#exploreFeatures

6. 6
• Infografiken müssen von allen Nutzern verstanden werden
• Es wird eine textuelle Beschreibung benötigt
• Alt Tag ist für lange Inhalte ungeeignet
• Es beschreibt KURZ was zu sehen ist
• Bsp: „Balkendiagramm über die monatlichen Besucher im ersten und zweiten Quartal 2020“
• Lange Beschreibung für Informationen der Infografik
• Textuelle Darstellung der wichtigen Informationen und Trends
• Datentabellen können ebenfalls die Informationen liefern
• Können zusätzlich oder statt Text verwendet werden
• W3C
Alternativtext

7. 7
<figure role="group">
<img src="chart.png"
alt="Bar chart showing monthly and total visitors
for the first quarter 2014 for sites 1 to 3, described
in detail below.">
<figcaption>
<h2>Summary of Trends</h2>
<p>…</p>
</figcaption>
</figure>
Versteckt mit aria-describedby und aria-hidden
Optional: Versteckt (nur für Screenreader)

8. 8
<p>
<img
src="chart.png"
alt="Bar chart showing monthly and total visitors
for the first quarter 2014 for sites 1 to 3. Described
under the heading Summary of Trends.">
</p>
[…]
<h4>Summary of Trends</h4>
[…]

9. 9

10. 10

11. 11
<p>
<img
src="chart.png"
alt="Bar chart showing monthly and total visitors
for the first quarter 2014 for sites 1 to 3">
<br>
<a href="2014-first-qtr.html">Example.com Site
visitors Jan to March 2014 text description of the bar
chart</a>
</p>
<figure role="group">
<img
src="chart.png"
alt="Bar chart showing monthly and total
visitors for the first quarter 2014 for sites 1 to 3">
<figcaption>
<a href="2014-first-qtr.html">Example.com Site
visitors Jan to March 2014 text description of the bar
chart</a>
</figcaption>
</figure>
<figure> ist HTML5
abwärtskompatibel durch role=“group”

12. 12