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

Ist barrierefreies Internet und barrierefreies Webdesign zwei verschiedene Dinge?

Als Computer und oder Internetneuling ist die Begriffswelt sehr verwirrend. Wenn Sie Ihre Webseite für Menschen mit unterschiedlichen Einschränkungen zugänglich machen möchten müssen Sie in Google nach jemand suchen der das kann. Aber nach welchem Begriff suchen Sie? Barrierefreies Internet oder barrierefreies Webdesign oder ganz anders? In diesem Artikel verrate ich es!

Zunächst einmal zur Begriffsklärung. „Barrierefreies Internet“ ist ein sehr unglücklicher Begriff. Der Begriff „Internet“ ist sehr allgemein. Schließlich besteht das „Internet“ aus mehrere Webseiten. Barrierefreiheit bedeutet, dass Gegenstände, in diesem Fall Webseiten, uneingeschränkt nutzbar sind für alle Menschen. Insbesondere soll Barrierefreiheit auf Menschen mit unterschiedlichen Behinderungen Rücksicht nehmen. Ein Barrierefreies Internet würde also bedeuten, dass alle Webseiten im ganzen Internet barrierefrei sind. Das ist aber mit barrierefreies Internet nicht gemeint.

Nach was klingt barrierefreies Webdesign? Webdesign ist die Gestaltung, der Aufbau und die Nutzerführung von Webseiten. Es geht also nur am Rande um Optik, sondern eher um Benutzerfreundlichkeit und Übersichtlichkeit. Leider wird oft mit Webdesign optische Eindrücke und Farbgestaltung verbunden. Da dies Kriterien sind die von jedem Menschen individuell gesehen werden, eignen sie sich nicht als Wesensmerkmal für Webdesign. Zur Gestaltung, Aufbau und Nutzerführung gibt es klare Regeln.

Barrierefreies Webdesign bedeutet, dass eine Webseite bei der Gestaltung, dem Aufbau und der Nutzerführung auf Menschen mit unterschiedlichen Behinderungen Rücksicht nimmt.

Wenn Sie jemamd suchen der Ihre Webseite barrierefrei macht, sollten Sie eigentlich nachdem Suchbegriff „barrierefreies Webdesign“ suchen. Da aber genauso viel Leute nach „barrierefreies Internet“ suchen, können Sie auch diesen Begriff vewenden. Somit sind diese Begriffe von der Bedeutung her tatsächlich gleich. Da aber „barrierefreies Webdesign“ der gängige Begriff ist, sollten Sie nach „barrierefreies Webdesign“ suchen.

Barrierefreies Webdesign nach BITV 2.0: Alternativen für CAPTCHAs

CAPTCHA bedeutet Completely Automated Public Turing test to tell Computers and Humans Apart. Das bedeutet wörtlich: „Vollautomatischer öffentlicher Turing-Test zur Unterscheidung zwischen Computern und Menschen“. Was da genau bedeutet und warum Captchas für barrierefreies Webdesign ein Problem sind und wie Sie dieses Problem lösen, dass erfahren Sie in diesem Artikel.

Leider gibt es heutzutage viele Programme, sie heißen Bots, die völlig ungefragt Formulare mit unsinnigen Texten ausfüllen und dann den Formular-Inhalt abschicken. Der Formular-Inhalt wird per Mail an einen „armen“ Menschen geschickt, der mit diesem Inhalt nichts anfangen kann.

Um sich vor solch unliebsamen Formular-Inhalten und Mails zu schützen wurden die Captchas erfunden. Ein Captcha ist ein Bild auf dem eine Folge von Buchstaben und Zahlen zu sehen ist. Die Zeichen werden mit Absicht etwas verzerrt dargestellt und/oder mit einem komplizierten Hintergrund schwer lesbar gemacht. Sie müssen dann diese Zeichen in ein Eingabefeld eingeben und mit einem Schalter die Eingabe bestätigen.  Nur wenn die dargestellten Zeichen richtig ins Eingabefeld eingegeben wurde, werden die zuvor eingegebenen Formulardaten abgeschickt. 

Grundsätzlich ist die Idee der Captchas ja nicht schlecht, allerdings haben blinde und sehbehinderte Menschen die mit einem Screenreader arbeiten keine Chance das Captcha zu erkennen, weil der Screenreader Bilder nicht „lesen“ kann. Deswegen ist es unabdingbar dass dieses Captcha-Bild einen Alternativtext bekommt, damit das Captcha-Bild barrierefrei ist.

Allerdings steht in der BITV 2.0 folgendes:
„Mindestens eine nicht bildbasierte CAPTCHA-Alternative muss vorhanden sein.“

Also muss noch eine andere Lösung her. Es gibt die Möglichkeit textuelle Aufgaben zu stellen:

Welcher der vier Begriffe passt nicht zu den anderen drei?

Zweig Trapez Kreis Dreieck
Hose schreien sprechen reden
Auto Kugelschreiber Füller Bleistift

Unter den Auswahlbegriffen befindet sich jeweils ein Eingabefeld für die Antwort und ein Schalter zum Abschicken der Antwort. Wenn die Eingaben richtig sind, werden z. B. Die Formulardaten übermittelt.

Eine andere Möglichkeit ist, das einfache Rechenaufgaben gestellt werden und die Zahlen in Buchstaben dargestellt werden.

Beispiel:

Wieviel ist eins plus drei?

Eine weitere Idee ist, dass Sie eine Blacklist(=schwarze Liste) erstellen. Hier stehen Begriffe drin, die einfach in einem Formular nichts zu suchen haben wie z. B. „Sex“, „Kondom“ usw. Bevor das Formular abgeschickt wird, überprüfen Sie ob Begriffe vorkommen, die in Ihrer Backlist vorhanden sind. Wenn ja, wird das Formular nicht abgeschickt.

Was bei den Alternativen zu Captchas wichtig ist: Sie sollten leicht zu lösen sein. Es geht nicht darum einen barrierefreien Intelligenztest durchzuführen, sondern unnötige Mails mit unsinnigen Formulardaten zu verhindern. Sie sollten bei der „Erfindung“ von Captchas bedenken, dass es auch Menschen mit Lernbehinderungen gibt, funktionale Analphabeten oder Menschen mit Migrationshintergrund . Diese Menschen sollten ebenfalls in der Lage sein, Ihre Captchas korrekt auszufüllen.


Barrierefreies Webdesign mit der BITV 2.0 – Artikelreihe

Barrierefreies Webdesign nach BITV 2.0: Welche Hilfsmittel gibt es für die Prüfung

Dies ist der erste Artikel in der Reihe „Barrierefreies Webdesign nach BITV 2.0“. Bevor ich die einzelnen Kriterien beleuchte, möchte ich Ihnen verraten welche Hilfsmittel Sie installieren sollten, damit die Prüfung nach BITV 2.0 nicht in Stress ausartet.

Bevor Sie anfangen Webseiten auf Barrierefreies Webdesign nach BITV 2.0 zu testen, sollten Sie optimal darauf vorbereitet sein. Deswegen möchte ich hier Hilfsmittel vorstellen, die Ihnen das Leben erleichtern beim Testen.

 

Browser-Erweiterungen

Für den Internet-Explorer und den Firefox gibt es Browser-Erweiterungen zum Testen von barrierefreies Webdesign.
Web Accessibility Toolbar (WAT), Version 2011 für den Internet Explorer Plugin für den Internet Explorer mit zahlreichen nützlichen Funktionen für die Prüfung auf Zugänglichkeit(=barrierefreies Webdesign).

Web Developer Toolbar, Version 1.1.9 für den Browser Firefox und Google Chrome
Erweiterung für Firefox mit zahlreichen nützlichen Funktionen für die Prüfung auf Zugänglichkeit.

Juicy Studio Accessibility Toolbar, Version 1.6 für den Browser Firefox
Erweiterung für Firefox mit Funktionen für die Prüfung von WAI-ARI-Elementen.

Diese 3 Toolbars sollten Sie alle installieren um barrierefreies Webdesign nach BITV 2.0 Testen zu können.

 

Wichtige Webseiten zur Prüfung von barrierefreies Webdesign nach BITV 2.0

Hier folgen noch einige wichtige Webseiten die Sie kennen sollten:
W3C-Validator
Online-Dienst des W3C zur Prüfung von HTML-Dokumenten auf Validität.

Veraltete Elemente und Attribute
Bookmarklet „Veraltete Elemente und Attribute“

Inhalte gegliedert (  )
Bookmarklet „Inhalte gegliedert“

Was ein W3C-Validator ist und was Bookmarklets sind, erfahren Sie in entsprechenden Artikeln. Hier geht es mir nur darum, dass Sie für Ihre weitere Arbeit alles „griffbereit“ haben.

Mit obigen Hilfsmitteln sind Sie gerüstet um eine Webseite auf barrierefreies Webdesign nach BITV 2.0 zu prüfen.


Barrierefreies Webdesign mit der BITV 2.0 – Artikelreihe

Barrierefreies Webdesign mit der BITV 2.0 – Artikelreihe

Am 22. September 2011 trat die BITV 2.0  in Kraft. Deswegen gibt es jetzt eine Artikelreihe über Barrierefreies Webdesign mit der BITV 2.0.

Barrierefreies Webdesign bedeutet, dass eine Webseite so gestaltet ist, das Menschen mit Unterschiedlichen Einschränkungen / Behinderungen sie wahrnehmen/lesen können. Ich mache ein paar Beispiele:
Blinde und Sehbehinderte die mit einem Screenreader Arbeiten, benötigen bei Bilder Alternativtexte, weil der Screenreader nur lese und nicht sehen kann. Ebenso ist es für Blinde und Sehbehinderte wichtig, dass die komplette Webseite mit der Tastatur bedienbar ist, weil sie nicht mit einer Computermaus arbeiten können. Menschen mit einer Farbsehschwäche benötigen einen ausreichenden Farbkontrast zwischen Hintergrund-und Schriftfarbe, weil sie sonst die Schrift nicht erkennen können.
In oben genannter BITV 2.0 sind alle Kriterien aufgeführt die erfüllt sein müssen, damit man nach deutschem Recht von barrierefreies Webdesign sprechen kann.

Wenn Sie wissen möchten warum für Unternehmenswebseiten barrierefreies Webdesign wichtig ist sollten sie den Blogartikel „Warum ist barrierefreies Webdesign für Unternehmen wichtig“ lesen.

Folgende Artikel sind geplant:
Barrierefreies Webdesign nach BITV 2.0: Welche Hilfsmittel gibt es für die Prüfung
Barrierefreies Webdesign nach BITV 2.0: Alternativen für CAPTCHA
Barrierefreies Webdesign nach BITV 2.0: wie wird Tastaturbedienbarkeit bei einer Webseite gewährleistet?
Barrierefreies Webdesign nach BITV 2.0: was bedeutet Valides HTML?
Barrierefreies Webdesign nach BITV 2.0: Texte sind lesbar und verständlich zu gestalten
Barrierefreies Webdesign nach BITV 2.0: Frames barrierefrei darstellen

Wenn Sie weitere Themenwünsche haben, dürfen Sie mir gerne eine Mail schreiben an:
info@marlem-software.de oder rufen Sie mich an 07121/504458


Weitere Artikel

Warum ist barrierefreies Webdesign für Unternehmen wichtig?

Im Blogartikel „Was bedeutet barrierefreie Informationstechnik?“ habe ich geschrieben, dass Unternehmen nicht dazu verpflichtet sind Ihre Webseiten barrierefrei zu gestalten. Mit diesem Artikel möchte ich erklären, warum es trotzdem sinnvoll ist eine Unternehmenswebseite auf barrierefreies Webdesign umzustellen.

In Deutschland leben 9,6 Millionen Menschen mit Behinderung. Davon sind 7 Millionen schwerbehindert, dass bedeutet sie haben einen Grad der Behinderung von 50 oder mehr. Diese große Anzahl von Menschen muss von Unternehmern als potentieller Kundenkreis wahr genommen werden! Unternehmen die im Internet Produkte oder eine Dienstleistung (z. B. Pizza-Express) verkaufen, sollten sich im klaren sein, dass Menschen mit Behinderung viel öfter im Internet einkaufen als in einem Geschäft.

Rollstuhlfahrer die das Haus ohne fremde Hilfe nicht verlassen können, aber zwei nichtbehinderte Hände haben können im Internet Einkäufe tätigen. Bücher, CDs, DVDs, Weihnachts-und Geburtstagsgeschenke für Freunde oder Familienmitglieder. Alles kann im Internet eingekauft werden.

Menschen die gehörlos(telefonieren können diese Menschen verständlicherweise nicht!) sind, können im Internet Pizza bestellen! Sie werden sich einen Pizza-Express suchen, bei dem man auf der Webseite die Pizza bestellen kann!

Obwohl ich selber „nur“ gehbehindert bin und ein Auto besitze kaufe ich trotzdem lieber im Internet ein. Es spart einfach sehr viel Zeit! Bis ich von meiner Wohnung beim Parkplatz bin, bis ich dann nach Reutlingen in die Innenstadt gefahren bin, bis ich dann einen Behindertenparkplatz gefunden habe der „gnädiger“ Weise frei ist, bis ich dann vom Behindertenparkplatz zur Buchhandlungen gelaufen bin, das alles ist extrem Zeitintensiv! Da geht das Einkaufen im Internet wesentlich schneller!

Was bedeutet nun barrierefreies Webdesign?

Ein Webseite die nach den Grundsätzen des barrierefreien Webdesign erstellt wurde, ist für Menschen mit unterschiedlichen Behinderungen nutzbar(=zugänglich). Das bedeutet, dass Blinde, Sehbehinderte, Spastiker, Farbenblinde, Menschen mit altersbedingten Sehproblemen den kompletten Inhalt der Webseite wahrnehmen können!
In Deutschland gibt es eine Verordnung, die BITV 2.0, die festlegt wie eine Webseite beschaffen sein muss, damit sie barrierefrei ist.

Um es nochmal ganz klar auf den Punkt zu bringen:
Barrierefreies Webdesign bringt für Unternehmen neue Kunden und somit mehr Umsatz!

Was bedeutet barrierefreie Informationstechnik?

Eigentlich ist es nicht sinnvoll nachdem ich so viele Artikel über Barrierefreiheit geschrieben habe, solch einen Grundsatzartikel zu schreiben. Ich hatte heute ein Telefonat mit einer Person die in der IT-Branche arbeitet und Sie hatte so überhaupt keine Ahnung was Barrierefreiheit ist, deswegen dieser Blogartikel!

Im Mai 2002 wurde ein Gleichstellungsgesetz für behinderte Menschen verabschiedet. Dieses Gesetz soll Benachteiligung von behinderten Menschen vermeiden.
In diesem Gesetz gibt es folgenden Paragraphen:

§ 12a Barrierefreie Informationstechnik

(1) Öffentliche Stellen des Bundes gestalten ihre Websites und mobilen Anwendungen, einschließlich der für die Beschäftigten bestimmten Angebote im Intranet, barrierefrei. Schrittweise, spätestens bis zum 23. Juni 2021, gestalten sie ihre elektronisch unterstützten Verwaltungsabläufe, einschließlich ihrer Verfahren zur elektronischen Vorgangsbearbeitung und elektronischen Aktenführung, barrierefrei. Die grafischen Programmoberflächen sind von der barrierefreien Gestaltung umfasst.
(2) Die barrierefreie Gestaltung erfolgt nach Maßgabe der aufgrund des § 12d zu erlassenden Verordnung. Soweit diese Verordnung keine Vorgaben enthält, erfolgt die barrierefreie Gestaltung nach den anerkannten Regeln der Technik.
(3) Insbesondere bei Neuanschaffungen, Erweiterungen und Überarbeitungen ist die barrierefreie Gestaltung bereits bei der Planung, Entwicklung, Ausschreibung und Beschaffung zu berücksichtigen.
(4) Unberührt bleiben die Regelungen zur behinderungsgerechten Einrichtung und Unterhaltung der Arbeitsstätten zugunsten von Menschen mit Behinderungen in anderen Rechtsvorschriften, insbesondere im Neunten Buch Sozialgesetzbuch.
(5) Die Pflichten aus Abschnitt 2a gelten nicht für Websites und mobile Anwendungen jener öffentlichen Stellen des Bundes nach § 12 Satz 1 Nummer 2 und 3, die keine für die Öffentlichkeit wesentlichen Dienstleistungen oder speziell auf die Bedürfnisse von Menschen mit Behinderungen ausgerichtete oder für diese konzipierte Dienstleistungen anbieten.
(6) Von der barrierefreien Gestaltung können öffentliche Stellen des Bundes ausnahmsweise absehen, soweit sie durch eine barrierefreie Gestaltung unverhältnismäßig belastet würden.
(7) Der Bund wirkt darauf hin, dass gewerbsmäßige Anbieter von Websites sowie von grafischen Programmoberflächen und mobilen Anwendungen, die mit Mitteln der Informationstechnik dargestellt werden, aufgrund von Zielvereinbarungen nach § 5 Absatz 2 ihre Produkte so gestalten, dass sie barrierefrei genutzt werden können.
(8) Angebote öffentlicher Stellen im Internet, die auf Websites Dritter veröffentlicht werden, sind soweit möglich barrierefrei zu gestalten.

Dieser Paragraph ist die Grund warum solche Begriffe wie „Barrierefreies Internet“ „barrierefreies Webdesign“, und „barrierefreie Softwareentwicklung“ entstanden sind.

Das Behindertengleichstellungsgesetz ( BGG ) wurde geändert und trat am 1. September 2016 in Kraft. Hier der neue Paragraph: Barrierefreie Informationstechnik – das neue Behindertengleichstellungsgesetz ( BGG )

Obiger Paragraph verpflichtet staatliche Einrichtungen Ihre Webseiten und Software barrierefrei zu gestalten. Unternehmen sind nicht dazu verpflichtet Ihre Webseiten und Software barrierefrei zu gestalten, sie sollten es tun!

In folgendem Video wird Barrierefreiheit in der Informatik erklärt.

Folgende Blogartikel liefern weitere Informationen zu barrierefreie Informationstechnik:

Was ist barrierefreie Softwareentwicklung?

Zur barrierefreie Informationstechnik gehört die barrierefreie Softwareentwicklung. Wenn eine Software so entwickelt wird, dass Menschen mit unterschiedlichen körperlichen Einschränkungen diese Software bedienen können, dann ist das barrierefreie Softwareentwicklung. Nachstehende Links gehören zu barrierefreie Softwareentwicklung:

Folgendes Video erklärt die barrierefreie Softwareentwicklung mit Dotnet:

Das nächste Video erklärt die barrierefreie Softwareentwicklung mit Java – Swing:

Was ist barrierefreies Webdesign?

Ein weitere Baustein der barrierefreie Informationstechnik ist das barrierefreie Webdesign. Barrierefreies bedeutet dass eine Webseite so programmiert wird dass sie auch für Menschen mit körperlichen Einschränkungen bedienbar ist. Folgende Artikel beschäftigen sich mit barrierefreies Webdesign:

Oben ist die Schriftfarbe gut sichtbar, weil ein guter Farbkontrast zwischen Hintergrund-und Schriftfarbe gewählt wurde unten nicht
Auf dem Bild sehen Sie eine Webseite bei der oben der Farbkontrast zwischen Hintergrund-und Schriftfarbe in Ordnung ist und unten ist der Farbkontrast sehr schlecht.

Hier noch ein Video zu barrierefreies Webdesign:

Barrierefreiheit bei Betriebssystemen

Damit Menschen mit körperlichen Einschränkungen Coomputer, Laptops, Smartphones, Iphones, Tablets und Ipads bedienen können müssen auch Betriebssysteme barrierefrei sein. Nachstehende Artikel beschäftigen sich mit barrierefreie Informationstechnik bei Betriebssysteme:

Zugangshilfen beim Betriebssystem Linux - Ubuntu das Register "Sehen"

Auf dem Bild sehen Sie die Zugangshilfen für behinderte Menschen des Betriebssystems Ubuntu.

Hier gibt es noch ein Video zum Thema „Barrierefreiheit bei Betriebssysteme“:

 

Barrierefreie App-Entwickling

Auch Apps sollten so entwickelt werden, dass sie von Menschen mit unterschiedlichen Einschränkungen bedient werden können. Dieser Vorgang nennt sich barrierefreie App-Entwicklung. Folgender Artikel erklärt was barrierefreie Apps sind:

Apps für Menschen mit Behinderung

Apps können das Alltagsleben von Menschen mit Behinderungen enorm erleichtern. Deswegen habe ich mich auch mit Apps für Behinderte beschäftigt:

Was bedeutet Accessibility?

Accessibility ist englisch und bedeutet wörtlich übersetzt Zugänglichkeit. Gemeint ist aber Barrierefreiheit. In folgendem Artikel wird erklärt was Accessibility bedeutet.

barrierefreie Informationstechnik – Beratung

Wenn Sie Beratung möchten in Sachen barrierefreie Informationstechnik dann schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an: 07121/504458 .

Barrierefreies Webdesign mit Google Tools

Das Unternehmen Google hat Tools entwickelt, die das überprüfen von barrierefreiem Webdesign erleichtern.

Rachel Shearer, Software-Ingenieur bei Google erklärt: „Alleine die Zahl der Sehbehinderten in den USA ist größer, als die Menge aller Internetnutzer in Kanada“.
Google sah deswegen die Notwendigkeit, Testwerkzeuge zu entwickeln um das barrierefreie Webdesign voran zu treiben. Es gibt nun „Accessibility Developer Tools“ für den Chrome Browser. Diese Erweiterung ist Open Source und funktioniert bei Google-Browser Chrome ab Version 21.0.137.1. Es ist darauf zu achten, dass „experimentelle Erweiterungen“ in dein Einstellungen aktiviert ist.

Barrierefreies Webdesign mit der BITV 2.0

Beim barrierefreien Webdesign geht es darum, eine Webseite so zu gestalten, dass sie für Menschen mit unterschiedlichen Einschränkungen wahrnehmbar ist. Nachdem im Gleichstellungsgesetz von 2002 festgelegt wurde, dass Webseiten und Programme barrierefrei gestaltet werden sollen, wurde die Barrierefreie-Informationstechnik-Verordnung (BITV) in Deutschland ins Leben gerufen. Am 22. September 2011 trat nun die BITV 2.0 in Kraft.

Barrierefreies Webdesign – Definition

Barrierefreies Webdesign bedeutet, dass Webseiten so gestaltet sind, dass sie für alle Menschen, auch für Menschen mit körperlichen Einschränkungen, wahrgenommen und bedient werden können.

Hier noch ein Youtube-Video dass barrierefreies Webdesign erklärt:

Das Gesetz

Im Mai 2002 wurde ein Gleichstellungsgesetz verabschiedet, welches die Benachteiligung von behinderten Menschen verhindern soll. In diesem Gesetz gibt es den § 12a Barrierefreie Informationstechnik in dem staatliche Einrichtungen dazu verpflichtet sind, ihre Webseiten und Programme barrierefrei zu gestalten. Nun musste erst einmal definiert werden, welche Kriterien eine Webseite erfüllen muss, damit sie barrierefrei ist.

Richtlinien: WCAG 2.0 und BITV 2.0

Die WCAG Working Group ist eine internationale Arbeitsgemeinschaft, welche die Richtlinien erarbeitet hat. Veröffentlicht wurde die WCAG 2.0 von der W3C. Leider ist es im Bürokratenstaat Deutschland nicht möglich, diese Richtlinien 1 zu 1 zu übernehmen. Wir deutschen benötigen unbedingt was Eigenständiges, eine VERORDNUNG: die Barrierefreie-Informationstechnik-Verordnung 2.0 .

Private und kommerzielle Webseiten sind nicht verpflichtet, ihre Webseite nach BITV 2.0 barrierefrei zu gestalten. Dass es von Privatpersonen, die oft auch Baukastenwebseiten haben, nicht verlangt werden kann, ihre Webseite barrierefrei zu gestalten, leuchtet mir sofort ein. Warum kommerzielle Webseiten nicht dazu verpflichtet werden, ist für mich überhaupt nicht nachvollziehbar. Personen, die aufgrund Ihrer Behinderung nicht selbstständig das Haus verlassen können, aber geistig sehr wohl in der Lage sind, Einkäufe zu tätigen, verwenden das Internet sehr häufig als Einkaufsmöglichkeit. Renommierte Webseiten mit Einkaufsmöglichkeiten gehören, wenn es nach mir ginge, dazu verpflichtet, ihre Webauftritte barrierefrei zu gestalten. Die Wirtschaft muss endlich lernen, dass behinderte Menschen kein „Störfaktor der Gesellschaft“ sind, sondern potentielle Kunden! In Deutschland gibt es rund 10 Millionen Menschen mit Behinderung. Bei einer Gesamtbevölkerung von 83 Millionen sind das über 10%. Das lohnt sich also sehr wohl.

Die Anforderungen von BITV 2.0

Die Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (Barrierefreie-Informationstechnik-Verordnung – BITV 2.0) wurde am 12.09.2011 vom Bundesministerium Arbeit und Soziales verordnet. Sie richtet sich an die Gestaltung von Informationstechnik. Diese muss Menschen mit Behinderungen den Zugang zu Internetseiten und den Erwerb von Informationen sowie die Bedienung möglich und zugänglich machen.
Dazu sind diverse anzuwendende Standards, Anforderungen und Bedingungen in verschiedenen Prioritäten zu berücksichtigen. Die Startseite der Website muss laut der BITV 2.0 in Gebärdensprache oder zumindest leicht verständlicher Sprache drei wichtige Bereiche erklären:

  • Informationen zum Inhalt
  • Hinweise zur Navigation der Website
  • Hinweise auf weitere in diesem Auftritt vorhandene Informationen in Deutscher Gebärdensprache oder in Leichter Sprache

Die Inhalte von BITV 2.0

Die Richtlinien der BITV 2.0 gliedern sich in unterschiedliche Prioritäten. Zur ersten Priorität gehören beispielsweise die folgenden Anforderungen:

  • Zwar existieren einige Ausnahmeregeln, dennoch muss grundsätzlich für jeden Nicht-Text-Inhalt auch eine Text-Alternative bereitgestellt werden, welche den Zweck des Inhalts verdeutlicht.
  • Diese Alternativtexte müssen ebenfalls für alle zeitgesteuerten Medien installiert und angeboten werden. Das betrifft sowohl Videos als auch Audiodateien, für die entweder Untertitel oder Audio-Deskriptionen in Frage kommen.
  • Jegliche Inhalte auf der Website müssen ohne Informations- oder Strukturverlust in verschiedenen Wiedergabeformen abrufbar sein.
  • Den Besuchern der Website muss die Wahrnehmung der Inhalte sowie die Unterscheidung zwischen Vorder- und Hintergrund grundsätzlich möglich gemacht werden.

Auch im Bereich der zweiten Priorität der BITV 2.0 sind einige wichtige Anforderungen für die behindertengerechte Darstellung von Inhalten und visuellen Darstellungen verankert:

  • Besuchern und Inhaltsinteressierten muss genügend Zeit zum Lesen und verarbeiten der Inhalte gegeben werden. Das bedeutet, dass zeitliche Limits für die Inhaltsdarstellung nicht erlaubt sind.
  • Die Zugänglichkeit zur Funktionalität muss über die gesamte Zeitdauer des Seitenbesuchs über eine Tastatur gewährleistet sein. Hierzu eigenen sich beispielsweise Bildschirmtastaturen.
  • Die Inhalte der Seite müssen so dargestellt werden, dass in keinem Fall epileptische Anfälle entstehen können.

Worauf muss ich als Website-Betreiber achten?

Betreiben Sie daher selbst eine Website oder haben Sie es zukünftig vor, ist es wichtig, auf die entsprechenden Anforderungen der BITV 2.0 zu achten. Wie diese zu erfüllen sind, habe ich mit meinem Unternehmen Marlem-Software über die Jahre perfektioniert. Barrierefreies Webdesign orientiert sich an verschiedenen Hauptfaktoren. Diese sind beispielsweise:

  • Die Bereitstellung von Alternativtexten zu allen inhaltlichen sowie durch verschiedene Medien dargestellten Informationen
  • Die Orientierung, Navigation und Steuerung der Website für Personen mit Behinderungen
  • Das Angebot von unterstützenden Hilfsmöglichkeiten wie der Bildschirmtastatur
  • Alternativen Informationsangaben zu Bildern, Videos und Audiodateien

Europäische Union: Webshops müssen barrierefrei werden

Obwohl ich trotz meiner Behinderung und aufgrund des Besitzes eines Pkw nicht gezwungen bin, im Internet einzukaufen, erwerbe ich meine IT-Fachbücher lieber im Web als im Laden. Allein die Suche nach einem freien Behindertenparkplatz kann extrem nervenaufreibend sein. Deswegen sollten auch Webshops sich über Barrierefreiheit Gedanken machen. Die Europäische Union, abgekürzt EU, verpflichtet jetzt auch Online-Händler zur Barrierefreiheit:

Auch wenn in Deutschland wieder viel gejammert wird, weil angeblich die Kosten zu hoch sind, begrüße ich diesen Schritt der Europäischen Union. Deutschland muss lernen, dass das Ausgrenzen von bestimmten Personengruppen gesetzeswidrig ist.

Deswegen würde ich mich sehr freuen, wenn auch Besitzer von gewerblichen Webseiten sich dazu entscheiden könnten, ihre Webseite barrierefrei zu gestalten. Bei meinem Unternehmen Marlem-Software erhalten Sie barrierefreies Webdesign nach BITV 2.0 !

Hier noch ein Youtube-Video von mir Webdesign Reutlingen – Zugänglich und barrierefrei als Video:

Weitere Artikel zum Thema:

Barrierefreiheit mit WordPress – eine Anleitung in Text, Bild und Video

Mein Blog basiert auf einem System, das sich WordPress nennt. Da mir Accessibility bei Webseiten ebenfalls ein großes Anliegen ist, habe ich natürlich auch bei meinem Blog darauf geachtet, dass alles barrierefrei ist. Wie Accessibility mit WordPress funktioniert, verrate ich in diesem Artikel.

Bevor ich zum Thema Barrierefreiheit (auf englisch Accessibility) mit WordPress komme, muss ich kurz die Grundlagen von WordPress erklären. WordPress ist eine Blogsoftware. Ein Blog ist eine spezielle Form einer Internetseite auf dem Artikel geschrieben werden. Es müssen nicht zwingend Fachartikel sein. Es kann auch ein „öffentliches“ Tagebuch geführt werden, es kann über Lebensfreude geschrieben werden oder ein anderes Thema. Es gibt auch Blogger (=Autoren von Blogartikeln) die Ihre Leser darüber informieren wieviel neue Kontakte sie auf der Social Media Plattform Xing gesammelt haben.

In meinem Blog finden Sie hauptsächlich Fachartikel über Accessibility, Suchmaschinenoptimierung und Social Media. Der Blog ist wie oben schon erwähnt ein WordPress-Blog.

In WordPress können Sie Seiten und Artikel erstellen. Die Links „Home“, „Wer schreibt her?“, „Referenzen“ und „Impressum“ in meinem Blog sind Seiten. Das was ich hier schreibe ist ein Artikel.

Dann gibt es Plugins. Das sind im Prinzip kleine „Programme“ welche dem WordPress-Blog neue Funktionen spendieren. So habe ich z.B. ein Plugin für Suchmaschinenoptimierung installiert, welches mir hilft bei der Onpage-Optimierung meiner Seiten und Artikel. Leider gibt es kein Plugin, welches den kompletten Blog barrierefrei(=Accessibility) macht.

Damit Sie einen Einblick bekommen was WordPress ist und was damit gemacht werden kann, hier noch ein Youtube-Video:

Barerierefreies Webdesign – 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.
Barerierefreies 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 – Richtlinien

Es werden Richtlinien benötigt, um zu beurteilen ob eine Website nach den Grundlagen des barrierefreien Websites erstellen, erstellt wurde. So existieren internationale und nationale (also für Deutschland geltende) Richtlinien für solche Sites.

International gelten die Web Content Accessibility Guidelines wcag 2

In Deutschland gilt die Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz

Wenn ich eine Webseite z. B. aus Österreich frei von Barrieren machen soll, wende ich die WCAG 2 an. Bei Seiten aus Deutschland die BITV 2.0.

Barrierefreiheit bei Websites gibt es also national und international.

Hier ein Youtube-Video über barrierefreies Webdesign von mir:

Umsetzung von Barrierefreiheit mit WordPress

Selbstverständlich werde ich hier nicht sämtliche Kriterien der Barrierefreiheit besprechen, sondern nur ein paar Tipps geben, die aber schon sehr viel bewirken können.

Für Menschen die lieber gerne Video schauen als lesen, gibt es jetzt auch ein Youtube-Video zum Thema Barrierefreiheit bei WordPress:

Um Accessibility bei WordPress umzusetzen muss man Themes bearbeiten. Noch so ein komischer Begriff. Was ist ein Theme? Ein Theme ist eine Art „Kleid“ für den Blog. Ein Theme bestimmt das Aussehen Deines Blog. Eine anderes Wort für Theme wäre „Vorlage“ oder „Template“. Es gibt sehr viele fertige Themes die kostenfrei heruntergeladen werden können. Wenn Sie mehrere Themes in Ihrem Blog installiert haben, können Sie in Sekunden das komplette Aussehen Ihres Blogs verändern! Das ist eine der vielen Stärken von WordPress.

Um Ihr Theme überhaupt bearbeiten zu können, müssen Sie den zu bearbeitenden Dateien per FTP schreibrechte geben. Erst dann können Sie überhaupt die Dateien bearbeiten. Von Haus aus sind alle Theme Dateien schreibgeschützt.

Danach gehen Sie in den Admin-Zugang Ihres WordPress-Blog und klicken auf „Design“ und danach auf „Editor“.

Skalierbare Schriftgrößen

Vor Ihren Augen öffnet sich jetzt eine Datei mit Namen „style.css“. In dieser Datei können Sie wichtige Dinge für Accessibility einstellen. Wenn Sie etwa die Schriftgröße in relative Schriftgrößen statt feste Schriftgrößen ändern möchten, dann können Sie dies in der Datei style.css ändern. Suchen Sie einfach in der Datei „style.css“ nach „font-size“ und ersetzen Sie pt oder px durch relative Angaben.

Beispiel:
font-size: 0.750em;

oder

font-size: 100%;

CSS-Daatei in WordPress: Schriftgröße barrierefrei angeben
CSS-Daatei in WordPress: Schriftgröße barrierefrei angeben

Die skalierbaren Schriftgrößen sind für Menschen mit Sehbehinderung wichtig, damit sie im Browser die Schrift zoomen, sprich vergrößern, können.

Der richtige Farbkontrast hilft Menschen mit Farbfehlsichtigkeit

Farbfehlsichtigkeit bedeutet, dass Menschen einer Farbe nicht den korrekten Namen zuordnen können oder Probleme haben zwischen zwei Farben einen Unterschied zu erkennen.
Wenn Sie Hintergrundfarbe und Schriftfarbe ändern möchten um den Farbkontrast Accessibilty-Gerecht einzustellen, dann können Sie dies auch in der Datei „style.css“ ändern. Suchen Sie einfach nachdem Wort „color“. So finden Sie die Hintergrund und die Schriftfarbe. Mit dem Colour Contrast Analyser können Sie überprüfen ob der von Ihnen gewählte Farbkontrast für Menschen mit einer Farbsehschwäche in Ordnung ist.

Jedes Theme hat eine Datei mit dem Namen „header.php“ . Falls in Ihrem Theme ganz oben eine Grafik eingebaut ist, dann können Sie in der Datei header.php nachschauen ob diese Grafik einen Alternativtext hat, damit der Screenreader von blinden und Sehbehinderten Menschen entsprechende Informationen bekommt.

Oben ist die Schriftfarbe gut sichtbar, weil ein guter Farbkontrast zwischen Hintergrund-und Schriftfarbe gewählt wurde unten nicht
Oben ist die Schriftfarbe gut sichtbar, weil ein guter Farbkontrast zwischen Hintergrund-und Schriftfarbe gewählt wurde unten nicht

Alternativtexte für Bilder

Wenn Sie Bilder in Artikel und Seiten einfügen, sorgen Sie dafür, dass Ihre Bilder Alternativtexte haben. Der Dialog für Bild einfügen hat ein Eingabefeld mit der Beschriftung „Alternativtext“. Hier können Sie einen Text eingeben der dem blinden oder sehbehinderten Menschen vom Screenreader übermittelt wird.

Beispiel für Alternativtexte für Bilder mit dem alt-Attribut:

<img src="barrierefreies_webdesign_banner.jpg" alt="Firmenlogo und eine Bildschirmtastatur entwickelt von Marlem-Software" style="max-width:800px;" height="162"/>

HTML Validation

Damit die Vorlese-Software von Blinden und Sehbehinderten, Screenreader genannt, keine Probleme hat bei dem Lesen einer WordPress-Webseite muss diese HTML-Valide sein. Das bedeutet, dass die WordPress-Webseite den Standards der W3.org entsprechen muss.

Eine WordPress-Webseite W3C-Valide machen, gelingt nicht immer. Wenn Sie ein Plugin einsetzen, das Sie unbedingt benötigen, dass aber W3C-Fehler in Ihre Webseite bringt, können Sie nichts dagegen tun.

Mit dem W3C-Validator können Sie testen ob ihr HTML valide ist.

Barrierefreie Formulare

Wenn Sie in Ihre WordPress-Webseite Formulare einbauen sollten auch diese barrierefrei sein. Damit der Screenreader weiß welche Beschriftung zu welchem Eingabefeld gehört, sollten Beschriftungen mit den Eingabefeldern verknüpft sein:

<label for=“vorname“>Vorname: ([Alt]+v)
<input id=“vorname“ accesskey=“v“ maxlength=“30″ name=“Vorname“ size=“30″ type=“text“ />

Das Eingabefeld Vorname bekommt einen Label. mit „for“ im Label und „id“ im Eingabefeld werden
Eingabefeld und Label verknüpft. Das ist wichtig für Screenreader.
Mit dem Attribut „accesskey“ kann dem Eingabefeld ein Shorcut zugeordnet werden.
Die Tasten alt+v aktivieren das Eingabefeld „Vorname“, alt+n das Eingabefeld „Nachname“.
Für den Nutzer des Formulars muss es erkennbar sein, dass es die Möglichkeit von Shortcuts gibt.

Für Menschen mit einer Sehbehinderung ist es wichtig, dass es gut erkennbar sein muss, welches Bedienelement aktiv ist. Meine Lieblingslösung ist, dass die Hintergrundfarbe des aktiven Bedienelements Gelb ist. Das läßt sich wie folgt mit CSS ganz einfach lösen:

/* Mit nachstehender Zeile bekommen alle aktiven Eingabefelder und Schalter eine gelbe Hintergrundfarbe */
input:focus { background-color:yellow;}

Wenn Sie Ihre Formulare so gestalten, dann sind Ihre Formulare barrierefrei.

Eingabefehler nicht nur optisch anzeigen sondern Sätze schreiben

Oft setzen Web-Entwickler beim Feedback zum Verhalten der Webseiten-Besucher, etwa bei der Nutzung des Kontaktformulares, ausschließlich auf Farbe. Beispiel: Wird ein Pflichtfeld nicht ausgefüllt, erhält es eine rote Umrandung. Wer jedoch eine Farbenfehlsichtigkeit hat, kann damit nicht viel anfangen. Derartige Fehlermeldungen sollten Sie stets zusätzlich in Worte fassen.

WP Accessibility Plugin

Es gibt inzwischen ein Plugin, das WP Accessibility Plugin mit dem Sie bestimmte Sachen per Einstellungen in WordPress barrierefrei machen können. Folgende Einstellungen und noch mehr sind möglich mit diesem Plugin:

  • Accessibility toolbar mit Schriftvergrößerung und Kontrast-Unschalter hinzufügen.
  • Füge die Sprache der Seite und Leserichtung zum HTML-Element hinzu.
  • Zu HTML 5 Elementen ARIA landmark roles hinzufügen
  • Farbkontrast-Tester zwecks Farbenblindheit nach WCAG 2.0

Barrierefreie WordPress-Themes – gibt es das?

Bevor Sie sch die Mühe machen ihr WordPress-Theme selber barrierefrei zu programmieren oder einen Programmierer zu beauftragen, können Sie nach WordPress-Themes schauen, die schon barrierefrei sind. Auf der WordPress-Seite können Sie inzwischen nach barrierefreie Themes im Filter suchen in dem Sie in der Spalte „Funktionen“ die Option „Für Barrierefreiheit geeignet anklicken. Sie bekommen dann folgendes Suchergebnis:

Anmerkung von Markus

Ich habe diese Themes ausprobiert. Sie sind nicht 100%ig barrierefrei. Beim Theme „Twentysixteen“ müssen umfangreiche Farbanpassungen gemacht werden, damit das Theme für Menschen mit Farbenfehlsichtigkeit nutzbar ist.

Barrierefreiheit bei WordPress Testen

Ein automatisierter Test gibt es nicht. Ein Test auf Barrierefreiheit kann nur von Hand mit Hilfe von oben genannten Richtlinien erfolgen.

Barrierefreiheit mit WordPress – Schlussbemerkung

Wenn Sie diese Tipps umsetzen haben Sie einiges dafür getan, damit Menschen mit unterschiedlichen Einschränkungen den Inhalt Ihres WordPress-Blogs war nehmen können. Achja, die Suchmaschine freut sich auch über barrierefreie Blogs. Google ist blind und kann nur lesen.

Wenn Sie noch Fragen haben zur Barrierefreiheit mit WordPress dürfen Sie mich gerne Anrufen 07121/504458 oder eine Mail schreiben an info@marlem-software.de .