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

17. November 2022

Web-Accessibility – also Barrierefreiheit im Web – ermöglicht es Menschen mit körperlichen und/oder mentalen Einschränkungen, das Internet möglichst barrierearm zu nutzen. Doch um eine Website barrierefrei zu gestalten, müssen viele Faktoren berücksichtigt werden. Es gibt allerdings ein paar kleine Stellschrauben, die eine Website nicht nur inklusiver machen, sondern auch der Suchmaschinenoptimierung (SEO) dienen.

Animierte Grafik der Google-Startseite, wobei das Wort Google durch das Wort Suuche ausgetauscht ist und der Cursor im Texteingabefeld blinkt. — Um eine gute Web-Accessibility zu gewährleisten, sollten verschiedene Punkte berücksichtigt werden.

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.

Eine gut strukturierte Website hilft assistiven Technologien, Inhalte besser zuzuordnen.

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.

Klar formulierte Überschriften helfen Nutzer*innen bei der Navigation auf der Internetseite.

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:

Auf einer Seite muss und darf nur eine H1 definiert werden.
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.

Auch die Darstellung von Links und Buttons ist ein wichtiger Faktor für sowohl Suchmaschinenoptimierung als auch Web-Accessibility.

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:

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

Um eine schnelle Ladegeschwindigkeit der Internetseite sicherzustellen, können verschiedene Faktoren optimiert werden.

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

Werden Bilder und SVGs mit Beschreibungstexten versehen, können Screenreader und Suchmaschinen die Inhalte besser zuordnen.

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.

Die Sitemap hat Bedeutung für die Indexierung und Übersicht einer Website.

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.

Der Seiten-Titel ist ausschlaggebend für das Googleranking und hilft Screenreadern beim Navigieren.

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.