In zahllosen Artikeln werden die Vorteile von SVGs besprochen. Darunter werden auch die Möglichkeiten für eine zugängliche Einbindung genannt.
Das Problem ist, dass die Artikel meist schon älteren Datums sind (die neueren von 2014 oder 2015) und wohl davon ausgehen.
Dort wird häufig die folgende Methode als hilfreich beschrieben: title-Element im verwenden, wenn das nicht hilft zusätzlich dem title-Element eine id mitgeben und das öffnende SVG-Tag mittels aria-labelledby damit verknüpfen). Das soll wie folgt umgesetzt werden:
<svg aria-labelledby="title">
<title id="title">Beschreibung des SVG analog zum alt-Attribut</title>
...
</svg>
Diese Methode kann sehr schnell lästig werden. Auf einer Seite mit Dutzenden von Icons müssten entsprechend viele ids vergeben und zugeordnet werden oder alle aria-labelledby-Werte auf beispielsweise das erste Vorkommen der Beschreibung verweisen (also alle dieselbe id als Ziel verwenden).
Wenn man diese Methode händisch umsetzt, ist sie aufwändig und fehleranfällig. Bei einer Automatisierung werden bei einem Fehler massenhaft Icons falsch auszeichnet. Noch ärgerlicher ist jedoch, dass Screenreader die Arbeit nicht honorieren, da die WAI-ARIA-Unterstützung nicht vollständig implementiert ist (s.a. Übersicht über die Unterstützung von WAI-ARIA durch Screenreader – sozusagen ein caniuse für Vorleseprogramme).
Gerade der beliebte NVDA bleibt in Kombination mit dem Firefox stumm, wenn Sie SVGs so auszeichnen.
Was dagegen immer hilft: geben Sie dem SVG ein Geschwister-Element mit einer Beschreibung mit, die Sie vor sehenden Nutzern verbergen. Diese archaische Holzhammer-Methode wirkt immer, ihre Umsetzung ist allerdings weniger zeitaufwändig und komplex als das Einfügen des title-Elementes mit zusätzliche id und aria-labelledby. Auch die Handhabung ist deutlich einfacher. Der Browser- und Screenreader-Support reicht bis in die graue Vorzeit des InternetExplorers.
Zu demselben Ergebnis kommt auch das Team von simplyaccessible, die Ihre Erfahrungen ,it der Zugänglichkeit von SVGs wie folgt zusammenfassen:
Our most recommended approach when it comes to browser support and consistency across screen readers is to add a visually-hidden element as a sibling element to the <svg>.
https://simplyaccessible.com/article/7-solutions-svgs/ (english)
Natürlich ist eine versteckte Beschreibung nicht immer nötig. Gerade bei Icons sollten Sie darauf achten, dass die Bedeutung allen klar ist. Nicht jeder erkennt in dem Symbol eines Druckers auch einen Drucker und weiß, wozu der Knopf dient. Ärgerlich wenn der Besucher Ihrer Seite das anhand eines (unbenötigten) Ausdrucks lernt.
Fazit
Inzwischen trifft man überall im Web auf SVGs. Zu recht, denn die Vorteile sind vielfältig und jede alternative Technik hat mehr Nachteile. Besonders ihre Skalierbarkeit und die Möglichkeit sie mit fill: currentColor; so aussehen zu lassen, wie der umgebende Text, sorgen für gute Noten bei der barrierefreien Umsetzung von Webseiten. Mit SVGs stellen sie sicher, dass die Grafiken perfekt gezoomt werden können und der CSS-Einzeiler sorgt bei der Verwendung eigener Vorder- und Hintergrundfarben dafür, dass die Kontraste mit den Texten übereinstimmen.
Dennoch ist die viel gepriesene Zugänglichkeit von SVGs nicht perfekt. Auch wenn das Problem nicht in der Technik selber liegt, sondern in der unvollständigen Implementation durch User Agents. Glücklicherweise gibt es einen simplen Workaround. Den Code dazu finden Sie unten im Takeaway!
Takeawy
Barrierefreie Einbindung einer SVG-Grafik, die einer Beschreibung bedarf
<span>
<svg>...</svg>
<span class="visuallyhidden">Beschreibung der Grafik</span>
</span>