Allein in Deutschland leben rund 7,9 Millionen Menschen mit einer Behinderung. Davon sind rund 155000 Menschen blind.
Quelle: https://www.destatis.de

Sicherlich erschweren nicht alle Behinderungen den Umgang mit dem Web, aber es ist wichtig, dass jeder, der digitale Hilfsmittel und Online-Inhalte erstellt, versteht, wie seine Nutzer auf ihre Bedienoberfläche und Informationen zugreifen.

Barrierefreiheit im Web ist die integrative Praxis, die sicherstellt, dass es keine Barrieren gibt, die die Interaktion mit oder den Zugang zu Websites im World Wide Web für Menschen mit Behinderungen verhindern. Wenn Webseiten richtig gestaltet, entwickelt und bearbeitet werden, haben im Allgemeinen alle Nutzer den gleichen Zugang zu Informationen und Funktionen.

Behinderung definieren

Es ist ein weit verbreitetes Missverständnis, dass es bei der Barrierefreiheit nur um Menschen mit eingeschränktem Sehvermögen geht, aber es gibt ein breites Spektrum von Behinderungen und Situationen, in denen sie zutreffen. Eine Website oder eine mobile Anwendung zugänglich zu machen bedeutet sicherzustellen, dass sie von möglichst vielen Menschen genutzt werden kann.

Dies schließt auch diejenigen mit ein:

  • Blindheit oder Sehbehinderung
  • Taubheit oder Schwerhörigkeit
  • motorische Schwierigkeiten
  • kognitive Beeinträchtigungen oder Lernbehinderungen

Behinderung wird weiter unterteilt in verschiedene „Modi“.

Dauerhafte Behinderung: Dies ist, wenn jemand vollständig behindert ist. Beispiel: blind und, oder taub.

Vorübergehende Invalidität: Wenn eine körperliche oder geistige Behinderung Sie für kurze Zeit daran hindert, Ihrer Aufgabe nachzukommen.

Situation Behinderung: Dieser Begriff wird verwendet, wenn ein Nutzer aufgrund einer Situation, in der er sich befindet, nicht in der Lage ist, seine Aufgaben zu erfüllen. Beispiele dafür sind, wenn eine Internetverbindung zu langsam ist, oder wenn eine Website auf einem Smartphone oder über eine App nicht nutzbar ist (viele Apps haben eingeschränkte Möglichkeiten).

Normen für Barrierefreiheit

Die Web Content Accessibility Guidelines (WCAG 2.1) sind Teil einer Reihe von Richtlinien für die Barrierefreiheit im Web, die von der Web Accessibility Initiative (WAI) des World Wide Web Consortium (W3C), der wichtigsten internationalen Standardisierungsorganisation für das Internet, veröffentlicht wurden.

In den WCAG 2.1-Richtlinien wird dargelegt, wie digitale Dienste und Werkzeuge für alle zugänglich gemacht werden sollen, auch für Benutzer mit Beeinträchtigungen ihrer selbst:

  • Sehkraft – Personen, die stark sehbehindert (blind), sehschwach (sehbehindert) oder farbenblind sind
  • Gehörlose – Taube und Schwerhörige
  • Mobilität – diejenigen, die Schwierigkeiten haben, ein Eingabegerät wie eine Tastatur oder Maus zu nutzen
  • Denken und Verstehen – Menschen mit Legasthenie, Autismus oder Lernschwierigkeiten

Warum Barrierefreiheit im Web wichtig ist

Heute ist das „Web“ zu einer unverzichtbaren Ressource geworden, die so gut wie jeden Aspekt unseres Lebens abdeckt. Um vollen Zugang zu vielen Bereichen zu erhalten, darunter Gesundheitsfürsorge, Bildung, Beschäftigung, Behörden, Online-Einkauf, Unterhaltung und mehr, müssen Sie auf das Web zugreifen können – daher ist es von entscheidender Bedeutung, dass Webseiten für jeden zugänglich sind.

Ein barrierefreies Web kann Menschen mit Behinderungen helfen, sich aktiver zu beteiligen und so die Lebenserfahrung für alle zu verbessern.

Abgesehen von dem höheren Gut gibt es auch die Tatsache, dass das Internet eine der einfachsten Möglichkeiten bietet, mit Menschen mit einer Behinderung zu kommunizieren und Geschäftsbeziehungen zu knüpfen. Beispiele dafür sind Menschen, die physisch nicht in ein Geschäft kommen können oder die keine Standard-Druckerzeugnisse lesen können.

Vorteile einer barrierefreien Webseite für Unternehmen

Es gibt noch weitere Vorteile. Wenn Sie die Regeln befolgen, um eine Webseite barrierefrei zu gestalten, befolgen Sie auch die Best Practices im Zusammenhang mit mobilem Webdesign (z.B. Geschwindigkeit), Usability (d.h. Gewährleistung der Benutzerfreundlichkeit) und SEO (Search engine optimization).

Unternehmen und Websitebetreiber sollten dies zur Kenntnis nehmen.

Die zwei wichtigsten Themen aus der unternehmerischen Perspektive

  • Ein Unternehmen hat das Potenzial, einen ganz neuen Kundenkreis zu erreichen, der von der Konkurrenz möglicherweise völlig übersehen wurde.
  • Ein Unternehmen kann seine Marke aufwerten, indem es dafür sorgt, dass seine Webseite wirklich für alle erreichbar ist.

Wie man Webseiten zugänglich macht

Wir verstehen voll und ganz, was erforderlich ist, um eine Website oder Webanwendung vollständig zugänglich zu machen. Hier sind einige der wichtigsten Punkte:

  • Titel-Tag – beschreiben Sie, worum es auf der Seite geht
  • Sprache – für Bildschirmlesegeräte (Screen Reader)
  • Tastaturnavigation – keine Computermaus
  • Text – Größe, Kontrast und Farbe
  • Fokus – Tastaturelemente mit Registerkarten
  • Formulare – Beschriftungen, Stichwortverzeichnis und Schwerpunktbereich
  • Links – Text und Schwerpunkt
  • Überschriften – Verwendung und Verschachtelung
  • Bilder – alt / Beschreibungstext
  • Tabellen – beschreibende Bildunterschriften
  • Videos – vollständige Bildunterschriften und Abschrift
  • Javascript – unaufdringliche und nicht-js-Alternativen

Fangen wir ganz oben an, beim sehr wichtigen Title Tag

Browser zeigen den Text im (HTML-)Titel-Tag normalerweise nicht im eigentlichen Text auf der Seite an. Stattdessen befindet er sich ganz oben im Browser in einem Tab. Es ist zwar wichtig, dies für die Suchmaschinenoptimierung korrekt zu verwenden, da die Wörter innerhalb des Tags von Google verwendet werden, um zu „verstehen“, worum es auf der Seite geht, aber es ist auch in Bezug auf die Barrierefreiheit sehr wichtig, da es für diejenigen, die Screenreader verwenden, hilfreich ist. Achten Sie darauf, dass jede wichtige Seite Ihrer Website einen guten beschreibenden Titel hat, der den Besuchern sagt, worum es auf der Seite geht.

Sprache

Die Deklaration eines Sprachattributs auf dem HTML-Element ermöglicht es einem Screenreader, den Text mit korrekter Aussprache vorzulesen. html lang=“de“.

Tastatur-Navigation

Um die Zugänglichkeit zu gewährleisten, müssen Sie den Benutzern die Navigation auf der Website nur mit der Tastatur ermöglichen. Navigation, Formulare und andere wichtige interaktive Elemente sollten gründlich getestet werden.

Fügen Sie Skip-Links direkt in den Code nach dem <body> ein, um es Audio-Browser-Benutzern und solchen, die nur mit der Tastatur navigieren, zu ermöglichen, zum Hauptmenü und zum Inhalt zu springen, ohne durch alle Navigationslinks gehen zu müssen.

Text – Format, Kontrast und Farbe

Achten Sie darauf, dass der Text groß genug ist, um gelesen werden zu können, und dass er vor seinem Hintergrund genügend Kontrast aufweist. Farbkombinationen sind wichtig, und es müssen spezifische Farbblindheitstests durchgeführt werden. Es gibt mehrere kostenlose Online-Tools für Kontrast- und Farbtests.

Fokus

Der Fokus bestimmt, wohin Tastaturereignisse auf der Seite zu einem bestimmten Zeitpunkt gehen. Wenn Sie z.B. ein Texteingabefeld fokussieren und mit der Eingabe beginnen, empfängt das Eingabefeld die Tastaturereignisse und zeigt die von Ihnen eingegebenen Zeichen an. Während es den Fokus hat, empfängt es auch eingefügte Eingaben aus der Zwischenablage.

Der Fokus muss sichtbar sein und kann getestet werden, indem man mit der Tabulatortaste durch die Webseite geht und prüft, ob alle Links und interaktiven Elemente einen Rahmen haben, wenn sie aktiv sind.

Formulare

Online-Formulare zugänglich zu machen, kann schwierig sein, und es muss daher besonders darauf geachtet werden:

  • Kann der Nutzer mit der Tastatur logisch zwischen Feldern navigieren?
  • Haben alle Felder eine Beschriftung?
  • Befinden sich die Beschriftungen in der Nähe der Eingabefelder?
  • Ist das fokussierte Element sichtbar?
  • Ist das Formular auf einem Mobiltelefon leicht zugänglich – kein Herauszoomen erforderlich?
  • Kann das Formular ohne die Verwendung einer Maus ausgefüllt werden?

Links

Link-Text sollte beschreibend und logisch sein. Zum Beispiel: „Fallstudie herunterladen“, statt einfach „Hier klicken“. Hat der Link einen Fokusstatus? Siehe Fokus oben.

Überschriften

Überschriften sind strukturierte HTML-Elemente, die Abschnittsüberschriften und Titel beschreiben. Sie werden mit Tags definiert, die von <h1> bis <h6> reichen, wobei <h1> das wichtigste ist. Sowohl Benutzer als auch Suchmaschinen verwenden Überschriften, um die Struktur des Inhalts sinnvoll zu erfassen. Idealerweise sollte nur ein <h1> pro Seite vorhanden sein, wobei die anderen Überschriften-Tags innerhalb der wichtigeren Tags verschachtelt stehen. So zum Beispiel:

<h1> Hauptüberschrift </h1>

<h2> Unterüberschrift 1</h2>

<h3> Unterpunkt, Unterüberschrift 1</h3>

<h2> Unterüberschrift 2</h2>

<h3> Unter, Unterüberschrift 2</h3>

Bilder und die Verwendung von Alt-Tags

Das alt-tag oder alternative (alt) html-Attribut hat eine lange Geschichte. Das erste Mal wurde es verwendet, um es den Benutzern zu ermöglichen, das Herunterladen von Bildern in den Tagen sehr langsamer Download-Geschwindigkeiten (1200bps) abzuschalten. Heute werden Alt-Tags vor allem für die Barrierefreiheit und die Suchmaschinenoptimierung (SEO) verwendet (letzteres, weil es Google hilft zu verstehen, um was für ein Bild es sich handelt). In HTML sieht es wie folgt aus:

<img src =“image-location“ alt=“worum es in dem Bild geht“>

Denken Sie daran, hilfreiche Beschreibungen zu verwenden, denn wenn Sie sich darauf verlassen, einer blinden Person zu erklären, worum es auf einer Seite geht, wird die Verwendung von „Screen Reader“ als Alt-Text keine große Hilfe sein. Viel besser ist es, „Wie ein Screen Reader Menschen mit Sehbehinderungsproblemen hilft“ zu verwenden.

Deskriptive Tags in jeder Tabelle verwenden

Beschriftungen und Scope-Attribute können verwendet werden, um jedem, der einen Screen Reader verwendet, zu helfen, zu verstehen, welche Daten die Tabelle oder der Abschnitt enthält.

<table>

<caption>In dieser Tabelle geht es um das Thema Widgets</caption>

<tr>

<th>Farbe</th>

<th>Größe</th>

<th scope=”col”>Farbe</th>

<th scope=”col”>Länge</th>

</tr>

<tr>

<td>Rot</td>

<td>20 cm</td>

</tr>

</table>

Durch Hinzufügen des „Scope“-Elements, wie in der Tabelle dargestellt, werden Screen Reader nicht einfach eine Reihe von Tabellenzellen herunterrasseln, ohne den erforderlichen Kontext anzugeben.

Abschrift für Videos und Podcasts / Audiomedien verwenden

Auch wenn es Ihnen nicht darum geht, Ihre Webseite zugänglich zu machen, empfiehlt es sich, immer Untertitel für Videos zu verwenden, da diese nicht nur den Nutzern helfen, wenn sie sich an einem Ort befinden, an dem sie den Ton ausschalten oder leise stellen müssen, sondern auch bei der Suchmaschinenoptimierung helfen (Google kann keine Videos lesen, aber sie können die Abschrift lesen).

Dasselbe für Podcasts und andere Audioelemente zu tun, wird in gleicher Weise helfen.

Die Verwendung von Abschriften auf allen Ihren Medienelementen hilft allen Nutzern, nicht nur behinderten Nutzern, und kann auch Ihrem Unternehmen helfen, in den Suchmaschinen besser platziert zu werden.

JavaScript

Der primäre Zweck der Seite sollte nicht durch die Verwendung von JavaScript eingeschränkt werden, d.h. wenn JavaScript deaktiviert ist, ermöglicht das HTML allein dem Nutzer immer noch den Zugang zu den gewünschten Informationen oder Funktionen.

Tools für die Barrierefreiheit im Web

Der beste Weg, um zu überprüfen, ob Ihre Website zugänglich ist, besteht darin, einige der vielen Tools zu verwenden, die heute im Internet frei verfügbar sind.

Seien Sie sich bewusst, dass diese „automatischen“ Testtools zwar nützlich sind, dass aber immer ein gewisses Maß an manueller Überprüfung und Tests durchgeführt werden sollte.

Zwei unserer Favoriten sind:

Accessibility Insights for Web – Dies führt vollständige Website-Prüfungen durch und bietet Ihnen eine menschliche Bewertung, der Sie folgen können, um Dinge, die nicht automatisiert werden können, manuell zu testen bzw. zu überprüfen.

Dynomapper – DYNO Mapper ist ein Sitemap-Generator, der die Web-Zugänglichkeit von Websites und Online-Anwendungen überprüft. Der DYNO-Mapper umfasst auch die inhaltliche Erfassung und Prüfung sowie die tägliche Verfolgung von Keywords. Die Ergebnisse werden in visuellen Sitemaps angezeigt, um eine einfache und effiziente Suche und Planung von Projekten zu ermöglichen.

Fazit

Wir hoffen, dass dieser Artikel über die Bedeutung des barrierefreien Zugangs zu Webseiten hilfreich ist. Bitte setzen Sie sich mit uns in Verbindung, wenn Sie möchten, dass wir Ihre aktuelle Webseite überprüfen oder besprechen, wie wir Ihnen dabei helfen können, Ihre nächste Webseite mit den aktuellen Vorgaben zur Barrierefreiheit in Einklang zu bringen.