Barrierefreies Webdesign – Ausführliche Erklärung in Text, Bild und Video

Vor ca. 10 Jahren begann mein Interesse für barrierefreies Webdesign. Hier im „Schwabenländle“ gibt es noch immer viele Leute die so gar keine Ahnung haben um was es eigentlich geht wenn ich über Webdesign für Menschen mit Behinderungen rede. Deswegen schreibe ich nochmal einen ausführlichen Blogartikel in dem ich erkläre was behindertengerechtes Webdesign bedeutet und warum es wichtig ist, dass ALLE Seiten im Internet auf barrierefrei werden! Das Thema Barrierefreiheit bei Webdesign wird immer wichtiger, weil es auch ältere Menschen betrifft. Weil es mir sehr wichtig ist, damit Sie barrierefreies Webdesign verstehen, wird dieser Artikel sehr ausführlich. Das Thema barrierefreies Webdesign bzw. nutzbares Internet oder “Barrierefreiheit Internet” wird immer wichtiger. Aktion Mensch setzt sich auch stark dafür ein, dass Seiten im Internet frei von Barrieren gestaltet werden.

Definiton

Barrierefreiheit bedeutet ohne Hindernisse. Barrierefreiheit gibt es bei Gebäuden, auf der Straße oder in der EDV. Barrierefreiheit in der EDV bedeutet, dass Websites und Software barrierefreier gestaltet sind, dass Menschen mit unterschiedlichen Einschränkungen die Webseite / Software bedienen können.
Behindertengerechtes Webdesign bedeutet, dass eine Webseite so gestaltet ist, dass sie auch für Menschen mit körperlichen und geistigen Beeinträchtigungen wahrnehmbar ist. Es geht also darum dass Websites für alle Menschen wahrnehmbar und erfahrbar sind. Oft kommt auch der Begriff Barrierefreies Internet oder Barrierefreiheit Internet oder barrierefreie Webseiten / Websites / Internetseiten oder accessibility (=Zugänglichkeit) bei Webauftritten oder behindertengerechtes Webdesign anstelle von barrierefreies Webdesign vor. Dies meint aber das Gleiche.

„Barrierefreies Webdesign – Ausführliche Erklärung in Text, Bild und Video“ weiterlesen

Was ist die „Web Accessibility Initiative“ (WAI)?

Es gibt einige Begriffe die im Zusammenhang mit Barrierefreies Internet immer wieder vorkommen. Hier möchte ich erläutern, was sich hinter den Begriff „Web Accessibility Initiative“ verbirgt.

Die Web Accessibility Initiative(WAI) ist eine Arbeitsgruppe der W3C , die sich mit dem barrierefreien Zugang zum Internet beschäftigt. Die W3C ist das World Wide Web Consortium-Gremium, welches sich um die Standardisierung des World Wide Web(=Internet) kümmert.

Das Ziel der WAI (Web Accessibility Initiative) ist es, das Internet möglichst vielen Menschen zugänglich zu machen. Menschen mit unterschiedlichen Behinderungen sind auch eine Zielgruppe der WAI (Web Accessibility Initiative).

Die „Web Content Accessibility Guidelines 1.0“ (WCAG 1.0) beinhalten Anforderungen an die Webseitenprogrammierung als auch an Inhaltsarchitekturen, Layout-Grundlagen und Technik-Verwendung. Sie wurden von der Web Accessibility Initiative veröffentlicht.

Die Barrierefreie Informationstechnik-Verordnung (BITV) in Deutschland, baut auf die Web Content Accessibility Guidelines 1.0 auf.

Wann ist eine Webseite / Internetseite barrierefrei? (BITV 1.0)

Heute schauen wir uns an, welche Kriterien erfüllt werden sein müssen, damit man von einer barrierefreien Webseite / Internetseite sprechen kann. Mit Sicherheit lassen sich nicht alle Kriterien zu 100% umsetzen. Es geht aber bei diesem Thema auch nicht um das sture Umsetzen von irgendwelchen Richtlinien, sondern es geht darum, ein Bewusstsein zu schaffen, dass es Menschen mit unterschiedlichen Einschränkungen gibt, die beim Wahrnehmen / Lesen einer Webseite auf Barrieren (=Hindernisse) stoßen.

Im folgenden Liste ich die Punkte der Barrierefreie Informationstechnik-Verordnung(=BITV) auf, die für die Umsetzung von Barrierefreiheit auf Webseiten wichtig sind.

Die Bedingungen sind in zwei Priorität-Stufen gegliedert. Eine Webseite ist erst dann Barrierefrei, wenn alle Priorität-Stufen erfüllt sind.

 

Übersicht der Anforderungen für barrierefreies Webdesign auf der BITV

 


Textäguivalente und -alternativen ( Anforderung 1 )
Für jeden Audio- oder visuellen Inhalt sind geeignete äquivalente Inhalte bereitzustellen, die den gleichen Zweck oder die gleiche Funktion wie der originäre Inhalt erfüllen.

Priorität I
Bedingung 1.1
Für jedes Nicht-Text-Element ist ein äquivalenter Text bereitzustellen. Dies gilt insbesondere für: Bilder, graphisch dargestellten Text einschließlich Symbolen, Regionen von Imagemaps, Animationen (z.B. animierte GIFs), Applets und programmierte Objekte, Zeichnungen, die auf der Verwendung von Zeichen und Symbolen des ASCII-Codes basieren (ASCII-Zeichnungen), Frames, Scripts, Bilder, die als Punkte in Listen verwendet werden, Platzhalter-Graphiken, graphische Buttons, Töne (abgespielt mit oder ohne Einwirkung des Benutzers), Audio-Dateien, die für sich allein stehen, Tonspuren von Videos und Videos.

Bedingung 1.2
Für jede aktive Region einer serverseitigen Imagemap sind redundante Texthyperlinks bereitzustellen.

Bedingung 1.3
Für Multimedia-Präsentationen ist eine Audio-Beschreibung der wichtigen Informationen der Videospur bereitzustellen.

Bedingung 1.4
Für jede zeitgesteuerte Multimedia-Präsentation (insbesondere Film oder Animation) sind äquivalente Alternativen (z.B. Untertitel oder Audiobeschreibungen der Videospur) mit der Präsentation zu synchronisieren.

Priorität II
Bedingung 1.5
Für jede aktive Region einer clientseitigen Imagemap sind redundante Texthyperlinks bereitzustellen.


Farben und Kontraste ( Anforderung 2 )
Texte und Graphiken müssen auch dann verständlich sein, wenn diese ohne Farbe betrachtet werden.

Priorität I
Bedingung 2.1
Alle mit Farbe dargestellten Informationen müssen auch ohne Farbe verfügbar sein, z.B. durch den Kontext oder die hierfür vorgesehenen Elemente der verwendeten Markup-Sprache.

Bedingung 2.2
Bilder sind so zu gestalten, dass die Kombinationen aus Vordergrund- und Hintergrundfarbe auf einem Schwarz-Weiß-Bildschirm und bei der Betrachtung durch Menschen mit Farbfehlsichtigkeiten ausreichend kontrastieren.

Priorität II
Bedingung 2.3
Texte sind so zu gestalten, dass die Kombinationen aus Vordergrund- und Hintergrundfarbe auf einem Schwarz-Weiß-Bildschirm und bei der Betrachtung durch Menschen mit Farbfehlsichtigkeiten ausreichend kontrastieren.


Trennung von Inhalt und Layout ( Anforderung 3 )
Markup-Sprachen (insbesondere HTML) und Stylesheets (CSS) sind entsprechend ihrer Spezifikationen und formalen Definitionen zu verwenden.

Priorität I
Bedingung 3.1
Soweit eine angemessene Markup-Sprache existiert, ist diese anstelle von Bildern zu verwenden, um Informationen darzustellen.

Bedingung 3.2
Mittels Markup-Sprachen geschaffene Dokumente sind so zu erstellen und zu deklarieren, dass sie gegen veröffentlichte formale Grammatiken validieren.

Bedingung 3.3
Es sind Stylesheets zu verwenden, um die Text- und Bildgestaltung sowie die Präsentation von mittels Markup-Sprachen geschaffener Dokumente zu beeinflussen.

Bedingung 3.4
Es sind relative anstelle von absoluten Einheiten in den Attributwerten der verwendeten Markup-Sprache und den Stylesheet-Property-Werten zu verwenden.

Bedingung 3.5
Zur Darstellung der Struktur von mittels Markup-Sprachen geschaffener Dokumente sind Überschriften-Elemente zu verwenden.

Bedingung 3.6
Zur Darstellung von Listen und Listenelementen sind die hierfür vorgesehenen Elemente der verwendeten Markup-Sprache zu verwenden.

Bedingung 3.7
Zitate sind mittels der hierfür vorgesehenen Elemente der verwendeten Markup-Sprache zu kennzeichnen.


Sprachliche Besonderheiten ( Anforderung 4 )
Sprachliche Besonderheiten wie Wechsel der Sprache oder Abkürzungen sind erkennbar zu machen.

Priorität I
Bedingung 4.1
Wechsel und Änderungen der vorherrschend verwendeten natürlichen Sprache sind kenntlich zu machen.

Priorität II
Bedingung 4.2
Abkürzungen und Akronyme sind an der Stelle ihres ersten Auftretens im Inhalt zu erläutern und durch die hierfür vorgesehenen Elemente der verwendeten Markup-Sprache kenntlich zu machen.

Bedingung 4.3
Die vorherrschend verwendete natürliche Sprache ist durch die hierfür vorgesehenen Elemente der verwendeten Markup-Sprache kenntlich zu machen.


Tabellen ( Anforderung 5 )
Tabellen sind mittels der vorgesehenen Elemente der verwendeten Markup-Sprache zu beschreiben und in der Regel nur zur Darstellung tabellarischer Daten zu verwenden.

Priorität I
Bedingung 5.1
In Tabellen, die tabellarische Daten darstellen, sind die Zeilen- und Spaltenüberschriften mittels der vorgesehenen Elemente der verwendeten Markup-Sprache zu kennzeichnen.

Bedingung 5.2
Soweit Tabellen, die tabellarische Daten darstellen, zwei oder mehr Ebenen von Zeilen- und Spaltenüberschriften aufweisen, sind mittels der vorgesehenen Elemente der verwendeten Markup-Sprache Datenzellen und Überschriftenzellen einander zuzuordnen.

Bedingung 5.3
Tabellen sind nicht für die Text- und Bildgestaltung zu verwenden, soweit sie nicht auch in linearisierter Form dargestellt werden können.

Bedingung 5.4
Soweit Tabellen zur Text- und Bildgestaltung genutzt werden, sind keine der Strukturierung dienenden Elemente der verwendeten Markup-Sprache zur visuellen Formatierung zu verwenden.

Priorität II
Bedingung 5.5
Für Tabellen sind unter Verwendung der hierfür vorgesehenen Elemente der genutzten Markup-Sprache Zusammenfassungen bereitzustellen.

Bedingung 5.6
Für Überschriftenzellen sind unter Verwendung der hierfür vorgesehenen Elemente der genutzten Markup-Sprache Abkürzungen bereitzustellen.


Allgemeine Rückwärtskompatibilität ( Anforderung 6 )
Internetangebote müssen auch dann nutzbar sein, wenn der verwendete Benutzeragent neuere Technologien nicht unterstützt oder diese deaktiviert sind.

Priorität I
Bedingung 6.1
Es muss sichergestellt sein, dass mittels Markup-Sprachen geschaffene Dokumente verwendbar sind, wenn die zugeordneten Stylesheets deaktiviert sind.

Bedingung 6.2
Es muss sichergestellt sein, dass Äquivalente für dynamischen Inhalt aktualisiert werden, wenn sich der dynamische Inhalt ändert.

Bedingung 6.3
Es muss sichergestellt sein, dass mittels Markup-Sprachen geschaffene Dokumente verwendbar sind, wenn scripts, Applets oder andere programmierte Objekte deaktiviert sind.

Bedingung 6.4
Es muss sichergestellt sein, dass die Eingabebehandlung von scripts, Applets oder anderen programmierten Objekten vom Eingabegerät unabhängig ist.

Bedingung 6.5
Dynamische Inhalte müssen zugänglich sein. Insoweit dies nur mit unverhältnismäßig hohem Aufwand zu realisieren ist, sind gleichwertige alternative Angebote unter Verzicht auf dynamische Inhalte bereitzustellen.


Dynamische Inhalte ( Anforderung 7 )
Zeitgesteuerte Änderungen des Inhalts müssen durch die Nutzerin/den Nutzer kontrollierbar sein.

Priorität I
Bedingung 7.1
Bildschirmflackern ist zu vermeiden.

Bedingung 7.2
Blinkender Inhalt ist zu vermeiden.

Bedingung 7.3
Bewegung in mittels Markup-Sprachen geschaffener Dokumente ist entweder zu vermeiden oder es sind Mechanismen bereitzustellen, die der Nutzerin, dem Nutzer das Einfrieren der Bewegung oder die Änderung des Inhalts ermöglichen.

Bedingung 7.4
Automatische periodische Aktualisierungen in mittels Markup-Sprachen geschaffener Dokumente sind zu vermeiden.

Bedingung 7.5
Die Verwendung von Elementen der Markup-Sprache zur automatischen Weiterleitung ist zu vermeiden. Insofern auf eine automatische Weiterleitung nicht verzichtet werden kann, ist der Server entsprechend zu konfigurieren.


Benutzerschnittstellen ( Anforderung 8 )
Die direkte Zugänglichkeit der in Internetangeboten eingebetteten Benutzerschnittstellen ist sicherzustellen.

Priorität I
Bedingung 8.1
Programmierte Elemente (insbesondere scripts und Applets) sind so zu gestalten, dass sie entweder direkt zugänglich oder kompatibel mit assistiven Technologien sind.


Geräte-Unabhängigkeit ( Anforderung 9 )
Internetangebote sind so zu gestalten, dass Funktionen unabhängig vom Eingabegerät oder Ausgabegerät nutzbar sind.

Priorität I
Bedingung 9.1
Es sind clientseitige Imagemaps bereitzustellen, es sei denn die Regionen können mit den verfügbaren geometrischen Formen nicht definiert werden.

Bedingung 9.2
Jedes über eine eigene Schnittstelle verfügende Element muss in geräteunabhängiger Weise bedient werden können.

Bedingung 9.3
In Scripts sind logische anstelle von geräteabhängigen Event-Handlern zu spezifizieren.

Priorität II
Bedingung 9.4
Es ist eine mit der Tabulatortaste navigierbare, nachvollziehbare und schlüssige Reihenfolge von Hyperlinks, Formularkontrollelementen und Objekten festzulegen.

Bedingung 9.5
Es sind Tastaturkurzbefehle für Hyperlinks, die für das Verständnis des Angebots von entscheidender Bedeutung sind (einschließlich solcher in clientseitigen Imagemaps), Formularkontrollelemente und Gruppen von Formularkontrollelementen bereitzustellen.


Kompatibilität mit Hilfsmitteln ( Anforderung 10 )
Die Verwendbarkeit von nicht mehr dem jeweils aktuellen Stand der Technik entsprechenden assistiven Technologien und Browsern ist sicherzustellen, soweit der hiermit verbundene Aufwand nicht unverhältnismäßig ist.

Priorität I
Bedingung 10.1
Das Erscheinenlassen von Pop-Ups oder anderen Fenstern ist zu vermeiden. Die Nutzerin, der Nutzer ist über Wechsel der aktuellen Ansicht zu informieren.

Bedingung 10.2
Bei allen Formular-Kontrollelementen mit implizit zugeordneten Beschriftungen ist dafür Sorge zu tragen, dass die Beschriftungen korrekt positioniert sind.

Priorität II
Bedingung 10.3
Für alle Tabellen, die Text in parallelen Spalten mit Zeilenumbruch enthalten, ist alternativ linearer Text bereitzustellen.

Bedingung 10.4
Leere Kontrollelemente in Eingabefeldern und Textbereichen sind mit Platzhalterzeichen zu versehen.

Bedingung 10.5
Nebeneinanderliegende Hyperlinks sind durch von Leerzeichen umgebene, druckbare Zeichen zu trennen.


W3C-Technologien ( Anforderung 11 )
Die zur Erstellung des Internetangebots verwendeten Technologien sollen öffentlich zugänglich und vollständig dokumentiert sein, wie z. B. die vom World Wide Web Konsortium entwickelten Technologien.

Priorität I
Bedingung 11.1
Es sind öffentlich zugängliche und vollständig dokumentierte Technologien in ihrer jeweils aktuellen Version zu verwenden, soweit dies für die Erfüllung der angestrebten Aufgabe angemessen ist.

Bedingung 11.2
Die Verwendung von Funktionen, die durch die Herausgabe neuer Versionen überholt sind, ist zu vermeiden.

Bedingung 11.3
Soweit auch nach bestem Bemühen die Erstellung eines barrierefreien Internetangebots nicht möglich ist, ist ein alternatives, barrierefreies Angebot zur Verfügung zu stellen, das äquivalente Funktionalitäten und Informationen gleicher Aktualität enthält, soweit es die technischen Möglichkeiten zulassen. Bei Verwendung nicht barrierefreier Technologien sind diese zu ersetzen, sobald aufgrund der technologischen Entwicklung äquivalente, zugängliche Lösungen verfügbar und einsetzbar sind.

Priorität II
Bedingung 11.4
Der Nutzerin, dem Nutzer sind Informationen bereitzustellen, die es ihnen erlauben, Dokumente entsprechend ihren Vorgaben (z.B. Sprache) zu erhalten.


Kontextuelle Hilfen ( Anforderung 12 )
Der Nutzerin/dem Nutzer sind Informationen zum Kontext und zur Orientierung bereitzustellen.

Priorität I
Bedingung 12.1
Jeder Frame ist mit einem Titel zu versehen, um Navigation und Identifikation zu ermöglichen.

Bedingung 12.2
Der Zweck von Frames und ihre Beziehung zueinander ist zu beschreiben, soweit dies nicht aus den verwendeten Titeln ersichtlich ist.

Bedingung 12.3
Große Informationsblöcke sind mittels Elementen der verwendeten Markup-Sprache in leichter handhabbare Gruppen zu unterteilen.

Bedingung 12.4
Beschriftungen sind genau ihren Kontrollelementen zuzuordnen.


Navigation und Orientierung ( Anforderung 13 )
Navigationsmechanismen sind übersichtlich und schlüssig zu gestalten.

Priorität I
Bedingung 13.1
Das Ziel jedes Hyperlinks muss auf eindeutige Weise identifizierbar sein.

Bedingung 13.2
Es sind Metadaten bereitzustellen, um semantische Informationen zu Internetangeboten hinzuzufügen.

Bedingung 13.3
Es sind Informationen zur allgemeinen Anordnung und Konzeption eines Internetangebots, z.B. mittels eines Inhaltsverzeichnisses oder einer Sitemap, bereitzustellen.

Bedingung 13.4
Navigationsmechanismen müssen schlüssig und nachvollziehbar eingesetzt werden.

Priorität II
Bedingung 13.5
Es sind Navigationsleisten bereitzustellen, um den verwendeten Navigationsmechanismus hervorzuheben und einen Zugriff darauf zu ermöglichen.

Bedingung 13.6
Inhaltlich verwandte oder zusammenhängende Hyperlinks sind zu gruppieren. Die Gruppen sind eindeutig zu benennen und müssen einen Mechanismus enthalten, der das Umgehen der Gruppe ermöglicht.

Bedingung 13.7
Soweit Suchfunktionen angeboten werden, sind der Nutzerin, dem Nutzer verschiedene Arten der Suche bereitzustellen.

Bedingung 13.8
Es sind aussagekräftige Informationen am Anfang von inhaltlich zusammenhängenden Informationsblöcken (z.B. Absätzen, Listen) bereitzustellen, die eine Differenzierung ermöglichen.

Bedingung 13.9
Soweit inhaltlich zusammenhängende Dokumente getrennt angeboten werden, sind Zusammenstellungen dieser Dokumente bereitzustellen.

Bedingung 13.10
Es sind Mechanismen zum Umgehen von ASCII-Zeichnungen bereitzustellen.


Verständlichkeit
( Anforderung 14 )
Das allgemeine Verständnis der angebotenen Inhalte ist durch angemessene Maßnahmen zu fördern.

Priorität I
Bedingung 14.1
Für jegliche Inhalte ist die klarste und einfachste Sprache zu verwenden, die angemessen ist.

Priorität II
Bedingung 14.2
Text ist mit graphischen oder Audio-Präsentationen zu ergänzen, sofern dies das Verständnis der angebotenen Information fördert.

Bedingung 14.3
Der gewählte Präsentationsstil ist durchgängig beizubehalten.

Auf meiner Webseite finden Sie auch Infos zum Thema barrierefreies Webdesign