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.

Durch eine gute Struktur der Internetseite können assistive Technologien Inhalte besser zuordnen.
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 beim Navigieren auf der Seite.
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:

  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.

Das Optimieren von Buttons und Links ist sowohl wichtig für die Web-Accessibility als auch für SEO.
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:

  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
Um zu verhindern, dass Besucher*innen sofort wieder abspringen, ist eine schnelle Ladegeschwindigkeit der Internetseite das A und O.
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*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/

Werden Bilder und SVGs mit Beschreibungstexten versehen, können Nutzer*innen mit Screenreadern verstehen, was dargestellt wird.
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.

Durch die Sitemap erhalten Nutzer*innen mit Beeinträchtigungen eine Übersicht aller Seiten.
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 bestimmt, welcher Titel bei Google und im Tab angezeigt wird.
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.

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?

Jetzt Kontakt aufnehmen

Einkauf als Zusammenarbeit
Schulterblick November 2022

Einkauf als Zusammenarbeit

Die Berührungsgruppe der Lieferant*innen wurde im ersten GWÖ-Workshop genau beleuchtet.

Artikel lesen
arbiträr x visuellverstehen
Schulterblick November 2022

arbiträr x visuellverstehen

Eins plus eins ist eins: Seit November sind Per und Lars von der arbiträr UG Teil von visuellverstehen und bereichern unser Team mit viel Know-how in der Kreation und Entwicklung digitaler Produkte wie Apps und Websites.

Artikel lesen
Gemeinwohl-Bilanzierung – Neustart
Schulterblick Oktober 2022

Gemeinwohl-Bilanzierung – Neustart

Unsere erste Gemeinwohl-Bilanzierung für 2019–2020 haben wir mit erfreulichen 405 Punkten abgeschlossen. Nach zwei Jahren ist es Zeit für ein Update: Wir freuen uns auf den Start der Re-Bilanzierung.

Artikel lesen