Barrierefreie Webseiten, Mann mit Brille vor Laptop

Barrierefreie Webseiten gestalten und programmieren

Barrierefreiheit ist im Alltag leichter erkennbar als im World Wide Web. Ein Rollstuhlrampe ist auffälliger, als valides HTML. Aber auch im Internet ist Barrierefreiheit wichtig. Nur so können Menschen mit Behinderung die Inhalte Ihrer Webseite einsehen. Zur Verdeutlichung dient das folgende Video:

In diesem Beitrag möchten wir Ihnen zeigen, worauf bei barrierefreien Webseiten sowohl in der Gestaltung als auch in der Programmierung zu achten ist. Ermöglichen Sie es Menschen wie Frau Hoffmann und Herrn Männer Ihre Webseite zu bedienen!

Barrierefreies Design

Bereits bei der Planung und Gestaltung der Webseite darf die Barrierefreiheit nicht außer Acht gelassen werden. Im Nachhinein lässt sie sich schwer integrieren. Beachten Sie daher schon bei der Erstellung die folgenden Punkte.

Aufbau der Seite

Die Seite muss über eine klare Strukturierung erfolgen. Es ist davon auszugehen, dass der Nutzer die Webseite via Tastatur nutzt. Dabei geht er via der Tabulator-Taste von oben nach unten die Links und Formularelemente durch. Die aktuelle Position ist hierbei stets zu verdeutlichen, z.B. durch eine farbige Umrandung. Ebenso lesen ScreenReader die Webseite von oben nach unten vor.

Für die Erschließung des Inhalts dürfen sensorische Merkmale wie Farbe, Form und Position von Elementen nicht erforderlich sein. Zum Beispiel sind Aussagen wie „Drücken Sie den roten Knopf.“ für Blinde nicht nachvollziehbar.

Der Nutzer muss sich stets orientieren können. Dafür sind die folgenden Sachen zu beachten

  • Aufbau der Hauptnavigation ist stets einheitlich
  • Aktive Menüpunkte sind hervorgehoben
  • Unterstreichungen nur für Verlinkungen
  • Besuchte Links werden gekennzeichnet
  • Verwendung einer Breadcrumb (Brodkrümelpfad)

Die unterschiedlichen Auszeichnungen für Verlinkungen sind in der folgenden Grafik beispielhaft umgesetzt:

Beispiel für aktive und fokussierte Links im Menü

Die Breadcrumb zeigt alle bisherigen Ebenen der Webseite auf. Hier sehe er wie beispielsweise wie folgt aus: Startseite > Blog > Artikel

Neben der Navigation benötigt es wenigstens einen weiteren Zugangsweg. Dies kann entweder eine Sitemap oder eine Suche sein.

Skalierbarkeit

Die Webseite muss auch bei einer Zoom-Stufe von 200% noch bedienbar sein. Bei nur Text-Vergrößern ist eine Bedienbarkeit bei 150% zu gewährleisten. Um das beispielsweise im Firefox zu testen, gehen Sie wie hier beschrieben vor.

Kontrast

Bei Schriftgrößen unter 24px sollte das Kontrastverhältnis bei 4,5:1, bei größeren Schriften 3:1. Dasselbe gilt bei Grafiken, die Schriften beinhalten. Diese sollten aber möglichst vermieden werden. Für die Überprüfung des Kontrastverhältnisses, können Sie die Software Colour Contrast Analyser nutzen.

Ist der Kontrast nicht ausreichend, ist eine weitere, kontrastreichere Variante der Webseite zur Verfügung zu stellen.

Dynamische Inhalte

Es muss die Möglichkeit geben, bewegte Inhalte abschalten oder ausblenden zu können. Das sollte sowohl über eine Schaltfläche als auch via Tastatur möglich sein. Selbes gilt auch für Ton. Dieser muss gestoppt werden können.

Die Webseite darf nicht Flackern. Inhalte die Flackern, müssen spätestens nach dem dritten Mal stoppen.

Sind Inhalte nur eine begrenzte Zeit aufrufbar, muss es möglich sein, die Zeit zu verlängern. Beim Online-Banking ist Ihnen das sicherlich schon begegnet.

Formulare

Beschriftungen von Formularfeldern sind obligatorisch und immer vor dem jeweilgien Feld anzuzeigen. Sollten bildbasierte Captchas zum Einsatz kommen, ist immer eine Alternative anzubieten (Audio oder Frage). Das Captchas nicht zwingend erforderlich sind, ist auch in unserem Artikel Alternativen zum Captcha nachzulesen.

Barrierefreie Programmierung

Valides HTML

Das HTML muss so geschrieben sein, dass keine Fehler im Quellcode auftauchen. Zur Überprüfung dient der W3C HTML-Validator.

Ältere HTML-Elemente und Attribute sind nicht mehr zu verwenden. Der aktuelle Standard (derzeit HTML5) ist zu verwenden.

Korrekte Auszeichnung von Elementen

Daten-Tabellen, Überschriften, Zitate und Listen sind mit den entsprechenden HTML-Tags zu kennzeichnen. Für die Layout-Gestaltung sind Tabellen-Tags (<table>, <td> etc.) zu vermeiden.

Normalerweise sind <a>- oder <input>-Tags für die Bedienung einer Webseite bestimmt. Sollten andere Tags z.B. zur Steuerung eines Bildwechslers genutzt werden, ist die Rolle der Elemente mit WAI-ARIA-Attributen zu kennzeichnen.

Verlinkungen

Das Logo auf verweist auf die Startseite. Auf die aktuelle Seite dürfen keine Links zeigen. Besuchte Links und aktive Menüpunkte sind zu kennzeichnen.

Barrierefreie Inhalte

In diesem Abschnitt sind vor allem Redakteure in der Pflicht. Sie müssen die Inhalte barrierefrei pflegen. Aber auch Backend-Enwickler sind hier grefragt, da sie die Möglichkeit dazu schaffen müssen.

Pflege von Alt-Attributen!

Ein wichtiger Aspekt, der hier oft vernachlässig wird, ist die Pflege von Bildbeschreibungen. Was hier zu beachten ist und welche weiteren Vorteile sich daraus ergeben erfahren Sie in unseren Artikel zum Thema Alternative Texte. In dem Artikel erfahren Sie zudem, wie Sie die Informationen in TYPO3 hinterlegen könnnen. Bei Grafiken, die nur für die Gestaltung angelegt wurden, sollten keine alternativen Texte angegeben werden.

Neben Bildern stellen Videos eine Hürde da. Hier ist mit Untertiteln und Beschreibungen zu arbeiten. Darüber hinaus sind bei Ton oder stummen Videos sind gleichwertige Alternativen anzubieten.

Aussagekräftige Titel und Verlinkungen

Dokumenttitel sollten Rückschluss auf den Inhalt der Seite geben. Was für Suchmaschinen hier noch zu beachten ist, erfahren Sie in unseren Artikel zu Überschriften in Webseiten.

Ebenso ist bei Linktexten darauf zu achten, dass Sie das Ziel beschreiben. Hier kann zusätzlich noch ein Titel-Attribut mit weiteren Informationen zum Linkziel angegeben werden. Bei Verweisen auf Dateien ist das Dateiformat zu benennen.

Überprüfung von Webseiten auf Barrierefreiheit

BITV

BITV steht für die Barrierefreie-Informationstechnik-Verordnung. Die oben genannten Punkte stammen allen aus dem BITV-Test. Dabei wurden die wichtigsten Punkte genannt. Mit dem Test wird überprüft, ob die einzelnen Punkte der BITV eingehalten wurden. Den vollständigen BITV-Test können Sie selbst ausführen. In dem Test selbst gibt es Anleitungen, wie die einzelnen Merkmale zu überprüfen sind. Hier sehen Sie einen Screenshot vom Test:

Screenshot BITV-Test

Tools

Im gesamten Artikel wurden bereits verschiedene Hilfsmittel benannt, um die Barrierefreheit von Webseiten zu überprüfen. Hier nochmal eine Auflistung einiger Programme und Online-Anwendungen:

Kennen Sie weitere Tools? Falls ja, schreiben Sie diese uns gerne in den Kommentaren.

Fazit

Eine Webseite komplett barrierfrei anzubieten ist oft nur theoretisch möglich. Aufgrund dessen wird hier auch von barrierarmen Webseiten gesprochen.

Barriefreiheit einer Webseite ist nur zu gewährleisten, wenn Grafiker, Entwickler und Redakteure zusammen an diesem Ziel arbeiten. Daher ist es wichtig alle Akteure für die einzelnen Punkte zu sensibilisieren. Bei Webseiten von öffentlichen Einrichtungen ist die Barrierefreiheit Pflicht. Darüber hinaus sollten auch Unternehmen ein Interesse haben, dass Ihre Webseite für einen möglichst großen Personenkreis zugänglich ist.

Wir haben in der Vergangenheit verschiedene Projekte umgesetzt, in denen das Thema Barriefreiheit eine Rolle spielte. Ihre Erfahrungen zum Thema können Sie gerne in den Kommentaren teilen. Falls Sie noch Fragen zum Thema haben, sprechen Sie uns gerne an.

Kommentar hinzufügen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.