Blog
Fachartikel
Barrierefreie Website: In 7 Schritten zur besseren Accessibility und SEO-Performance
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.
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:
- 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.
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
4. Ladegeschwindigkeit
Sobald eine Website zu lange lädt, springen Besucher*innen ab. Dies erzeugt negative Nutzer*innsignale, 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: https://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.
Mehr Accessibility und SEO-Performance für Ihre Website
Sie möchten wissen, wo Ihre Website im Bereich SEO noch Verbesserungspotenzial aufweist oder haben Fragen zum Thema Web-Accessibility?
