Mein letzter Artikel für diesen Newsletter ist schon eine Weile her. Und das, obwohl ich doch versprochen habe, über alle 4 Grundprinzipien der Web Content Accessibility Guidelines zu schreiben (kurz: WCAG).
Umso erfreulicher ist es, dass das Thema Barrierefreiheit auch immer mehr bei uns SEOs ankommt. So gab es auf der letzten Campixx direkt zwei Vorträge zur Barrierefreiheit:
-
Nadine Wolff mit einer allgemeinen Einführung in das Thema. Schwerpunkte waren hier die gute Vereinbarkeit von SEO und Barrierefreiheit sowie Farbnutzung auf Webseiten.
-
Maike Schultze-Rhonhof mit einem Vortrag über die Grundprinzipien der Barrierefreiheit. Wobei ihr Fokus auf den ersten 3 lag (Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit).
Maikes Cliffhanger nutze ich daher jetzt sehr gern und gehe heute auf Grundprinzip 4 "Robust" ein.
Was bedeutet "Robust"?
"Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies."
("Inhalte müssen so robust sein, dass sie von zahlreichen User-Agents inkl. Assistiven Technologien interpretiert werden können.")
3 Erfolgskriterien von "Robust"
Nun soll man ja aber nicht robust mit robust erklären. Daher ist es sinnvoll, direkt einen Blick auf die Erfolgskriterien zu werfen:
Parsing
Beim Parsing ging es vor allem um korrekte Syntax. Also: Sind alle erforderlichen Start- und End-Tags vorhanden? Sind Spezifikationen korrekt verschachtelt? Da assistive Technologien aber mittlerweile HTML nicht mehr direkt parsen müssen, gibt es das Problem nicht mehr. Entsprechend wurde das Erfolgskriterium in den WCAG 2.2. entfernt.
Name, Role, Value
Im Gegensatz zum Parsing von HTML sind assistive Technologien aber darauf angewiesen, dass Komponenten korrekte Namen, Rollen und Werte haben. Deswegen heißt es im 2. Erfolgskriterium von "Robust":
"For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies."
(In deutsch übersetzte Richtlinien von Aktion Mensch e.V.: "Für alle Bestandteile der Benutzerschnittstelle (einschließlich, aber nicht beschränkt auf: Formularelemente, Links und durch Skripte generierte Komponenten) können Name und Rolle durch Software bestimmt werden; Zustände, Eigenschaften und Werte, die vom Benutzer festgelegt werden können, können durch Software festgelegt sein; und die Benachrichtigung über Änderungen an diesen Elementen steht den Benutzeragenten zur Verfügung, einschließlich assistierender Techniken.")
Dieses Erfolgskriterium zielt darauf ab, dass assistive Technologien wie Screenreader semantische Informationen erhalten. Native HTML-Elemente, wie <button>, <ul>, <nav> etc., sind von Haus aus semantisch. Andere wie <div> oder <span> sind es hingegen nicht.
Mithilfe von WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Application) (Link zu developer.mozilla.org) kannst Du die fehlende Semantik aber ergänzen.
Falls Du dich jetzt fragst, was das mit SEO zu tun hat, habe ich ein paar Gegenfragen für Dich:
-
Haben die SVGs auf Deiner Website immer einen alternativen Text?
-
Haben Deine Links immer einen Ankertext? Auch Deine Social Icons?
Angenommen, Du verlinkst zum Beispiel im Footer Deine Social Media Profile mit einem SVG-Icon:
<a href=\"[Beispiel-URL]\">
<svg [...]>[...]</svg>
</a>
Das ist nicht barrierefrei. Um das zu verbessern, kannst Du zum Beispiel <title> als erstes Child-Element in Deinem SVG ergänzen. Damit dieser dann auch Deinem SVG zugeordnet wird, musst Du im <svg>-Tag noch role="img" einfügen.
<a href=\"[Beispiel-URL]\">
<svg [...] role=\"img\">[...]
<title>[...]</title>
</svg>
</a>
Das ist ein Lösungsweg. Es gibt aber auch andere Varianten, um SVGs barrierefrei zu gestalten. Mehr dazu kannst Du zum Beispiel bei css-tricks.com nachlesen.
Status Messages
Das Role-Attribut kannst Du auch nutzen, um das Erfolgskriterium "Status Messages" zu erfüllen. Das wird dann wichtig, wenn sich auf Deiner Webseite Inhalte verändern, die nicht direkt Fokus bekommen. Das kann beispielsweise der Fall sein, wenn ein User etwas über Deine interne Suchseite sucht und dann "18 Treffer gefunden" angezeigt wird.
Wie schon in meinen letzten Artikeln folgt auch hier nochmal ein kurzer Disclaimer: Das oben Beschriebene sind alles nur Beispiele und nicht zwingend der richtige Lösungsweg für Deine Webseite.
Und auch, wenn ich dieses Mal alle Erfolgskriterien von "Robust" beschrieben habe, sind diese doch genauso umfangreich wie die anderen, bei denen ich nur auf ausgewählte Kriterien eingegangen bin.
Falls Du Dich also bis jetzt noch nicht mit Barrierefreiheit befasst hast, dann empfehle ich Dir loszulegen. Schließlich ist es nur noch knapp 1 Jahr, bis Webseiten barrierefrei sein müssen (Ausnahmen ausgenommen). Ab 28. Juni 2025 wird das Barrierefreiheitsstärkungsgesetz (BFSG) angewendet.
Wenn Du Dich einlesen möchtest, dann habe ich hier auch nochmal meine vorherigen Artikel für Dich: