Web Content Accessibility Guidelines 2.1 / WCAG 2.1

In diesem Artikel erkläre ich was die Web Content Accessibility Guidelines 2.1, abgekürzt WCAG 2.1, sind und warum diese für barrierefreies Webdesign wichtig sind.

Barrierefreies Webdesign – Definition

Barrierefreies Webdesign bedeutet, dass eine Webseite so gestaltet ist, dass sie von allen Menschen, auch von Menschen mit Behinderungen und anderen körperlichen Einschränkungen, bedient und wahrgenommen werden kann.

Was sind die Web Content Accessibility Guidelines?

Die Web Content Accessibility Guidelines (WCAG; englisch für „Richtlinien für barrierefreie Webinhalte“) sind ein internationaler Standard zur barrierefreien Gestaltung von Internetangeboten. Einfach ausgedrückt, die Web Content Accessibility Guidelines sind Richtlinien in denen festgehalten ist, welche Schritte umgesetzt werden müssen, damit eine Internetseite barrierefrei ist.

Web Content Accessibility Guidelines (WCAG 2.1)
Internationale Richtlinien zur Gestaltung barrierefreier Internetseiten

„Web Content Accessibility Guidelines 2.1 / WCAG 2.1“ weiterlesen

Barrierefreiheit in der Informatik – Richtlinien, ein Überblick

In diesem Blogartikel möchte ich einen Überblick geben über Richtlinien rund um die barrierefreie Informatik. Bevor wir zu den Richtlinien kommen möchte ich die Grundbegriffe der Barrierefreiheit in der Informatik erklären.

Grundbegriffe der Barrierefreiheit in der Informatik

Barrierefreiheit in der Informatik in der Informatik bedeutet, dass Webseiten, Programme und Betriebssysteme so gestaltet sind, dass sie von allen Menschen, auch von Menschen mit körperlichen Einschränkungen, bedient werden können.

Barrierefreies Webdesign bedeutet, dass Internetseiten so gestaltet sind, dass sie von allen Menschen, auch von Menschen mit körperlichen Einschränkungen, bedient werden können.

Barrierefreie Software-Entwicklung bedeutet, es entsteht eine Software die für alle Menschen, auch für Menschen mit körperlichen Einschränkungen, bedienbar ist.

Barrierefreiheit bei Betriebssysteme bedeutet, dass ein Betriebssystem so gestaltet ist, dass es von allen Menschen, auch von Menschen mit körperlichen Einschränkungen bedient werden kann.

Tastatur mit Rollstuhlsymbol und Wort barrierefrei
Quelle: Robert Kneschke – 483201067 / Shutterstock.com

„Barrierefreiheit in der Informatik – Richtlinien, ein Überblick“ weiterlesen

Mobile Accessibility – Richtlinien

In diesem Blogartikel erkläre ich die Richtlinien für Barrierefreiheit bei Responsive Webdesign bzw. Mobile Accessibility. 

Barrierefreies Webdesign – Definition

Barrierefreies Webdesign bedeutet, dass eine Webseite so gestaltet ist, dass sie für alle Menschen, auch für Menschen mit körperlichen Einschränkungen, bedienbar und wahrnehmbar ist.

Hier noch ein Youtube-Video zu barrierefreies Webdesign:

Responsive Webdesign – Definition

Unter einer responsiven Gestaltung einer Internetseite versteht man, dass das Layout der Seite für das Ausgabemedium angepasst wird. Ausgabemedium kann sein: Smartphone, iPhone, Tablet und iPad.

Laptop, Ipad und Smartphone zeigen dass Responsive Webdesign bedeutet, dass eine Webseite für mehrere Ausgabegeräte optimiert ist
Quelle: Rido – 287737622 / Shutterstock.com

„Mobile Accessibility – Richtlinien“ weiterlesen

Barrierefreies Webdesign – Richtlinien und Gesetze in der Schweiz

In Zukunft möchte ich als Unternehmer auch barrierefreies Webdesign für die Schweiz anbieten. Deswegen beschäftige ich mich in diesem Blogartikel mit den Gesetzen und Richtlinien für barrierefreies Webdesign für die Schweiz.

Barrierefreies Webdesign – Was ist das?

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.

„Barrierefreies Webdesign – Richtlinien und Gesetze in der Schweiz“ weiterlesen

Barrierefreies Webdesign – Richtlinien und Gesetze in Österreich

Weil ich auch schon einen Kunden aus Österreich hatte für den ich eine barrierefreie Webseite mit WordPress erstellte, schreibe ich heute über barrierefreies Webdesign aus bzw. in Österreich. Außerdem würde ich mich über noch mehr Aufträge aus Österreich freuen.

Barrierefreies Webdesign – Was ist das?

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.

„Barrierefreies Webdesign – Richtlinien und Gesetze in Österreich“ weiterlesen

Richtlinien für barrierefreies Webdesign

In diesem Artikel möchte ich erklären warum es Richtlinien zu barrierefreies Webdesign gibt und welche!

Barrierefreies Webdesign bedeutet, dass Webseiten keine Barrieren enthalten für Menschen mit unterschiedlichen Einschränkungen oder Behinderungen.

Warum gibt es Richtlinien für barrierefreies Webdesign?

Damit eine Webseite barrierefrei ist, muss sie bestimmte Kriterien erfüllen. Diese Kriterien richten sich danach, welche Behinderungsart welche Probleme im Umgang mit Internetseiten hat. Ziel der Richtlinien ist es, dass möglichst viele Behinderungsarten und andere Einschränkungen berücksichtigt werden. Das Internet soll für alle Mensche zugänglich und wahrnehmbar sein. Deswegen gibt es Richtlinien für barrierefreies Webdesign. Es gibt Internationale und nationale Richtlinien für barrierefreies Webdesign.

Barrierefreies Webdesign – Internationale Richtlinien – WCAG 2.0

Die WCAG 2.0 sind die Internationalen Richtlinien für barrierefreies Webdesign.
Somit wurde barrierefreies Webdesign internationaler Standard. WCAG 2.0 Richtlinien wurden am 11. Dezember 2008 veröffentlicht.
Die Richtlinien sind in 4 Prinzipien gruppiert:

  • Wahrnehmbar (z.B. visuelle Inhalten brauchen eine Textalternative)
  • Bedienbar (insbesondere Tastaturbedienung)
  • Verständlich
  • Robust (Kompatibilität)

Hier der Link: Barrierefreies Webdesign mit der Richtlinie WCAG 2.0

Barrierefreies Webdesign – deutsche Richtlinien – die BITV 2.0

Die BITV 2.0 sind die nationalen Richtlinien für barrierefreies Webdesign. Die Richtlinien der BITV 2.0 wurden abgeleitet von den Richtlinien der WCAG 2.0 für barrierefreies Webdesign. Somit gibt es auch hier die oben genannten Prinzipien.
Hier der Link: Barrierefreies Webdesign mit der BITV 2.0

Welche Richtlinie kommt wann zur Anwendung?

Nun stellt sich vielleicht der Leser die Frage: Welche Richtlinie benötige ich wann?
Wenn Sie eine deutsche Webseite barrierefrei machen möchten, verwenden Sie die deutsche Richtlinien der BITV 2.0. Möchten Sie eine Webseite aus dem Ausland barrierefrei machen in dem es keine nationalen Richtlinien gibt, dann verwenden Sie die WCAG 2.0.

Barrierefreies Webdesign mit der WCAG 2.0

In diesem Blogartikel erkläre ich was die WCAG 2.0 ist und wann sie eingesetzt werden sollte.

Was ist die WCAG 2.0?

Die Richtlinien für barrierefreies Webdesign sind ein Webstandard des W3C. Das World Wide Web Consortium (kurz W3C) . Das W3C legt die Standards des World Wide Web, zu deutsch welt weites Netz oder Internet, fest. Innerhalb des W3C gibt es die Web Accessibility Initiative (WAI), in der sich mehrere Arbeitsgruppen und Interessengruppen mit dem barrierefreien Zugang zum Internet und seinen Inhalten beschäftigen.
Die Web Accessibility Initiative (WAI) hat die WCAG veröffentlicht von der es nun die Version 2, also die WCAG 2.0 gibt. Die Web Content Accessibility Guidelines (WCAG) 2.0 gibt es seit dem Jahr 2008. Die WCAG 2.0 sind Grundlage für gesetzliche Vorgaben in vielen Ländern der Welt. Sie soll die Zugänglichkeit und Nutzbarkeit von Webseiten für Menschen mit Behinderungen sicherstellen.

Aufbau der WCAG 2.0

Die WCAG 2.0 ist wie folgt aufgebaut:

4 Prinzipien
12 Richtlinien
61 Erfolgskriterien
unzählige Techniken

Prinzipien der WCAG 2.0

Die WCAG 2.0 hat 4 Prinzipien:

  • Prinzip 1: Wahrnehmbar — Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können.
  • Prinzip 2: Bedienbar — Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein.
  • Prinzip 3: Verständlich — Informationen und Bedienung der Benutzerschnittstelle müssen verständlich sein.
  • Prinzip 4: Robust — Inhalte müssen robust genug sein, damit sie zuverlässig von einer großen Auswahl an

Benutzeragenten einschließlich assistierender Techniken interpretiert werden können.

Erfolgskriterien

Die WCAG 2.0 enthält 61 Erfolgskriterien. Diese Erfolgskriterien bieten konkrete Handlungsanweisungen für die Umsetzung von barrierefreies Webdesign. Die Erfolgskriterien werden drei verschiedenen Konformitätsstufen zugeordnet: Konformitätsstufe A (25 Erfolgskriterien) mit einer geringen Konformität, Konformitätsstufe AA (13 Erfolgskriterien) und Konformitätsstufe AAA (23 Erfolgskriterien) mit der höchsten Konformität mit den Richtlinien. Die Konformitätsstufe sagt aus, wie barrierefrei eine Webseite ist. Die Konformitätsstufe AA entspricht der Erfüllung der deutschen Richtlinie BITV 2.0 .

Das Bild zeigt ein Formular barrierefrei gestaltet mit Tastenkürzel und guter Anzeige des Tastenfokus
Das Bild zeigt ein Formular barrierefrei gestaltet mit Tastenkürzel und guter Anzeige des Tastenfokus

Richtlinien der WCAG 2.0

Die WCAG 2.0 beinhaltet nur Richtlinien welche die Zugänglichkeit und die Nutzbarkeit durch Menschen mit Behinderungen betreffen. Diese Richtlinien sollen sicherstellen, dass Inhalte von Webseiten möglichst für viele Nutzer zugänglich, sprich wahrnehmbar sind.

Da es keinen Sinn macht hier die kompletten Richtlinien der WCAG 2.0 wiederzugeben begnüge ich mich mit der Kurzfassung und verweise auf den Link der offiziellen deutschen Übersetzung der WCAG 2.0 .

Richtlinie 1.1 Textalternativen: Stellen Sie Textalternativen für alle Nicht-Text-Inhalte zur Verfügung, so dass diese in andere vom Benutzer benötigte Formen geändert werden können, wie zum Beispiel Großschrift, Braille, Symbole oder einfachere Sprache.

Richtlinie 1.2 Zeitbasierte Medien: Stellen Sie Alternativen für zeitbasierte Medien zur Verfügung.

Richtlinie 1.3 Anpassbar: Erstellen Sie Inhalte, die auf verschiedene Arten dargestellt werden können (z.B. einfacheres Layout), ohne dass Informationen oder Struktur verloren gehen.

Richtlinie 1.4 Unterscheidbar: Machen Sie es Benutzern leichter, Inhalt zu sehen und zu hören einschließlich der Trennung von Vorder- und Hintergrund.

Richtlinie 2.1 Per Tastatur zugänglich: Sorgen Sie dafür, dass alle Funktionalitäten per Tastatur zugänglich sind.

Richtlinie 2.2 Ausreichend Zeit: Geben Sie den Benutzern ausreichend Zeit, Inhalte zu lesen und zu benutzen.

Richtlinie 2.3 Anfälle: Gestalten Sie Inhalte nicht auf Arten, von denen bekannt ist, dass sie zu Anfällen führen.

Richtlinie 2.4 Navigierbar: Stellen Sie Mittel zur Verfügung, um Benutzer dabei zu unterstützen zu navigieren, Inhalte zu finden und zu bestimmen, wo sie sich befinden.

Richtlinie 3.1 Lesbar: Machen Sie Inhalt lesbar und verständlich.

Richtlinie 3.2 Vorhersehbar: Sorgen Sie dafür, dass Webseiten vorhersehbar aussehen und funktionieren.

Richtlinie 3.3 Hilfestellung bei der Eingabe: Helfen Sie den Benutzern dabei, Fehler zu vermeiden und zu korrigieren.

Richtlinie 4.1 Kompatibel: Maximieren Sie die Kompatibilität mit aktuellen und zukünftigen Benutzeragenten, einschließlich assistierender Techniken.

Die vollständigen Richtlinien der WCAG 2.0 finden Sie auf folgender Webseite:
Web Content Accessibility Guidelines (WCAG) 2.0 – Autorisierte deutsche Übersetzung

Wann kommt die WCAG 2.0 zum tragen?

In Ländern, die keine nationalen Richtlinien, so wie in Deutschland die BITV 2.0, für barrierefreies Webdesign haben, wird die WCAG 2.0 als Richtlinie angewandt.

es gibt zu den WCAG ein tollen englisch-sprachigen Song, in folgendem Video:

WCAG 2.0 Theme Song Web Content Accessibility Guidelines – Disability

Marlem-Software bietet barrierefreies Webdesign nach WCAG 2.0

Mein Unternehmen Marlem-Software bietet barrierefreies Webdesign nach BITV 2.0 und WCAG 2.0. Wenn Sie eine Webseite benötigen nach WCAG 2.0 rufen Sie mich an 07121/504458 oder schreiben Sie mir eine Mail an info@marlem-software.de .

Barrierefreies Webdesign nach BITV 2.0: Texte sind lesbar und verständlich zu gestalten

In der BITV 2.0 in der Anforderung 3.1 ist zu lesen „Texte sind lesbar und verständlich zu gestalten“. Was das genau bedeutet, erfahren Sie in diesem Blogartikel.

Das Internet ist für alle da. Menschen mit Hauptschulabschluss, mit Mittlere Reife, mit Abitur, mit Lernbehinderung und mit geistiger Behinderung. Dies hat Konsequenzen für die Gestaltung von Texten auf Webseiten. Ebenso sollte auch der Browser wissen welche Sprache auf der Webseite verwendet wird. Aber lange Rede kurzer Sinn, ich erkläre es der Reihe nach.

Hauptsprache der Webseite angeben

Damit Screenreader wissen in welcher Sprache eine Webseite geschrieben ist, müssen Sie die Hauptsprache der Webseite angeben. Wenn Sie Ihre Webseite auf HTML5 schon umgestellt haben, können Sie die Hauptsprache so angeben:
<html xml:lang=“de“ lang=“de“>
Screenreader können den gelesen Text in Braille übersetzen oder vorlesen. Damit das vorlesen klappt muss eine Wortliste in der richtigen Sprache geladen werden.

Anderssprachige Abschnitte ausgezeichnet

Wenn Sie innerhalb einer Seite die Sprache wechseln müssen Sie das ebenfalls mit dem Lang-Attribut kennzeichnen. So können Sie einzelne Abschnitte in anderen Sprachen schreiben, so dass die Screenreader es erkennen.

Anderssprachige Wörter ausgezeichnet

Einzelne Wörter die in einer anderen Sprache geschrieben werden, müssen ebenfalls mit dem Lang-Attribut ausgezeichnet werden.

Diese Kriterien sind wichtig, damit der Screenreader von blinden und sehbehinderten Menschen mit Webseiten klar kommen. Jetzt kommen Kriterien für Webseitenbesucher.

Vermeiden Sie verschachtelte Sätze

Menschen mit einer Lernbehinderung haben Probleme mit verschachtelten Sätzen. Deswegen sollten Sie Ihre Sätze kurz halten und lieber mehrere Sätze schreiben.

Vermeiden Sie Fachausdrücke, wenn es möglich ist

Auf Webseiten für ein bestimmtes Fachgebiet wird gerne mit Fachchinessisch (=Fachausdrücke) um sich geworfen. Wann immer es geht, sollten Sie Fachausdrücke vermeiden. Eine andere Idee ist, dass Sie Fachausdrücke in einem Nebensatz erklären, oder Sie erstellen ein Lexikon in dem Sie die Fachausdrücke erklären.

Wenn diese Kriterien erfüllt sind, haben Sie die Anforderung 3.1 „ Texte sind lesbar und verständlich zu gestalten“ erfüllt.


Barrierefreies Webdesign mit der BITV 2.0 – Artikelreihe

Barrierefreies Webdesign nach BITV 2.0: was bedeutet valides HTML?

In diesem Artikel erkläre ich was HTML ist, was „valide“ bedeutet und warum das für barrierefreies Webdesign eine wichtige Rolle spielt.

Bevor ich zu barrierefreies Webdesign komme, möchte ich für alle nichtfachmenschen die zu verwendeten Begiffe erklären. HTML (HyperText Markup Language) ist eine Dokumentbeschreibungssprache. HTML besitzt Kommandos, die sogenannten Tags, mit denen Webseiten geschrieben(=entwickelt) werden.

Was bedeutet „valide“? Statt valide könnte auch das Wort „gültig“ verwendet werden. Valides HTML bedeutet dass die Schreibweise der HTML-Tags gewisse „Schreibregeln“ entspricht und somit gültig ist. Wenn Sie jetzt Ihre Webseite auf valides HTML überprüfen möchten, können Sie das mit dem HTML-Validator durchführen. Wenn Ihre Webseite oder eine Unterseite bei der Überprüfung Errors(=Fehler) enthält ist Ihre Webseite nicht valide und somit auch nicht barrierefrei! Warum ist das so?

Menschen mit Behinderungen surfen nicht immer mit dem Microsoft BrowserInternet Explorer“ nur weil dieser standardmäßig installiert ist. Behinderte suchen sich den Browser aus, der aufgrund Ihrer körperlichen Einschränkung am besten geeignet ist. Wenn eine Webseite valides HTML enthält, ist meistens(leider nicht immer) gewährleistet dass diese Webseite in jedem Browser korrekt dargestellt wird. Wenn Webentwickler nicht validen HTML-Code erstellen weil es bei den aktuellen Browsern funktioniert, kann es ein „böses“ erwachen geben, wenn die Browser ihre Bereitschaft „fehlerhaftes HTML richtig anzuzeigen“ verändern.

Ein weiterer Grund warum valides HTML für barrierefreies Webdesign wichtig ist, sind Screenreader . Blinde und Sehbehinderte Menschen verwenden einen Screenreader um überhaupt einen Computer / Laptop bedienen zu können. Der Screenreader kann den Inhalt einer Webseite nur dann korrekt „lesen“ wenn die Webseite valides HTML enthält.
Damit Sie jetzt nicht einfach sagen „es gibt so wenig Blinde das lohnt sich nicht“ würde ich mich sehr freuen, wenn Sie diesen Link gründlich studieren „Blindheit und Sehbehinderung in Deutschland“ .

Dadurch das viele Menschen mit Behinderungen in Heime, Sonderkindergärten und Sonderschulen untergebracht sind, ist es vielen Menschen gar nicht klar wie viel behinderte Menschen in Deutschland leben.

Die BITV 2.0  schreibt valides HTML zwingend vor! Das bedeutet, wenn Ihre Webseite barrierefrei nach BITV 2.0 sein soll, muss sie valides HTML enthalten.

Zum Schluss möchte ich noch einen persönlichen Grund anführen warum ich schon immer auf valides HTML geachtet habe. Für mich ist es ein Qualitätsmerkmal! So wie ein Aufsatz ohne Rechtschreibfehler zeigt, dass der Autor des Aufsatzes die Rechtschreibregeln perfekt beherrscht, so zeigt eine Webseite die valides HTML enthält, dass der Entwickler die HTML-Syntax beherrscht. Wenn Ihre Webseite HTML-Valide ist, zeigen Sie, dass Sie Ihr „Handwerk“ verstehen.


Barrierefreies Webdesign mit der BITV 2.0 – Artikelreihe

Barrierefreies Webdesign nach BITV 2.0: wie wird Tastaturbedienbarkeit bei einer Webseite gewährleistet?

Die BITV 2.0 fordert in der Bedingung 2.1.1 Tastaturbedienbarkeit das die komplette Webseite ohne Maus zu bedienen ist. Warum das so ist und worauf Sie achten sollten erfahren Sie in diesem Blogartikel.

Viele Leser werden staunend Fragen „Hat der Herr Lemcke nicht mitbekommen dass es schon länger eine Computermaus gibt?“. Doch, doch, ich arbeite auch mit der Computermaus!

Es gibt jedoch Menschen mit Behinderungsarten die aufgrund Ihrer Einschränkungen keine Computermaus bedienen können. Blinde und viele Sehbehinderte können keine Computermaus bedienen, weil Sie nicht sehen können wo sich der Mauszeiger befindet.

Außerdem gibt es Menschen die aufgrund einer besonderen Einschränkung in den Händen nicht in der Lage sind eine Computermaus zu bedienen. Damit diese Personen eine Webseite bedienen können, legt die BITV 2.0 fest, dass eine Webseite komplett per Tastatur zu bedienen ist.

Was bedeutet das genau?
Alle Bedienelemente müssen mit der Tabulatortaste erreichbar sein. Hier geht es nicht nur um Eingabefelder, sondern auch um aufklappbare Listen, anwählbare Checkboxen
 und Radiobuttons.

Wenn Bedienelemente per Tabulatortaste nicht erreichbar sind, müssen sie per Tastenkürzel direkt ansteuerbar sein.

Formularfelder sollten mit Ihren Beschriftungen verknüpft werden. Die Beschriftungen sollten per Tastenkürzel erreichbar sein. So können Eingabefelder direkt angesteuert werden ohne mehrfach die Tabulatortaste drücken zu müssen. Das erleichtert den schnellen Zugriff auf bestimmte Eingabefelder.

Beispiel:

Beschriftung: Name „Eingabefeld“
Wenn der Webseitenbesucher die Tasten „Alt“ + N drückt, landet der Eingabefokus im Engabefeld „N
ame“.

Für Menschen mit Sehbehinderung ist es sehr wichtig, dass deutlich zu erkennen ist, welches Element auf der Webseite den Fokus hat.

Flash-Objekte sollten Sie auf der Webseite ganz vermeiden, weil sie nur im Internet-Explorer problemlos erreichbar und verlassbar mit der Tastatur sind.

Die Einbindung von Karten über Google Maps kann unter bestimmten Bedingungen zu Tastaturfallen im Browser Firefox führen. Deswegen sollten Sie sich informieren was zu tun ist, damit die Einbindung unproblematisch ist.

Mit Drag-and-Drop-Funktionen sollten Sie ebenfalls sparsam umgehen, da sie per Tastatur gar nicht ausführbar sind. Selbst mit der Maus können Menschen mit einer bestimmten Einschränkung, behinderungsbedingt, Drag-and-Drop nicht ausführen.

Wenn Sie diese Kriterien beachten, haben Sie die Tastaturbedienbarkeit nach BITV 2.0 erfüllt. 


Barrierefreies Webdesign mit der BITV 2.0 – Artikelreihe