UX: Wie SEO die Barrierefreiheit unterstützt [Teil 1]

Stichwort Barrierefreiheitsstärkungs-Gesetz: Ab Mitte 2025 sind etliche Website-Betreiber*innen gesetzlich verpflichtet, ihre Online-Auftritte für Menschen mit Behinderung zu optimieren. Wenn ihr eure SEO-Hausaufgaben gemacht habt, erfüllt ihr bereits einige der Kriterien. Wie sich Suchmaschinen-Optimierung (Search Engine Optimization, SEO) und User Experience (UX) im Bereich der Barrierefreiheit positiv überschneiden, schildere ich euch in diesem Zweiteiler.

Quelle: Pixabay

Laut Bundesregierung leben in Deutschland rund 13 Millionen Menschen mit einer Beeinträchtigung – rund acht Millionen von ihnen sind schwerbehindert. 

Die häufigsten Arten von Behinderungen sind:

• Sehbeeinträchtigung und Blindheit
• Hörbeeinträchtigung und Gehörlosigkeit
• Motorische Beeinträchtigungen
• Kognitive Beeinträchtigungen und Lernbehinderungen
• Photosensibilität ("Sonnenallergie")
• Mehrfachbeeinträchtigungen

Was bedeutet das für die Gestaltung von Online-Auftritten? Wikipedia sagt: "Barrierefreies Internet sind Web-Angebote, die von allen Nutzern unabhängig von ihren Einschränkungen oder technischen Möglichkeiten uneingeschränkt (barrierefrei) genutzt werden können. [...] Internet ist hier eine umgangssprachliche Gleichsetzung mit World Wide Web." [Anm. eures Bloggers: Tatsächlich umfasst der Begriff "Internet" mehr als nur das World Wide Web, unter anderem auch E-Mail sowie diverse Netzwerkprotokolle].

Ob ein Online-Auftritt barrierefrei ist oder nicht, hat bald eine gesetzliche Tragweite: 

Sommer 2025: Das Barrierefreiheitsstärkungs-Gesetz tritt in Kraft

Das juristische Fachportal lto.de berichtet: 

"Ab dem 28. Juni 2025 müssen privatwirtschaftliche Anbieter ihre [...] Webseiten, die dem Barrierefreiheitsstärkungsgesetz (BFSG) unterfallen, barrierefrei anbieten. Mithin so, dass sich Einschränkungen oder Behinderungen beim Sehen, Hören, Bewegen oder Verarbeiten von Informationen nicht negativ auswirken. [...]. 

Damit sind die meisten im geschäftlichen Verkehr mit Verbrauchern genutzten Websites von Unternehmern, insbesondere Online-Shops, über die Produkte und Dienstleistungen an Verbraucher verkauft werden, ebenso erfasst wie das Angebot von Online-Terminbuchungsmasken oder die Vertragsanbahnung und der Vertragsschluss über die firmeneigene Website. [...]. 

Bei Nichtbeachtung drohen nicht nur behördliche Sanktionen (insbesondere Bußgelder von bis zu 100.000 EUR, Untersagungsverfügungen, Verpflichtungen zum Produktrückruf), sondern auch Klagen von Verbrauchern und hierzu berechtigten Verbänden sowie Abmahnungen von Mitbewerbern."

Die gute Nachricht: Wenn ihr eure SEO-Hausaufgaben gemacht habt, erfüllt ihr bereits einige der geforderten Kriterien des Barrierefreiheitsstärkungs-Gesetzes.

SEO und UX gingen schon immer Hand in Hand. Hier kommt mein Überblick:

UX: Was sind die "Web Content Accessibility Guidelines" (WCAG)?

Die "Web Content Accessibility Guidelines" (WCAG, "Richtlinien für barrierefreie Webinhalte") sind ein internationaler Standard: Er regelt die barrierefreie Gestaltung von Internet-Angeboten.

POUR (perceivable, operable, understandable, robust) – so lautet die WCAG-Abkürzung für die vier Grundprinzipien barrierefreier Online-Auftritte:

1. Perceivable (wahrnehmbar): Funktionen und Inhalte der Website sind so dargestellt, dass alle User*innen sie wahrnehmen können.

Heißt in der Praxis:

• Alle Bilder und Grafiken auf der Website besitzen Alternativ-Texte (Alt-Texte).
• Die Dauer bei zeitgesteuerten Medien auf der Website ist veränderbar.
• Die Textgrößen sind anpassbar.
• Der Kontrast für Vorder- und Hintergrund ist ausreichend.
• Videos besitzen Untertitel.
  
  

2. Operable (bedienbar): Alle User*innen können mit den Schnittstellen-Komponenten und Navigations-Elementen der Website interagieren.

Heißt in der Praxis:

• Der Online-Auftritt ist auch über die Tastatur bedienbar.
• Zeitbegrenzungen für einzelne Interaktionsschritte sind ausreichend.
• Es gibt keine intensiven optischen Reize auf den Seiten (Blinken, Blitzen).
  
  

3. Understandable (verständlich): User*innen verstehen die Informationen auf den Webseiten.

Heißt in der Praxis:

• Die Sprache ist klar und einfach.
• Fachbegriffe und ungewöhnliche Abkürzungen werden erläutert.
  
  

4. Robust: Die Inhalte der Website sind kompatibel mit den genutzten Programmen (z. B. Browser) und assistiven (unterstützenden) Technologien (z. B. Screenreader, also Tools, die Inhalte von Webseiten vorlesen).

So unterstützt SEO die Barrierefreiheit

➤ Heading-Tags sind für User*innen unsichtbare HTML-Auszeichnungen von Überschriften. Sie gliedern Überschriften-Arten entlang einer Hierarchie von <h1> (sehr wichtig) bis <h6> (weniger wichtig). 

Am Beispiel des Online-Auftritts der Bundesregierung sieht die Heading-Tag-Nutzung so aus (für eine größere Ansicht in das Bild klicken):

Heading-Tag-Nutzung auf einer Webseite: <h1> in Rot, <h2> in Grün.

Seit jeher achtet Google darauf, was in Heading-Tags geschrieben steht: Deshalb muss vor allem in <h1>-Überschriften stets das Keyword erscheinen, auf welches ihr die Seite optimieren wollt. Die Strukturierung entlang von Heading-Tags ist ebenfalls Best Practice in der Barrierefreiheit: Sie erleichtert es sehbehinderten Nutzer*innen, via Screenreader die inhaltliche Struktur der Seite zu verstehen.

➤ Selbstbeschreibende Link-Texte: Auch das ist SEO-Best-Practice. Statt "mehr" oder "jetzt lesen" sollte am Link-Text ablesbar sein, wohin der Verweis führt. Das hilft gleichermaßen Google, als auch menschlichen User*innen, zu verstehen, welches inhaltliche Ziel ein Link hat.

➤ Alt-Texte bei Bildern: "Alt" steht für "Alternativ". Alt-Texte liegen (für das menschliche Auge unsichtbar) hinter Bildern und beschreiben kurz, was auf dem Bild zu sehen ist. Google nutzt Alt-Texte, um Bilder im thematischen Kontext der Webseite einordnen zu können. Sehbehinderten Menschen helfen Alt-Texte, sich per Screenreader den Inhalt eines Bildes beschreiben zu lassen.

➤ Semantisches HTML: Hier wird es nochmal richtig spannend – und umfangreich. Deshalb an dieser Stelle ein Cut ... 

... was es mit semantischem HTML auf sich hat, schildere ich im zweiten Teil von "UX: Wie SEO die Barrierefreiheit unterstützt".

Bis dann!

Quelle:

• barrierefreiheit-dienstekonsolidierung.bund.de: Web Content Accessibility Guidelines 2.1

Link-Tipps:

• Barrierefreier Online-Auftritt: Wer ihn ab 2025 bieten muss
• Online-Content barrierefrei gestalten: Die 9-Punkte-Checkliste
• Inklusion & Barrierefreiheit: "Es ist noch ein weiter Weg, aber es wird besser!"