Teil 2 - Digitale Barrierefreiheit in der Praxis


Grundlagen und Prozesse der digitalen Barrierefreiheit

Scroll down icon

Nach unten scrollen

Standards für digitale Barrierefreiheit wie WCAG können einschüchternd wirken, da sie von Natur aus technisch sind und auf Menschen ohne Erfahrung im Bereich der Barrierefreiheit ausgesprochen komplex wirken können. Glücklicherweise lassen sich einige der wichtigsten Methoden für Barrierefreiheit im Web einfach über Ihr Content-Management-System (CMS) umsetzen. Indem Sie sich diesen Bereichen widmen, können Sie die Nutzerfreundlichkeit Ihrer Website verbessern und ein robustes Fundament schaffen, auf dem Sie weitere Verbesserungen der digitalen Barrierefreiheit aufbauen können:

Icon with a big letter T and text lines

Seitentitel

Icon with H1 written

Überschriften

Icon representing a graphic

Grafiken

Icon of a link

Links

Icon of a table

Tabellen und Formulare

Icon of a semantic markup

Semantische (definierte) Auszeichnungen

Es kann jedoch schwierig sein, den richtigen Einstieg zu finden, wenn Sie noch keine Erfahrung mit der Umsetzung von Barrierefreiheit im Web haben. Wo fangen Sie an und welche Prioritäten setzen Sie zu Beginn? Für den Anfang empfehlen wir Ihnen, die folgenden sechs Best Practices zur Barrierefreiheit von Websites zu beachten.

1. Geben Sie Ihren Webseiten aussagekräftige Titel

Das erste, worauf ein Screenreader auf einer Webseite stößt, ist der Seitentitel. Der Titel ist für Benutzer von Screenreadern ein wichtiges Seitenelement, da er sie darüber informiert, welchen Inhalt sie auf der Seite erwarten können. Indem Sie Ihren Webseiten aussagekräftige Titel geben, erfüllen Sie Erfolgskriterium 2.4.2 der WCAG.

Ein zusätzlicher Vorteil ist, dass aussagekräftige Seitentitel die SEO Ihrer Seite verbessern. Verwenden Sie ein automatisiertes Tool, um Seiten mit fehlenden, zu langen oder zu kurzen Titeln schnell zu erkennen.

2. Bieten Sie Unterstützung für Nutzer, die keine Computermaus verwenden können

Stellen Sie als erstes Element auf all Ihren Webseiten einen „Springen zu“-Link oder einen Mechanismus zum Umgehen von Inhaltsblöcken zur Verfügung. So können Benutzer Inhaltsbereiche überspringen, die sich auf jeder Seite wiederholen, zum Beispiel Kopfzeilen oder globale Menüs. Durch den Einsatz von „Springen zu“-Links können Tastaturnutzer direkt zu bestimmten Inhaltsbereichen auf der Seite springen, etwa zur Navigation, zum Hauptinhalt oder zur Fußzeile. Andernfalls müssten sie der Reihe nach von links nach rechts durch die Seite navigieren und dabei jedes Element passieren, während sie sich vor und zurück bewegen. Dies kann mühsam und frustrierend sein und dazu führen, dass Benutzer Ihre Website schnell wieder verlassen, was negative Auswirkungen auf Ihre Absprungrate hat.

Sie können den „Springen zu“-Link auf der Seite visuell ausblenden, wenn Sie möchten. Er muss jedoch sichtbar sein, wenn er den Fokus erhält (z. B. hervorgehoben werden, wenn ein Benutzer die Tab-Taste drückt). Indem Sie Unterstützung für Benutzer bieten, die keine Computermaus verwenden können, erfüllen Sie Erfolgskriterium 2.4.1 der WCAG.

3. Fügen Sie Alt-Text zu relevanten Bildern hinzu

Prüfen Sie auf Ihrer Hauptseite und Ihren Vorlagenseiten, ob Ihre Bilder eine Beschreibung erhalten sollten, die auch als Alternativtext oder häufiger als Alt-Text bezeichnet wird. Der Code zum Hinzufügen von Alternativtext (alt="") muss immer für jedes Bild vorhanden sein. Wenn das Bild jedoch nur dekorativ ist, kann die Alt-Text-Beschreibung innerhalb der Anführungszeichen leer bleiben. Wenn das Bild Informationen vermittelt, die Sie ohne Betrachtung des Bildes nicht erhalten würden, sollten diese Informationen in die Alt-Text-Beschreibung aufgenommen werden. Wenn das Bild als Link dient, sollten Sie das Ziel beschreiben, zu dem der Link führt.

Indem Sie Alternativtexte zu Ihren Bildern hinzufügen, erfüllen Sie einen wesentlichen Teil von Erfolgskriterium 1.1.1 der WCAG.

4. Stellen Sie die Barrierefreiheit von Multimedia-Inhalten Ihrer Website sicher

Multimedia-Inhalte Ihrer Website, wie etwa Videos, PDF-Dateien, Audiodateien und Infografiken können schnell zu einer Barriere für Menschen mit Behinderungen werden, wenn Sie ihnen keinen gleichberechtigten Zugang zu diesen Inhalten bieten. Gemäß WCAG-Standard müssen Filme, Audioclips und Animationen mit barrierefreien und leicht zugänglichen Optionen wie Transkripten, Untertiteln oder Audiodeskriptionen versehen werden. Außerdem sollten Sie darauf achten, dass Ihre multimedialen Inhalte nicht zu einer Tastaturfalle werden: Dazu kommt es, wenn Benutzer, die ausschließlich mit der Tastatur auf Ihrer Website navigieren, zum Beispiel nach Ansicht eines Videos nicht mehr in der Lage sind, die Navigation fortzusetzen.

Indem Sie diese Punkte berücksichtigen, erfüllen Sie die WCAG-Erfolgskriterien 1.2, 1.2.1, 1.2.2 und 1.2.4.

5. Sorgen Sie für angemessenen Farbkontrast

Die Auswahl von Farben, Branding und visuellen Elementen kann in Bezug auf digitale Barrierefreiheit als Herausforderung erscheinen. Es ist jedoch möglich, eine ansprechende, farbige Website zu erstellen, die sich für verschiedene Arten von Sehbedingungen eignet. Ein guter Ausgangspunkt ist die Nutzung eines Farbkontrastprüfers, um sicherzustellen, dass ausreichender Farbkontrast zwischen dem Text und dem Hintergrund Ihrer Website vorhanden ist.

Indem Sie dies in Ihren Marken- und Stilrichtlinien berücksichtigen, erfüllen Sie WCAG-Erfolgskriterium 1.4.3.

6. Vernachlässigen Sie nicht das Weberlebnis für Nutzer von Mobilgeräten

Eines der wichtigsten Prinzipien bei der Optimierung der Barrierefreiheit ist es, sicherzustellen, dass Ihre Website plattformkompatibel, aber auch Technologie-agnostisch ist, dass sie also auf mehreren Plattformen funktionsfähig und nutzbar ist. Stellen Sie zum Beispiel sicher, dass Ihre Website responsiv ist, sich also an unterschiedliche Geräte und Bildschirmgrößen anpasst, ohne die Nutzererfahrung zu beeinträchtigen.

Indem Sie die Anpassungsfähigkeit Ihrer Website sicherstellen, sodass sie auch auf mobilen Geräten keine Informationen oder strukturellen Merkmale verliert, erfüllen Sie WCAG-Erfolgskriterium 1.3.

Berücksichtigung der kognitiven Barrierefreiheit im Web

Durch die Einhaltung guter Design-, Inhalts- und Programmiermethoden können Sie die Nutzererfahrung für viele Menschen mit unterschiedlichen kognitiven Fähigkeiten und Behinderungen verbessern. Indem Sie zum Beispiel visuelle Stile ebenso berücksichtigen wie die Gliederung von Inhalten, verbessern Sie die Nutzererfahrung für Menschen mit kognitiven Einschränkungen. Konkrete Beispiele hierfür sind:

  • Verwendung der richtigen Formatierung für Überschriften und Listen, zum Beispiel die Verwendung von H1 für eine Überschrift statt bloßer Fettschrift-Formatierung
  • Mehr Freiraum in Ihrem Design
  • Unterteilung von Inhalten in kürzere, übersichtlichere Abschnitte, um ein Überfliegen zu ermöglichen
  • Vereinfachung von Formularen durch Aufteilung in einzelne, aufeinanderfolgende Schritte
  • Vorgabe einer logischen Lesereihenfolge für Webseiten und Dokumente
  • Nutzung einheitlicher Speicherorte für Seitenelemente und einheitlicher Einsatz von Schriften und Farben
  • Möglichkeit zur reinen Tastatursteuerung für Personen, die ohne Maus durch Webseiten und Dokumente navigieren
  • Bereitstellung von Inhalten in verschiedenen Formaten, zum Beispiel Abschriften für Podcasts