Barrierefreie Website: In 7 Schritten zur besseren Accessibility und SEO-Performance

7 Schritte sollst du gehen

Folgende Punkte wirken sich positiv auf die digitale Barrierefreiheit aus und können gleichzeitig zu einem besseren Ranking der Website führen, was im Idealfall wiederum die Zielgruppe erweitert und den Traffic der Seite steigert. Eine echte Win-Win-Situation.

1. Saubere Struktur der Website

Eine saubere HTML-Struktur und eine korrekte Semantik sind die Grundlage für eine gut performende und inklusive Website. Denn ist eine Seite sinnvoll strukturiert, können Suchmaschinen einfach verstehen, welche Art von Informationen und Inhalten vorhanden sind und wie diese verarbeitet werden müssen.

Dies gilt jedoch nicht nur für die Suchmaschinen-Crawler – also Programme, die Websites durchsuchen und indexieren. Auch assistive Technologien wie Screenreader, die etwa Nutzer*innen mit einer Sehschwäche den Inhalt der Internetseite vorlesen, sind auf eine gute Strukturierung von Internetseiten angewiesen. Ein Beispiel: Je besser Inhalte aufbereitet sind, desto leichter kann der Screenreader zwischen einer Liste und normalem Fließtext unterscheiden.

2. Klar formulierte Überschriften in korrekter Reihenfolge

Auch bei den Überschriften sollte auf Struktur und Semantik geachtet werden. Denn hier passieren häufig Fehler – obwohl aus technischer Sicht nur zwei Regeln befolgt werden müssen:

1. Auf einer Seite muss und darf nur eine H1 definiert werden.
2. Alle Überschriften müssen in der richtigen Reihenfolge gesetzt werden. So darf beispielsweise einer H2 keine H4 folgen, ohne dass vorher auch eine H3 definiert wurde.

Die Suchmaschine versucht aus den Überschriften und den untergeordneten Inhalten einen sachlichen Kontext zu erschaffen, zu dem die Seite gerankt werden kann – also in den Suchergebnissen einer Suchmaschine platziert wird.

Überschriften als Navigationshilfe

Die Bedeutung der Überschriften für assistive Technologien ist etwas anders. So können Nutzer*innen beispielsweise zwischen den Überschriften hin und her navigieren und somit direkt zu bestimmten Inhalten einer Website springen. Auch hier sind inhaltlich wertvolle und hierarchisch korrekt ausgezeichnete Überschriften also erstrebenswert.

3. Korrekte Auszeichnung von Links und Buttons

Sowohl aus SEO-Sicht als auch im Hinblick auf die Web-Accessibility lässt sich viel anhand von Buttons und Links optimieren. Die folgende Liste fasst die wichtigsten Punkte zusammen:

1. Korrekte Unterscheidung zwischen einem Button (<button>) und einem Link (<a>)
2. Inhaltlich wertvolle Link- und Button-Texte
3. Links und Buttons sollten klickbar sein und dies auch visuell implizieren
4. Visuelle Hervorhebung, wenn mit „Tab“ durch die Seite navigiert wird
5. Links und Buttons sollten ein aria-label oder einen title aufweisen

4. Ladegeschwindigkeit

Sobald eine Website zu lange lädt, springen Besucher*innen ab. Dies erzeugt negative Nutzer*innensignale, die sich entsprechend verschlechternd auf das Ranking einer Website auswirken können. Die wichtigsten Faktoren für eine schnelle Ladegeschwindigkeit sind unter anderem gutes Caching und das korrekte Dimensionieren von Bildern in modernen Formaten. Außerdem sollten keine unnötigen Scripte oder CSS-Dateien geladen werden, die auf der Seite gar nicht benötigt werden.

Best Practice

Desweiteren ist zu empfehlen, dass der Server das http/2 Protokoll nutzen sollte. Dies kann ganz einfach getestet werden unter: http2.pro

5. Bilder und SVGs

Das Optimieren von Bildern ist nicht nur hinsichtlich der Ladegeschwindigkeit und SEO ein wichtiges Thema, sondern auch für die Barrierefreiheit einer Website. So sollten Bilder und SVGs für Personen mit einer Einschränkung des Sehvermögens optimiert werden, um keine unnötige Hürde in der Nutzung darzustellen.

Wenn Worte sagen, was Bilder nicht können

Die wohl wichtigsten Hilfsmittel dafür sind das Alt-Attribut bei Bildern und der Title-Tag bei SVGs. Dort wird eine kurze Beschreibung hinterlegt. Dies hilft nicht nur Nutzer*innen mit Screenreadern zu verstehen, was dargestellt wird. Auch Suchmaschinen können den Kontext leichter begreifen und den Zusammenhang der Inhalte besser einordnen.

Rein dekorative Bilder und SVGs können und sollten mit Aria-Attributen vor dem Screenreader versteckt werden, da sie für Personen mit einer Einschränkung des Sehvermögens keinen Mehrwert liefern.

6. Sitemap

Auch dieser Punkt ist sowohl für SEO als auch für die Accessibility von Bedeutung. Durch die Sitemap können Suchmaschinen nämlich dabei unterstützt werden, alle vorhandenen Seiten zu indexieren. Erst dann kann eine Seite in der Google-Suche gefunden werden.

Einfache Übersicht

Neben der Indexierung hilft die Sitemap Nutzer*innen mit Beeinträchtigungen dabei, eine Übersicht aller Seiten zu erlangen und zwischen ihnen hin und her zu navigieren. So muss sich niemand mit der Tastatur durch komplexe Navigationsstrukturen kämpfen.

7. Seiten-Titel

Der Seiten-Titel wird durch den Meta-Title gesetzt und definiert, welcher Titel in der Google-Suche sowie oben im Tab angezeigt wird. 

Ein sinnvoller Titel ist als offizieller Rankingfaktor nicht nur für die Suchmaschinenoptimierung essentiell, sondern auch für die Orientierung von Screenreader-Nutzer*innen. Denn so können offene Tabs schnell voneinander unterschieden und die gesuchte Seite ausgewählt werden.