Barrierefreiheit in der Webentwicklung – fünf gängige Fallstricke in der Webentwicklung

Einfache Regeln und Grundsätze sorgen für minimalen Nacharbeitungsaufwand

Wenn du Entwickler:in von Webanwendungen bist, kannst du einige Dinge von Anfang an beachten, um dir hohe Nacharbeitungsaufwände zu sparen.

Einige dieser Regeln und Grundsätze sind:

• Tastaturnavigierbarkeit: Alle Funktionen und Links müssen mit der Tastatur zugänglich sein. Benutzer:innen sollten in der Lage sein, alle Funktionen der Website ohne eine Maus zu navigieren.
• Fokussierbare interaktive Elemente: Jedes interaktive Element auf der Website sollte fokussierbar sein, damit Benutzer:innen sich durch die Seite navigieren können.
• Fokus ist erkennbar: Der Fokus sollte deutlich erkennbar sein, damit Benutzer:innen wissen, welches Element gerade ausgewählt ist.
• Gute Bedienung mit Screenreader: Eine gute Bedienung mit Screenreadern ist unerlässlich, damit beeinträchtigte Benutzer:innen die Website verstehen können.
• Standard-Browserelemente: Standard-Browserelemente wie Buttons, Links und Formulare bieten von Haus aus eine gewisse Barrierefreiheit durch die Unterstützung von Tastaturnavigation und Screenreadern.

Fünf gängige Fallstricke

Diese fünf Dinge solltest du als Entwickler:in unbedingt beachten, um eine barrierefreie Webseite zu erstellen:

1. Semantisch falsche Elemente

Semantisch falsche Elemente sind HTML-Elemente, die nicht inhaltlich korrekt oder semantisch angemessen sind, um die Struktur und Bedeutung einer Webseite zu definieren.
‍

2. Fehlende Beschreibungstexte

Ein fehlender Beschreibungstext bezieht sich auf die Abwesenheit von beschreibendem Text, der ein bestimmtes Element auf einer Webseite erklärt oder beschreibt. Beschreibungstexte werden normalerweise von Bildschirmlesegeräten und anderen assistiven Technologien verwendet, um den Benutzer:innen mit Sehbehinderungen oder anderen Beeinträchtigungen zu helfen, die Inhalte der Webseite zu verstehen.

3. Nicht sinnvolle Labels

Nicht sinnvolle Labels beinhalten Texte, die für den Benutzer:innen keinen wirklichen Nutzen oder keine Bedeutung haben. Sie können als beschreibende Texte für Elemente auf einer Webseite vorhanden sein, aber wenn sie keine relevante Information enthalten, sind sie für den Nutzenden wertlos und möglicherweise sogar verwirrend.

4. Fehlende oder falsche Alternativtexte

Alternativtexte, auch bekannt als Alt-Tags oder Alt-Attribute, sind beschreibende Texte, die für Bilder, Videos und andere Nicht-Text-Inhalte auf einer Webseite verwendet werden. Sie kommen zum Einsatz, wenn ein Bild beispielsweise aufgrund einer langsamen Verbindung nicht angezeigt werden kann oder Nutzende einen Screenreader verwenden.

5. Fehlerhafte Überschriftenhierarchie

Die Überschriftenhierarchie ist eine Struktur von Überschriften auf einer Webseite, die dazu beiträgt, den Inhalt der Webseite besser zu organisieren und zu strukturieren. Für die optimale Umsetzung gibt es einige Regeln:

1. Es sollte immer nur eine <h1>-Überschrift pro Seite vorhanden sein.
2. Es sollte immer von <h1> ausgegangen werden, danach<h2> und so weiter.
3. Level sollten nicht übersprungen werden.
4. Die Schriftgröße hat keinen Einfluss auf die Hierarchie einer Überschrift. Diese wird allein durch ihren Tag (z.B. <h1>) festgelegt.
5. Bei Überschriften immer semantisch korrekte Elemente <h1> bis <h6> verwenden.

Tools zur Umsetzung von Barrierefreiheit

Web Accessibility Evaluation Tool (WAVE Tool)

Das Web Accessibility Evaluation Tool (auch bekannt als WAVE Tool) ist ein Online-Tool, das dazu dient, die Barrierefreiheit von Webseiten zu evaluieren und zu verbessern.

Das Tool ist kostenlos für jeden verfügbar und kann verwendet werden, um eine Vielzahl von Barrierefreiheitsproblemen auf einer Webseite zu identifizieren, darunter fehlende Alternativtexte für Bilder, nicht-sinnvolle Beschreibungstexte für Links, fehlende Überschriftenhierarchie, mangelnde Farbkontraste, unzureichende Tastaturnavigation und vieles mehr.

Benutzer:innen gibt das Tool eine visuelle Darstellung der Webseiteninhalte und markiert Bereiche, die Probleme aufweisen. Der Nutzende kann dann auf die markierten Bereiche klicken, um weitere Informationen zu erhalten und Vorschläge zur Behebung der Probleme zu erhalten.

AChecker

AChecker ist ein Online-Tool zur Überprüfung der Barrierefreiheit von Webseiten. Es ist ein kostenloses Werkzeug, das von der Adaptive Technology Resource Centre der University of Toronto entwickelt wurde. AChecker verwendet die WCAG 2.0 Richtlinien und kann auch auf die WCAG 2.1 und Section 508 Richtlinien konfiguriert werden.

AChecker überprüft eine Webseite auf mehrere Aspekte der Barrierefreiheit, darunter:

• Farbkontrastprüfung: AChecker überprüft die Farbkontraste zwischen Hintergrundfarben und Texten, um sicherzustellen, dass sie für Menschen mit Sehbehinderungen ausreichend sichtbar sind.
• Alternativtexte: AChecker überprüft, ob alle Bilder auf der Webseite einen Alternativtext haben, um sicherzustellen, dass auch beeinträchtigte Benutzer:innen die Inhalte der Bilder verstehen können.
• Tastaturzugänglichkeit: AChecker überprüft, ob alle Interaktionselemente auf der Webseite mit der Tastatur zugänglich sind.
• Tabellenstruktur: AChecker überprüft, ob Tabellen auf der Webseite eine klare Struktur haben, um sicherzustellen, dass sie von Benutzer:innen mit Screenreadern richtig interpretiert werden können.

AChecker generiert Berichte, die die erkannten Barrieren auf der Webseite aufzeigen und Empfehlungen zur Behebung dieser Barrieren geben. Die Berichte sind in verschiedenen Formaten verfügbar, darunter HTML, CSV, PDF und JSON.

Fazit: Barrierefreiheit in der Webentwicklung

Barrierefreiheit in der Webentwicklung ist eine wichtige Überlegung, um sicherzustellen, dass alle Benutzer:innen auf eine Website zugreifen und sie nutzen können. Es gibt einfache Regeln und Grundsätze, die Entwickler:innen befolgen können, um eine barrierefreie Website zu erstellen, und die Verwendung von Standard-Browserelementen kann den Entwicklungsprozess erleichtern.

‍