A11y

Was ist Accessibility - A11y?

Accessibility steht für Barrierefreiheit in der Webentwicklung. Webinhalte sollen also von möglichst vielen Menschen, auch wenn sie eine körperliche/geistige Einschränkung haben genutzt werden können.
Technik unterstützt viele in ihrem Alltag, bzw macht viele Dinge einfacher. Für Menschen mit Behinderungen macht Technik vieles möglich. Barrierefreiheit bedeutet, Inhalte so zu entwickeln, dass sie unabhängig von den physischen und kognitiven Fähigkeiten einer Person und unabhängig davon, wie sie auf das Internet zugreifen, so zugänglich wie möglich sind.
"The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability." (W3C - Barrierefreiheit)

Accessible SVG's

Scalable Vector Graphic, kurz:SVG, entwickelt sich heute zum bevorzugten Grafikformat für das Web. Was muss getan werden, dass eben diese ebenfalls für Nutzer:innen mit assistiver Technologie (AT) genutzt werden kann? Vorab sollte jedoch geklärt sein ob / wann eine Grafik einen alternativen Text zur Unterstützung benötigt und wann nicht.

Hier ein paar wichtige Schritte:

benötigt die Grafik überhaupt einen alternativen Text?

Ist die Grafik dekorativ, dann erhält/braucht sie keinen alternativ Text

Was ist der Kontext der Grafik und des sie umgebenden Textes?

Wenn es Text/Inhalte um die Grafik gibt, die den Alternativtext bereitstellen, ist kein zusätzlicher altText erforderlich.
Beispielsweise:
See the Pen SVG as img src for figure with figcaption by Heather Migliorisi (@hmig) on CodePen.
Was ist der am besten geeignete Alternativtext für die Grafik, wenn sie ein altAttribut benötigt? Je nach Inhalt des Bildes kann es unterschiedlich gehandhabt werden:
See the Pen SVG as img src for figure with figcaption by Heather Migliorisi (@hmig) on CodePen.

Hat die Grafik eine Funktion ? Wenn ja, sollte es dem/der Nutzer:in mitgeteilt werden.

Anstatt die Symbole beispielsweise genau so zu beschriften, wie sie dargestellt werden...

Besipiel fehlerhafter Code:

                  
  <a href="http://codepen.io/username"> 
        <img src="codepen_icon.png" 
                alt="CodePen Logo"> 
  </a>

...sollte dem/der Nutzer:in Kontext gegeben werden:
Gutes Codebeispiel:

                  
  <a href="http://codepen.io/username"> 
        <img src="codepen_icon.png" 
                alt="See Picked Pens"> 
  </a>

Wie kann aber nun ein SVG eingebettet werden?

SVG als img src
See the Pen SVG as img src by Heather Migliorisi (@hmig) on CodePen.
Inline-SVG
Ein inline SVG ist direkt im DOM verfügbar und somit von der accessibility API, welche von AT (assistiver Technologie) genutzt wird, frei zugänglich. Möchte man jetzt noch bspw. Animation hinzufügen, sollte ein Title (title) hinzugefügt werden (eine description (desc) nur wenn nötig, diese Beschreibt die Grafik nochmals genauer), sodass der/die Nutzer:in genau weiß was hier passiert/abgebildet ist. In der description hier steht "An illustrated gray cat with bright green blinking eyes.", dadurch wird die Animation genauer erläutert.
Was ist "desc" & "title"?
See the Pen Simple Inline Accessible SVG Cat - using title and desc by Heather Migliorisi (@hmig) on CodePen.
SVG via object oder iframe einbinden
<object>und <iframe> sind hier keine gute Variante um SVGs einzubinden, da diese nicht ausreichend Möglichkeiten haben, um von einem Screenreader gelesen zu werden.

Symbole als SVG's:

Um Icon-Schriftart accessible zu machen, können ebenfalls SVG's benutzt werden. Diese werden dann mit einem Titel versehen um somit von Screenreadern ausgelesen zu werden. Es gibt hierbei wieder verschiedene Varianten wie ein SVG Symbol eingebunden werden kann:

Eigenständiges Symbol mit Bedeutung
Eigenständiges Symbol als Dekoration
Verknüpftes Symbol ohne Text
Verknüpftes Symbol mit statischem Text
Verknüpftes Symbol mit dynamischem Text

See the Pen Accessible SVG Icons by Heather Migliorisi (@hmig) on CodePen.

Zusammenfassung / Checkliste

Eine effektive und gezielte Modifikation von Websiten im Backend ist Teil der "OnPage-Optimierung". Mit Meta-Tags, wie bspw. für Titles & Descriptions der Ober- und Unterseiten (diese sind für die Vollständigkeit von Snippets unerlässlich), werden Websites und Anwendungen für SEO optimiert. Ebenfalls Content-Optimierungen und Seitenanalysen sind Teil der SEO-Tätigkeiten im Backend. Accessible SVG's Checkliste

Weitere wichtige Punkte:

Komplexe Bilder – Ein barrierefreier Graph
Interaktive Bilder
SVGs mit hohem Kontrast
Testing mit Screenreadern

Links zu den Themen:

Zurück