Zugängliche SVGs: Perfekte Muster für Screenreader-Benutzer

Während Scalable Vector Graphics (SVGs) erstmals in den späten 90er Jahren eingeführt wurden, haben sie in den letzten zehn Jahren aufgrund ihrer extremen Flexibilität, hohen Wiedergabetreue und relativen Leichtigkeit in einer Welt, in der Bandbreite und Leistung wichtiger denn je sind, einen massiven Wiederaufstieg ihrer Popularität erlebt . Fortschritte bei JavaScript und die Einführung von CSS-Medienabfragen wie @prefers-color-scheme und @prefers-reduced-motion haben die Funktionalität von SVGs weit über ihren ursprünglichen Anwendungsfall hinaus erweitert, nämlich die einfache Anzeige von Vektorbildern auf einer Website.

Mit der Weiterentwicklung der SVG-Technologie muss sich auch unser Verständnis davon, wie wir SVGs entwerfen und entwickeln, weiterentwickeln. Ein Teil dieses Fortschritts beinhaltet die Berücksichtigung der Auswirkungen solcher Designs und Codes auf tatsächliche Menschen, auch bekannt als unsere Endbenutzer.

Dieser Artikel beschreibt zwölf unterschiedliche SVG-Muster , die „in freier Wildbahn“ gefunden wurden, und jede alternative Beschreibung, die angekündigt wird, wenn auf sie von verschiedenen Kombinationen aus Betriebssystemen, Browsern und Bildschirmleseprogrammen zugegriffen wird.

Natürlich sollen die folgenden Beispiele keine vollständige Liste aller möglichen Muster sein, die im digitalen Bereich verwendet werden, aber sie heben einige der beliebtesten oder allgegenwärtigen SVG-Muster hervor, denen Sie möglicherweise begegnen. Lesen Sie weiter, um herauszufinden, welche SVG-Muster Sie vermeiden sollten und welche Muster am umfassendsten sind!

Grundlegende alternative Beschreibungen mit dem <img> -Tag

Die erste Gruppe von vier Mustern verwendet das <img> -Tag, das mit einer SVG-Datei verknüpft ist. Dies ist eine gute Wahl für einfache, unkomplizierte Bilder auf Ihrer Website, App oder einem anderen digitalen Produkt. Obwohl der Nachteil bei der Verwendung dieses Musters darin besteht, dass Sie viele visuelle Elemente oder Animationen nicht einfach als Inline-SVG steuern können, sollte dieses Muster insgesamt leichtere und schnellere Bilder rendern und eine einfachere Wartung von SVGs ermöglichen, die Sie an mehreren Stellen verwenden.

Muster Nr. 1: <img> + alt="[words]"

 <img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Muster Nr. 2: <img> + role="img" + alt="[words]"

 <img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Muster Nr. 3: <img> + role="img" + aria-label="[words]"

 <img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Muster #4: <img> + role="img" + aria-labelledby="[ID]"

 <p class="visually-hidden">What does the fox say?</p> <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Grundlegende alternative Beschreibungen mit dem <svg> -Tag

Die zweite Gruppe von vier Mustern verwendet das <svg> -Tag mit einer Inline-SVG-Datei. Obwohl das direkte Hinzufügen des SVG-Codes in das Markup das Laden der Seite möglicherweise etwas langsamer machen könnte, wird diese geringfügige Ineffizienz durch mehr Kontrolle über die visuellen Elemente oder Animationen Ihrer Bilder ausgeglichen. Indem Sie Ihr SVG direkt zum HTML hinzufügen, haben Sie auch mehr Optionen, wenn es darum geht, Ihren Screenreader-Benutzern Bildinformationen bereitzustellen.

Muster Nr. 5: <svg> + role="img" + <title>

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

Muster Nr. 6: <svg> + role="img" + <text>

 <svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg>

Muster Nr. 7: <svg> + role="img" + <title> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

Muster #8: <svg> + role="img" + <title> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg>

Erweiterte alternative Beschreibungen mit dem <svg> -Tag

Die letzte Gruppe von vier Mustern verwendet das <svg> -Tag mit einer Inline-SVG-Datei, ähnlich wie die zweite Gruppe. Allerdings erweitern wir in diesem Fall die einfachen Alternativbeschreibungen aufgrund der Komplexität des Bildes um zusätzliche Informationen.

Dies wäre eine gute Musterwahl für kompliziertere Bilder, die mehr Erklärung benötigen. Es ist jedoch wichtig zu bedenken, dass es einige Menschen mit Behinderungen – wie kognitiven Störungen – gibt, die davon profitieren könnten, wenn diese zusätzlichen Bildinformationen direkt auf dem Bildschirm verfügbar sind, anstatt im SVG-Code vergraben zu sein.

Abhängig von der Art und Menge der Informationen, die Sie zu Ihrem SVG hinzufügen müssen, können Sie einen ganz anderen Ansatz in Betracht ziehen.

Muster Nr. 9: <svg> + role="img" + <title> + <text>

 <svg role="img" ...> <title>What does the fox say?</title> <text class="visually-hidden" font-size="0">Will we ever know?</text> [design code] </svg>

Muster Nr. 10: <svg> + role="img" + <title> + <desc>

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

Muster Nr. 11: <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox11 description11" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

Muster Nr. 12: <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> 

Gewinner und Verlierer von SVG-Mustern

Indem wir verschiedene Screenreader auf verschiedenen Kombinationen von Betriebssystemen und Browsern ausführen, sehen wir bestimmte Muster, die sich in der endgültigen Ergebnistabelle abzeichnen. Es gibt einige klare Gewinner und Verlierer von SVG- Mustern sowie ein paar Muster irgendwo in der Mitte, die Sie implementieren könnten, solange Sie sich dessen bewusst sind und ihre Einschränkungen akzeptieren können. Wenn wir uns die Ergebnistabelle ansehen, können wir Folgendes feststellen:

Grundlegende alternative Beschreibungen mit dem <img> -Tag (Gruppe 1)

Beste in der Show

• Muster 2 : <img> + role="img" + alt="[words]"
• Muster 3 : <img> + role="img" + aria-label="[words]"

Seien Sie vorsichtig

• Muster 4 : <img> + role="img" + aria-labelledby="[ID]"

Nicht empfohlen

• Muster 1 : <img> + alt="[words]"

Grundlegende alternative Beschreibungen mit dem <svg> -Tag (Gruppe 2)

Beste in der Show

• Muster 5 : <svg> + role="img" + <title>
• Muster 8 : <svg> + role="img" + <title> + aria-labelledby="[ID]"

Seien Sie vorsichtig

• Muster 7 : <svg> + role="img" + <title> + aria-describedby="[ID]"

Nicht empfohlen

• Muster 6 : <svg> + role="img" + <text>

Erweiterte alternative Beschreibungen mit dem <svg> -Tag (Gruppe 3)

Beste in der Show

• Muster 11 : <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

Hinweis : Obwohl dieses Muster nicht perfekt ist, da es alternative Beschreibungen wiederholt, hat es im Gegensatz zu den „Vorsicht“-Mustern keines der Elemente in den Tests ignoriert.

Seien Sie vorsichtig

• Muster 9 : <svg> + role="img" + <title> + <text>
• Muster 10 : <svg> + role="img" + <title> + <desc>
• Muster 12 : <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

Nicht empfohlen

• Keines der Muster in dieser Gruppe bestand die Tests vollständig.

Testergebnisse

Einpacken

Es ist wichtig zu beachten, dass ein Teil der Interpretation der Ergebnisse der SVG-Mustertests darin besteht, zu verstehen, dass die Ersteller der einzelnen Screenreader einen oder mehrere empfohlene Browser haben, die sie vollständig unterstützen. Dies bedeutet nicht, dass Sie keinen Screenreader in einem anderen Browser verwenden sollten oder könnten, es bedeutet lediglich, dass die Ergebnisse in diesem Fall möglicherweise nicht so genau sind, als wenn Sie die empfohlenen verwenden würden.

Der Mustertest für diesen Artikel umfasste einige Kombinationen von Browsern und Screenreadern , die möglicherweise in die Kategorie „Rand“ fallen, aber es gibt auch Hinweise darauf, welche Kombinationen von Betriebssystemen, Browsern und Screenreadern für Ihre eigenen Tests empfohlen werden. Die Ergebnisse dieser Tests sollen Ihnen helfen, basierend auf Ihren Musteranforderungen und Einschränkungen die bestmögliche Entscheidung für SVG-Muster zu treffen.

Zur Erinnerung: Bevor Sie sich auf ein Muster festlegen, vergewissern Sie sich bitte, dass Sie die Grundlagen kennen, wie und wann barrierefreie Bilder erstellt werden, und dass Sie die erforderlichen alternativen Informationen für die verschiedenen Bildtypen vollständig verstehen.

Wenn Sie zusätzliche Hilfe bei der Entscheidung benötigen, welches Muster für Ihre Umgebung verwendet werden soll, lesen Sie den Artikel Gut, besser, am besten: Die komplexe Welt der zugänglichen Muster entwirren, um Ihnen zu helfen, sich in den schwierigen Gewässern der zugänglichen Muster zurechtzufinden. Ausgestattet mit all diesen Informationen und nur ein wenig Aufwand sind Ihre SVGs auf dem besten Weg, alle einzubeziehen.

Anmerkung des Herausgebers : In ihrem bevorstehenden Online-Workshop zu Accessible Front-End Patterns können Sie mit Carie Best Practices zur Barrierefreiheit lernen – mit Richtlinien, Testwerkzeugen, unterstützenden Technologien und integrativen Designmustern. Online und live.