In diesem Blogartikel erkläre die Grundlagen der Barrierefreiheit bei Internetseiten.
Begrifflichkeiten
Barrierefreiheit und Accessibility bedeuten im Grunde dasselbe, sie beschreiben das Konzept, dass etwas für alle Menschen zugänglich und nutzbar sein sollte, unabhängig von möglichen Einschränkungen oder Behinderungen. Der Unterschied liegt hauptsächlich in der Sprache:
Barrierefreiheit:
-
- Dies ist der deutsche Begriff.
- Er beschreibt, dass keine Hindernisse oder Barrieren bestehen, die Menschen davon abhalten, eine Webseite, ein Gebäude oder einen Dienst zu nutzen.
- Beispiel: Eine Webseite ist barrierefrei, wenn sie für Menschen mit Sehbehinderungen oder motorischen Einschränkungen zugänglich ist.
Accessibility:
- Dies ist der englische Begriff.
- Er wird oft im internationalen Kontext und in technischen Dokumentationen verwendet.
- Beispiel: In der Webentwicklung sprechen wir von „Web Accessibility“, wenn wir sicherstellen, dass Webseiten für alle Benutzer, einschließlich Menschen mit Behinderungen, zugänglich sind.
Barrierefreies Webdesign – Was ist das?
Barrierefreies Webdesign bedeutet, Webseiten so zu gestalten, dass sie für alle Menschen zugänglich und nutzbar sind, einschließlich Menschen mit Behinderungen. Das Ziel ist es, Hindernisse, die sogenannten Barrieren, zu minimieren und eine inklusive digitale Umgebung zu schaffen. Dabei werden verschiedene Techniken und Standards angewendet, um sicherzustellen, dass Menschen mit Sehbehinderungen, Hörbehinderungen, motorischen Einschränkungen oder kognitiven Behinderungen die Inhalte einer Webseite verstehen und nutzen können. Senioren, die aufgrund ihres fortgeschrittenen Alters ebenfalls körperliche Einschränkungen haben können, profitieren ebenso von barrierefreiem Webdesign.
Richtlinien für Barrierefreiheit bei Webseiten
Der Sinn von Richtlinien ist, dafür zu sorgen, dass Menschen mit unterschiedlichen Behinderungen und anderen körperlichen Einschränkungen eine Webseite bedienen können. Eine Richtlinie hat mehrere Prüfschritte die alle erfüllt sein müssen, damit eine Webseite für alle Menschen bedienbar und wahrnehmbar ist.
Für Europa gibt es die Richtlinie EN 301 549. Die Prüfschritte in Englisch gibt es in dieser PDF-Datei: EN 301 549 V3.2.1 (2021-03) . Um Webseiten auf Barrierefreiheit zu nutze ich die Prüfschritte auf der Webseite bitvtest: BITV-Test / EN 301 549 (Web) Prüfschritte .
Es gibt internationale Richtlinien, die Webentwickler dabei unterstützen, barrierefreie Webseiten zu erstellen. Die wichtigsten sind die Web Content Accessibility Guidelines (WCAG). Diese Richtlinien sind in drei Stufen unterteilt: A, AA und AAA. Jede Stufe hat bestimmte Anforderungen:
- Stufe A: Grundlegende Barrierefreiheit, die alle Webseiten erfüllen sollten.
- Stufe AA: Bietet ein höheres Maß an Barrierefreiheit und wird für die meisten Webseiten empfohlen.
- Stufe AAA: Das höchste Maß an Barrierefreiheit, aber oft schwer vollständig umzusetzen.
Die WCAG umfassen Prinzipien wie wahrnehmbare, bedienbare, verständliche und robuste Inhalte. Die aktuelle Version der WCAG ist 2.2. Die Prüfschritte der WCAG 2.2 gibt es auch auf der Webseite bitvtest: BIK BITV-Test + WCAG 2.2 (Web) Prüfschritte .
Verwendung von Screenreader
Screenreader lesen Text auf einem Bildschirm oder Display laut vor oder in übersetzen ihn in Braille. Sie sind besonders nützlich für blinde und sehbehinderte Menschen. Eine barrierefreie Webseite muss so gestaltet sein, dass Screenreader den Inhalt korrekt erfassen und wiedergeben können. Dies bedeutet unter anderem:
-Semantische HTML-Tags verwenden: Tags wie `<header>`, `<nav>`, `<main>` und `<footer>` helfen Screenreadern, die Struktur der Seite zu verstehen.
– Alt-Texte für Bilder: Beschreibende Texte für Bilder (mit dem `alt`-Attribut) ermöglichen es Screenreadern, den Inhalt der Bilder zu erklären.
Ich teste Webseiten mit dem Screenreader NVDA . Er kann auf dieser Internetseite kostenlos heruntergeladen werden: NV Access | Download NVDA .
In Betriebssystemen gibt es folgende Screenreader:
| Screenreader | Betriebssystem |
|---|---|
| Sprachausgabe | Windows |
| Orca | Linux |
| Voice Over | MacOS |
| Talkback | Android |
| Voice Over | iOS |
Warum ist Tastaturbedienbarkeit wichtig?
Die Tastaturbedienbarkeit ist wichtig, weil viele Menschen keine Computermaus verwenden können. Dies betrifft insbesondere blinde Menschen und Menschen mit einer starken Sehbehinderung. Eine barrierefreie Webseite muss vollständig mit der Tastatur bedienbar sein. Das bedeutet:
- Alle Bedienelemente müssen per Tabulatortaste erreichbar sein
- Wichtige Funktionen sollten per Tastaturkürzel ausführbar sein
ARIA-Rollen und -Attribute
ARIA, ausgeschrieben Accessible Rich Internet Applications, ist eine Reihe von Attributen, die entwickelt wurden, um die Zugänglichkeit von dynamischen Inhalten und Benutzeroberflächen zu verbessern. ARIA-Rollen und -Attribute ergänzen HTML und helfen
Damit Sie verstehen, wann der Einsatz von ARIA sinnvoll ist, mache ich ein Beispiel. Aus Gründen der Optik möchten Sie eine Schaltfläche mit einem Div-Tag erstellen. Screenreader und andere assistive Technologien können jedoch nicht automatisch erkennen, dass dieses <div> wie ein Button funktioniert. Hier kommt ARIA ins Spiel.
Folgende ARIA-Attribute gibt es:
| Attribut | Beschreibung | Beispiel |
|---|---|---|
| role | Definiert die Rolle eines Elements, damit Screenreader es korrekt interpretieren. | <div role=“button“>Klicken Sie hier</div> |
| aria-label | Gibt eine beschreibende Textalternative für ein Element. | <button aria-label=“Suche starten“>Suche</button> |
| aria-hidden | Verbirgt ein Element vor Screenreadern. | <div aria-hidden=“true“>Dieses Element wird ignoriert</div> |
| aria-live | Informiert Screenreader über dynamische Änderungen im Inhalt. | <div aria-live=“polite“>Inhalt wird aktualisiert…</div> |
| aria-expanded | Zeigt an, ob ein Element, wie ein Menü, erweitert oder eingeklappt ist. | <button aria-expanded=“false“>Menü anzeigen</button> |
| aria-controls | Gibt an, welches Element von einem anderen Element kontrolliert wird. | <button aria-controls=“menü“>Menü öffnen</button><div id=“menü“>Menüinhalt</div> |
| aria-describedby | Gibt die ID eines Elements an, das zusätzliche Informationen bereitstellt. | <input aria-describedby=“info“><div id=“info“>Zusätzliche Informationen</div> |
| aria-invalid | Zeigt an, dass der Wert eines Formularfelds ungültig ist. | <input aria-invalid=“true“> |
| aria-required | Gibt an, dass ein Formularfeld ausgefüllt werden muss. | <input aria-required=“true“> |
| aria-haspopup | Zeigt an, dass ein Element ein Popup-Menü oder Dialogfeld öffnet. | <button aria-haspopup=“true“>Optionen</button> |
| aria-multiselectable | Gibt an, ob mehrere Elemente in einem Widget, wie einer Liste, gleichzeitig ausgewählt werden können. | <ul aria-multiselectable=“true“><li>Option 1</li><li>Option 2</li></ul> |
Mit Aria-Rollen und Attributen kann dafür gesorgt werden, dass der Div-Container vom Screenreader als Schaltfläche wahrgenommen wird:
<div role="button" aria-label="Formular absenden" onclick="submitForm()" tabindex="0">Klicken Sie hier</div>
Erklärung des HTML-Codes:
- role=“button“: Dieses Attribut weist dem <div> die Rolle einer Schaltfläche zu. Der Screenreader wird dieses Element nun als Schaltfläche vorlesen.
- aria-label=“Formular absenden“: Dieses Attribut gibt dem Element eine beschreibende Textalternative. Der Screenreader wird „Formular absenden“ vorlesen, was den Zweck der Schaltfläche klarer macht.
- tabindex=“0″: Dieses Attribut macht das <div>-Element per Tastatur fokussierbar, sodass Nutzer mit der Tab-Taste darauf zugreifen können.
Best Practices für barrierefreies Webdesign
Best Practices ist englisch und kann übersetzt werden mit „Bewährte Methoden“ oder „Gute Vorgehensweisen“ . Um eine Webseite barrierefrei zu gestalten, sollten folgende Best Practices beachtet werden:
- Verwendung semantischer HTML: Verwende semantische Tags wie `<article>`, `<section>` und `<aside>`, um die Struktur der Webseite klar darzustellen.
- Tastaturbedienbarkeit: Stellen Sie sicher, dass die ganze Internetseite ohne Computermaus, also nur per Tastatur bedienbar ist.
- Alt-Texte für Bilder: Stelle sicher, dass alle Bilder beschreibende Alt-Texte haben.
- Kontrastreiche Farben: Verwende Farbkombinationen, die einen hohen Kontrast bieten, um Texte und wichtige Elemente gut sichtbar zu machen.
- Untertitel und Transkripte für Videos: Biete Untertitel für Videos, zum Beispiel YouTube-Videos, an und stelle Transkripte für Audioinhalte zur Verfügung.
- Fokus-Indikatoren: Mache sichtbare Fokus-Indikatoren für Tastaturnavigation deutlich.
- Formulare richtig beschriften: Verwende Labels und beschreibende Texte für Formulareingabefelder.
- Korrekte Syntax: Es wird überprüft ob HTML korrekt eingesetzt wird mit dem W3C-Validator
Durch die Umsetzung dieser Best Practices kannst du sicherstellen, dass deine Webseite für alle Benutzer zugänglich und benutzerfreundlich ist.
Nützliche Tools für digitale Barrierefreiheit
Tools sind Hilfsmittel oder Werkzeuge, die uns bei verschiedenen Aufgaben unterstützen. Im Bereich der digitalen Barrierefreiheit sind Tools spezielle Programme oder Anwendungen, die uns helfen, Webseiten und digitale Inhalte so zu gestalten, dass sie für alle Menschen zugänglich und nutzbar sind.
Tool 1: Colour Contrast Analyzer (CCA)
Mit dem Colour Contrast Analyser können Sie überprüfen ob ein Farbkontrast zwischen Hintergrund-und Schriftfarbe barrierefrei ist.
Der Colour Contrast Analyser kann auf dieser Webseite Colour Contrast Analyzer (CCA) kostenlos heruntergeladen werden.
In folgendem YouTube-Video erkläre ich wie Sie mit dem Colour Contrast Analyser den Farbkontrast bei Webseiten und Software überprüfen können.
Tool 2: W3C-Validator
Mit dem W3C-Validator können Sie die korrekte Syntax einer Webseite überprüfen. Der W3C-Validator kann auf dieser Webseite kostenlos genutzt werden:
Wie Sie mit dem W3C Validator eine Webseite auf korrekte Syntax überprüfen können, erkläre ich in diesem Video:
Schlussbemerkung
Mit der Barrierefreiheit auf Webseiten können Sie dafür sorgen, dass auch Menschen mit Behinderungen und anderen körperlichen Einschränkungen sich auf Ihrer Webseite wohl fühlen.
Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .
Ein Gedanke zu „HTML lernen leicht gemacht: Barrierefreiheit (Accessibility)“