Grundsätze für die Gestaltung barrierefreier Webseiten

Sie möchten Menschen mit Behinderungen auch ermöglichen, Ihre Webseite zu nutzen? Aber Sie wissen noch nicht genau, worauf Sie dabei zu achten haben, und was „barrierefrei“ bedeutet? Kurz gesagt: Das ist, wenn Inhalte von Webseiten auch Menschen zugänglich gemacht werden, deren Sinne (wie Sehen und Hören) oder Mobilität eingeschränkt sind. Wichtig ist, bei der Entwicklung barrierefreier Webangebote darauf zu achten, dass einzelne Nutzergruppen weder bevorzugt noch benachteiligt werden.

Anforderungen an die Zugänglichkeit mit ansprechendem Webdesign erzielen

Browser zur Nutzung von barrierefreien Webseiten bieten individuelle Einstellungen wie z. B. für Schriftgrößen, Kontrast, Farbschema oder die Zoomfunktion. Und das alles, ohne damit nennenswert ein attraktives Webdesign zu beeinträchtigen. Damit ermöglichen etwa sorgfältig mit einem wertigen WordPress-Theme erstellte Webseiten grundsätzlich schon eine deutlich optimalere Zugänglichkeit als beispielsweise nicht barrierefreie PDF-Dokumente.

Welche Gesetze und Prinzipien gelten, und was BITV und WCAG bedeutet

Besondere Bedeutung bei der Erstellung barrierefreier Webseiten kommt nach dem Bundesbehindertengleichstellungsgesetz (BGG) die Barrierefreie-Informationstechnik-Verordnung 2.0 (BITV) zu. Damit soll eine uneingeschränkte barrierefreie Nutzung der Informations- und Kommunikationstechnik ermöglicht werden. Sie gilt auch über die Webseiten hinaus für mobile Anwendungen, Intranets, eingebundene PDF-Dokumente, digitale Verwaltungsabläufe sowie grafische Programmoberflächen.

Die BITV orientiert sich an den Prioritätsstufen des internationalen Standards „Web Content Accessibility Guidelines“ 1.0 (WCAG). Sie regelt, wie Inhalte auf Webseiten für Menschen mit Behinderung bereitzustellen sind. Dabei sind folgende elementare Prinzipien zu gewährleisten:

  • Wahrnehmbar (z. B. visuelle Inhalte brauchen eine Textalternative)
  • Bedienbar (insbesondere für eine Tastaturbedienung)
  • Verständlich (im Hinblick auf eine gute Lesbarkeit)
  • Robust (Kompatibilität)

Schnellcheck zur Überprüfung der Barrierefreiheit von Webseiten

So können Sie rasch erkennen, ob sich Webseiten nur eingeschränkt für Menschen mit Behinderungen nutzen lassen:

  • Formularelemente: Schlechte Lesbarkeit von Texten (bei kleiner Schriftgröße und geringem Kontrast) z. B. für Menschen mit Seheinschränkungen
  • Audiobeiträge und Videos: Fehlende Untertitel, denn diese werden von schwerhörigen Personen und Gehörlosen benötigt, um verstanden zu werden.
  • Bilder, Formularelemente und Schaltflächen: Sie sind nur mit alternativen Bildbeschreibungen auch für Blinde oder Menschen mit starken Seheinschränkungen nutzbar.
  • Grafische Buttons und Menüelemente: Selbst wenn Alternativtexte hinterlegt sind, sind sie nur sehr mühsam barrierefrei zu nutzen.

Grundsätze, Standards und Prinzipien barrierefreier Webseiten

Das Ziel zur Entwicklung barrierefreier Webseiten ist ein klares, sauberes und leicht navigierbares Design. Barrierefreie Webseiten sollten sich einfach über die Tastatur mit der Tabulatur-Taste navigieren lassen (engl. Tabbing). Zudem ist es hilfreich, mehrere Methoden zur Interaktion mit Interface-Komponenten anzubieten. Weitere Grundsätze sind:

Anpassungsfähigkeit

Nutzenden sollten leicht handhabende Bedienelemente zur Navigation und individuellen Einstellung (der Schriftgrößen und Kontraste sowie des Farbschemas) sowie eine Zoomfunktion angeboten werden.

Navigierfähigkeit

Benutzerinnen und Benutzer von Webseiten sollten einfach zu gesuchten Inhalten gelangen und bestimmen können, wo sie sich befinden.

Klarheit

Grundlage der Gestaltung sollte eine übersichtliche Gliederung und eindeutige Lesereihenfolge der Webseite sein. Abbildungen, Grafiken und Diagramme sollten sich leicht den jeweiligen Inhalten zuordnen lassen.

Eindeutigkeit

Screenreader oder andere Assistive Technologien können Blinden nicht in Texten Unterstreichungen, Fettungen, kursive Schriften und Farben vermitteln. Deshalb sollten solche Auszeichnungen nicht verwendet werden, um Inhalte hervorzuheben. Auch im Layout sollten Farben vermieden werden, um Orientierung zu vermitteln.

Schrift und Kontraste

Eine gute Lesbarkeit kann nur über eine genügend große Schrift bei großem Zeilenabstand und deutlichem Kontrast zwischen Text und Hintergrund gewährleistet werden. Ungünstig sind z. B. Texte auf unruhigen Bildern oder grundsätzlich der Rot-Grün-Kontrast. Es ist zudem darauf zu achten, dass Bilder kontrastreich sind.

Strukturelemente

Strukturelemente helfen Menschen mit Sehbehinderung, sich auf Webseiten zu orientieren. Alle textlichen Elemente, ob Überschriften, Fließtexte oder Listen, müssen sogenannte semantische erhalten. Das heißt, es sind Standard-HTML-Bezeichnungen zu nutzen, die deren Inhalt beschreiben. Beispielsweise „H1“, „H2“ ff. für Überschriften, „P“ für normale Absätze/Fließtexte und „LI“ für Aufzählungen.

Bilder und Grafiken

Grafik- oder Bildinformationen können für Menschen mit starker Seheinschränkung oder Blinde nur verständlich gemacht werden, wenn alternative Beschreibungen (markiert durch „alt“) vorhanden sind. Diese können dann z. B. über eine Sprachausgabe mit Screenreadern vorgelesen werden. Übrigens haben Bildbeschreibungen auch einen (positiven) Einfluss auf das Ranking bei Suchmaschinen.

Schaltflächen und Links

Was auf Computern einfach zu bedienen ist, kann selbst für Menschen ohne Behinderungen auf Smartphones und Tablets schwierig werden: Buttons und Links sollten, auch optimiert für die mobile Nutzung, mit Fingern leicht anwählbar sein.

Formulare

Eintragungen müssen in Formularfelder gut vorgenommen werden können. Dazu gehören neben einer sinnvollen Gliederung genügend großen Schriften und Formularelemente. Nur wenn Nutzende mit der Maus oder dem Tabulator zum Textfeld oder z. B. Kontrollkästchen mit dem „Label”-Element gelangen, ist das Formular barrierefrei.

Sprache

Mit einer leicht verständlichen Sprache werden auch jene Menschen erreicht, welche die Sprache (noch) nicht so gut beherrschen oder solche mit kognitiven Einschränkungen. Beim Erstellen der Texte sollte auf einen einfachen Satzbau und kurze Sätze geachtet sowie möglichst auf Fremdwörter und Abkürzungen verzichtet werden.

Dialog

Nutzenden sollten Kontaktmöglichkeiten angeboten werden. So können z. B. Mängel der Barrierefreiheit gemeldet, Fragen gestellt oder nicht barrierefrei zugängliche Informationen angefordert werden.

Erklärung zur Barrierefreiheit

Barrierefreie Webseiten müssen in einer Erklärung umfassende Auskünfte zur Barrierefreiheit der Angebote enthalten. Sie müssen über einen deutlichen Hinweis auf der Startseite zugänglich und bei mobilen Anwendungen zusätzlich herunterladbar sein sowie regelmäßig aktualisiert werden. Zudem sollten dort Zugänglichkeitsprobleme ausgelistet werden, die zurzeit behoben werden.

Besondere Features barrierefreier Webseiten

Um eine hohe User-Experience zu bieten und zugleich die Anforderungen an die Zugänglichkeit barrierefreier Webseiten zu optimieren, bieten sich beispielsweise folgende Angebote und Funktionen an:

  • Zugänglichkeits-Hilfe/Accessibility-Help: Tastatur- und Screenreader-User finden unter diesem unmittelbar zu findenden Navigationspunkt rasch alle wichtigen Informationen, ohne mühevoll die gesamte Navigation durcharbeiten zu müssen
  • Zusätzlich verborgener Text für Nutzende von Bildschirmlesegeräten: Beispielsweise genaue Zeitmarken, Freigabesymbole, erweitertes E-Mail- und Social Media-Sharing-Menü
  • Alternative Tabellen: Für Grafiken und Diagramme, die zur Unterscheidung unterschiedlicher Werte üblicherweise Farben nutzen
  • Hyperlinks zu „Verwandte Inhalte“: Werden am Artikelende angeboten
  • Navigationsmenüs in Seitenleiste: Leicht zu finden und mit selbsterklärenden Namen

Weitere Informationen

Hier finden Sie Werkzeuge zur Überprüfung der Barrierefreiheit von Webseiten:
https://www.einfach-fuer-alle.de/artikel/test-werkzeuge/

Infos

Möchten Sie mehr über barrierefreies Corporate Design erfahren?

Wir entwickeln für Sie barrierefreie Webseiten und PDF-Dokumente und -Formulare nach PDF/UA und BITV. Dann freuen wir uns auf Ihren Anruf unter der Telefonnummer 0221 / 2 76 83 - 70 oder über eine E-Mail an info@konturenreich.de
Infos