Digi-Touchpoints
Überblickswissen  |
Überblickswissen
Lesedauer: 10 Min

Digitale Barrierefreiheit von Websites für eine nahtlose User Experience

Manuel Schmidt

Die Barrierefreiheit von Websites ist ein entscheidendes Element für eine nahtlose User Experience (UX). Es ermöglicht Menschen mit Behinderungen den Zugang zu digitalen Inhalten und Dienstleistungen. Eine barrierefreie Website stellt sicher, dass  Nutzer:innen problemlos auf Informationen und Funktionen zugreifen können, unabhängig von ihren Fähigkeiten oder technischen Einschränkungen.

Das bedeutet, dass auch Menschen mit Behinderungen, wie zum Beispiel Seh-, Hör- oder motorische Einschränkungen, die Website problemlos nutzen können.

Digitale Barrierefreiheit Overview

Inhaltsverzeichnis

Warum ist Barrierefreiheit so verdammt wichtig?

Naja, vorrangig  ist es natürlich eine Frage der Gleichberechtigung. Alle Menschen sollten  das Recht und die Möglichkeit haben, digitale Angebote wahrnehmen zu können.

Gerade in heutigen Zeiten, in denen sich so vieles in eine digitale Zukunft bewegt, ist es inakzeptabel, Inhalte nicht für alle Menschen gleichermaßen zugänglich zu gestalten. Zudem gilt hier auch, dass die erleichterte Zugänglichkeit digitaler Inhalte meist die Benutzerfreundlichkeit für alle erhöht, auch Menschen, die beispielsweise nur temporär eingeschränkt sind.


Des Weiteren hat Barrierefreiheit auch wirtschaftliche Vorteile. Unternehmen, die barrierefreie Websites anbieten, erreichen ein größeres Publikum und können so ihren Umsatz steigern.

Die rechtlichen Anforderungen und Verpflichtungen für die Zugänglichkeit von Websites

In Deutschland gibt es verschiedene Gesetze und Verordnungen, die die Zugänglichkeit von Websites regeln. Dazu gehören unter anderem:

  • das Behindertengleichstellungsgesetz (BGG)
  • die Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (Barrierefreie-Informationstechnik-Verordnung – BITV 2.0)
  • die Verordnung über die Barrierefreiheit von Informations- und Telekommunikationsdiensten (Barrierefreiheitsverordnung – BfITv)

Die BITV 2.0 und die BfITv gelten für alle öffentlichen Stellen, also zum Beispiel für Behörden, Schulen und Universitäten. Sie schreiben vor, dass Websites und andere Informations- und Telekommunikationsdienste barrierefrei sein müssen.

Besonders Wichtig: die WCAG 2.1 Richtlinien für barrierefreie Webinhalte. Was hat es damit auf sich?

Die WCAG 2.1-Richtlinien sind internationale Richtlinien für barrierefreie Webinhalte. Sie wurden vom World Wide Web Consortium (W3C) entwickelt und werden von vielen Ländern und Organisationen als Grundlage für die Gesetzgebung und die Selbstverpflichtung von Unternehmen verwendet.

Die WCAG 2.1-Richtlinien umfassen 13 Anforderungen, die in 3 Stufen unterteilt sind:

  • Stufe A: Grundlegende Anforderungen
  • Stufe AA: Mittelhohe Anforderungen
  • Stufe AAA: Hohe Anforderungen

Stufe A: Grundlegende Anforderungen - unser Overview

Die Stufe A der WCAG 2.1-Richtlinien umfasst die grundlegenden Anforderungen für barrierefreie Webinhalte. Diese Anforderungen sind für alle Websites und Anwendungen relevant, unabhängig von ihrer Größe oder Komplexität.

Hier sind einige Beispiele für die Anforderungen der Stufe A:

  • Bilder und andere visuelle Elemente müssen mit einem ALT-Tag versehen sein, damit sie auch von Screenreadern gelesen werden können.
  • Der Text auf einer Website muss in einem ausreichend großen Schriftgrad und mit ausreichendem Kontrast zum Hintergrund dargestellt werden. Verwende also eine Schriftgröße von mindestens 16 Pixeln für den Haupttext deiner Website.
  • Alle Navigationselemente müssen eindeutig identifizierbar und bedienbar sein. Stelle also sicher, dass alles mit Tastaturtasten bedienbar ist.
  • Der Kontrast zwischen Text und Hintergrund sollte von mindestens 4,5:1 betragen, um eine gute Sichtbarkeit für Jedermann und Jederfrau zu gewährleisten.

     

Die Umsetzung der Anforderungen der Stufe A ist in der Regel relativ einfach und kann mit relativ geringem Aufwand erreicht werden.

Stufe AA: Mittelhohe Anforderungen - unser Overview

Diese Anforderungen gehen über die grundlegenden Anforderungen der Stufe A hinaus und bieten einen höheren Grad an Zugänglichkeit für Nutzer:innen mit Behinderungen.

Hier sind einige Beispiele für die Anforderungen der Stufe AA:

  • Tabellen müssen so strukturiert sein, dass sie auch von Screenreadern gelesen und verstanden werden können.
    👉 Strukturiere Tabellen daher so, dass sie mithilfe von Spalten- und Zeilenüberschriften leicht verständlich sind.
  • Audio- und Videoinhalte müssen mit Untertiteln oder Audiodeskriptionen versehen sein, damit sie auch von Menschen mit Hörbehinderungen verstanden werden können.
    👉 Füge ihnen also Untertitel hinzu, die den Dialog und andere relevante Informationen enthalten.
  • Interaktive Inhalte müssen so gestaltet sein, dass sie auch von Menschen mit motorischen Einschränkungen bedient werden können.
    👉 Verwende große Schaltflächen und andere Eingabefelder, die auch mit eingeschränkter Fingerfertigkeit bedient werden können.

Die Einhaltung der Anforderungen der Stufe AA ist wichtig, um sicherzustellen, dass auch Nutzer:innen mit Behinderungen, die komplexere Inhalte nutzen möchten, eine Website nutzen können.

Stufe AAA: Hohe Anforderungen - unser Overview

Diese Anforderungen gehen über die mittelhohen Anforderungen der Stufe AA hinaus und bieten den höchsten Grad an Zugänglichkeit für Nutzer:innen mit Behinderungen.

Hier sind einige Beispiele für die Anforderungen der Stufe AAA:

  • Bilder und andere visuelle Elemente müssen auch ohne ALT-Tags verständlich sein.
  • Audio- und Videoinhalte müssen auch ohne Untertitel oder Audiodeskriptionen verständlich sein.
  • Interaktive Inhalte müssen auch für Menschen mit kognitiven Einschränkungen bedienbar sein.

Die Einhaltung der Anforderungen der Stufe AAA ist wichtig, um sicherzustellen, dass auch Nutzer:innen mit schweren Behinderungen eine Website nutzen können.

Hier sind noch ein paar konkrete Beispiele für Maßnahmen, die du ergreifen kannst, um die Stufe AAA der WCAG 2.1-Richtlinien zu erfüllen:

  • Verwende alternative Textformate für Bilder und andere visuelle Elemente, wie zum Beispiel Audiodeskriptionen oder Kurzbeschreibungen.
  • Füge Audiodeskriptionen zu Audio- und Videoinhalten hinzu, die den Dialog, die Handlung und andere relevante Informationen enthalten.
  • Verwende klare und einfache Sprache und Strukturen, die auch von Menschen mit kognitiven Einschränkungen verstanden werden können.

Barrierefreiheit und SEO am Beispiel des ALT-Tags

Ein Beispiel für eine Maßnahme zur Barrierefreiheit ist der ALT-Tag. Der ALT-Tag ist ein kurzer Text, der einem Bild oder einem anderen visuellen Element zugeordnet wird. Er wird von Screenreadern vorgelesen und hilft Menschen mit Sehbehinderungen, die Inhalte einer Website zu verstehen.

Gut geschriebene ALT-Tags sind wichtig für die SEO einer Website. Sie können dazu beitragen, dass die Website in den Suchergebnissen besser gerankt wird. Das liegt daran, dass Suchmaschinen den ALT-Tag als Hinweis darauf verwenden, worum es auf einer Seite geht.

Die Auswirkungen der Barrierefreiheit auf die Optimierung der Conversion

Eine Studie der kanadischen Regierung hat gezeigt, dass barrierefreie Websites zu einer höheren Conversion Rate führen können. Die Studie hat ergeben, dass barrierefreie Websites zu einer um 12 % höheren Conversion Rate bei Online-Shops führen können. Die Gründe dafür sind vielfältig. Zum einen können barrierefreie Websites dazu beitragen, dass Nutzer:innen sich wohler fühlen und sich länger auf der Website aufhalten. Zum anderen können sie dazu beitragen, dass Nutzer:innen die gewünschte Handlung ausführen, zum Beispiel ein Produkt kaufen oder einen Service in Anspruch nehmen.

Barrierefreiheit auf Websites 2 » tractionwise

Webentwicklung und Web Accessibility sollten Hand in Hand gehen

Barrierefreiheit sollte von Anfang an bei der Entwicklung einer Website berücksichtigt werden. Das bedeutet, dass die Anforderungen der WCAG 2.1-Richtlinien von Anfang an in die Planung und Umsetzung der Website einfließen sollten. Deshalb ist es auch so wichtig von Anfang an eines Webprojektes UX Expert:innen mit hinzuzuziehen. 

Wenn Barrierefreiheit erst nachträglich berücksichtigt wird, kann das zu zusätzlichen Kosten und Aufwand führen, nicht nur bei der Analyse des Status Quos zu Barrierefreiheit, sondern allen voran bei der Umsetzung der ausgearbeiteten Maßnahmen.

Kostenlose und hilfreiche Tools, zur Analyse der Website Content Accessbility

Um die Barrierefreiheit einer Website zu überprüfen, gibt es verschiedene Tools. Einige davon sind kostenpflichtig, andere aber auch kostenlos erhältlich. Hier eine Liste für dich:

  • WAVE: WAVE ist ein kostenloses Tool der Web Accessibility Initiative (WAI). Es analysiert eine Website anhand der WCAG 2.1-Richtlinien und liefert detaillierte Berichte zu möglichen Barrieren.
  • Axe: Axe ist ein weiteres kostenloses Tool, das die WCAG 2.1-Richtlinien abdeckt. Es ist etwas fortgeschrittener als WAVE und bietet detailliertere Berichte.
  • Color Contrast Checker: Color Contrast Checker ist ein Tool, das die Kontraste zwischen Text und Hintergrund überprüft. Dies ist wichtig für Menschen mit Sehbehinderungen.
  • WebAIM Contrast Checker: WebAIM Contrast Checker ist ein weiteres Tool, das die Kontraste zwischen Text und Hintergrund überprüft. Es bietet auch eine Vorschau, wie der Text für Menschen mit Sehbehinderungen aussieht.
  • WAVE Focus Checker: WAVE Focus Checker hilft dir dabei, sicherzustellen, dass alle Elemente einer Website für Screenreader zugänglich sind.

Welches Tool das richtige für dich ist, hängt von deinen Bedürfnissen ab. Wenn du gerade erst mit der Barrierefreiheit deiner Website beginnst, ist WAVE eine gute Option. Wenn du eine detailliertere Analyse deiner Website durchführen möchtest, ist Axe vielleicht das richtige Tool für dich.

Anzeige

tractionwise Logo

Du brauchst dringend Hilfe bei deiner barrierefreien Website?

Here we go!

Fazit und der Blick in die Zukunft

Fazit mit Blick in die Zukunft: Digitale Barrierefreiheit für eine nahtlose User Experience

Digitale Barrierefreiheit ist nicht nur ethisch wichtig, sondern auch entscheidend für eine inklusive User Experience. Gesetzliche Vorgaben wie das Behindertengleichstellungsgesetz (BGG) und die WCAG 2.1-Richtlinien setzen klare Standards für die Zugänglichkeit von Websites, die im Sinne von allen Nutzer:innen auch eingehalten werden sollten.

Zusätzlich profitieren Unternehmen, die diese Standards frühzeitig integrieren, von einer größeren Zielgruppe und wirtschaftlichen Vorteilen durch eine höhere Conversion Rate.

Die Verbindung von Barrierefreiheit und SEO, wie im Beispiel des ALT-Tags, zeigt, dass Zugänglichkeit auch die Sichtbarkeit in Suchergebnissen verbessern kann.

Die Bedeutung der digitalen Barrierefreiheit wird zukünftig weiter zunehmen, da wir uns in eine so digitale Zukunft bewegen. Ressourcen, wie unser Top-10 Umsetzungstipps-Lead-Magnet oder andere Web Accessibility Tools können dir dabei helfen, Barrierefreiheit von Anfang an zu gewährleisten und somit für alle zugänglich zu machen.

Kurz gesagt: Barrierefreiheit ist nicht nur gesetzlich vorgeschrieben, sondern auch entscheidend für eine inklusive und erfolgreiche digitale Zukunft.

Manuel Schmidt
Manuel Schmidt

MD tractionwise | Strategy, UX & Creative