Barrierefreie Websites und ergonomische Softwaregestaltung

Grafische Darstellung in mehreren Einzelteilen: Ein gesunder Volleyballspieler und ein Behinderter spielen gemeinsam mit der Erdkugel als Ball, der beim Betrachten aller Seiten des Angebots von einem zum anderen wandert. Unter dem fliegenden Ball befindet sich der Schriftzug WWW als Hinweis, daß die Erdkugel hier mit dem Internet assoziiert wird.

Volleyballspieler, aufrecht (Teil 1 von 3). Behinderter Volleyballspieler, im Rollstuhl (Teil 2 von 3). Die Erdkugel als *Volleyball*: Eine für alle. (Teil 3 von 3).

3.3.4 Kontrast und Textgröße

Gerade für ältere Menschen sind neben ausreichender Textgröße starke Kontraste wichtig zur Unterscheidung zwischen Vordergrund und Hintergrund. Farbliche Hervorhebungen von Textstellen sollten zusätzlich aus dem Kontext oder über die Verwendung entsprechender Zusatzauszeichnungen ersichtlich sein. Hierfür stehen Ihnen unter anderem Überschriften, Absätze und Fettschrift zur Verfügung.

Kontraste

Verwenden Sie kontrastreiche Farben. Überpüfen Sie den Kontrast mit Hilfe eines Schwarz-Weiß-Bildschirmes oder mit einem Programm zur Kontrastanalyse. Für normalen Text soll das Kontrastverhältnis mindestens 4,5 : 1 betragen, bei Großschrift genügt 3 : 1.

Auf den Mindestkontrast kann bei nebensächlichen Texten und Schriftgrafiken wie beispielsweise inaktiven Komponenten einer Benutzerschnittstelle verzichtet werden. (Schriftgrafiken sind übrigens nur in seltenen Ausnahmefällen erlaubt.)

Umgekehrt soll der Kontrast in besonders sensiblen Bereichen wie zentralen Navigations- und Einstiegsangeboten sogar 7 : 1 (4,5 : 1 bei Großschrift) betragen.

Vermeiden Sie generell transparente Grafiken, wenn die darüber vermittelten Informationen nicht nur nebensächlich sind: Bei Änderung der Hintergrundfarbe durch ein Nutzer-Style-Sheet könnten diese Informationen verloren gehen.

Textgröße

Die Textgröße soll sich auch ohne assistive Technologien auf 200% vergrößern lassen, ohne dass es zu einem Verlust von Inhalt oder Funktionalität kommt.

Zur minimalen Schriftgröße findet sich in der BITV[9] leider keine Angabe. Sie können sich jedoch an unseren ergonomischen Hinweisen unter der Überschrift Sind die Buchstaben groß genug? orientieren.

Beispiel

Bei der Verwendung von Cascading Style Sheets (CSS[14] ) stehen Ihnen Attribute für die Vorder- und Hintergrundfarbe sowie weitere Formatierungen zur Verfügung.

Nachfolgend die Formatierung eines Absatzes mit schwarzer Schrift und weißem Hintergrund sowie die Formatierung einer Hervorhebung von Text in fetter roter Schrift und mit Rahmen.

Beispielabsatz:

Ich bin ein Absatz mit schwarzer Schrift und weißem Hintergrund. Und jetzt folgt ein rot hervorgehobenes Wort: Hervorgehoben!

Beispielquelltext (CSS[14] -Code):

/* Formatierung eines Absatzes */
p.schwarzweiss {
/* Hintergrundfarbe: weiß */
background-color: #ffffff;
/* Schriftfarbe: schwarz */
color: #000000;
}
/* hervorgehobene Formatierung von Fließtext */
em.hervor {
/* Hintergrundfarbe: weiß */
background-color: #ffffff;
/* Rahmen: rot */
border: 1px solid #ff0000;
/* Schriftfarbe: rot */
color: #ff0000;
/* Schriftgewicht: fett */
font-weight: bolder;
}

Überprüfung

Überprüfung per WAT[46] -Toolbar:

Über "Farben" können Sie sich die Seite in Graustufen anzeigen lassen. Weiterhin können Sie sich die verwendeten Farben in einem neuen Fenster ausgeben lassen und eine Kontrastanalyse durchführen.

WAT-Toolbar: Graustufen

Überprüfung per Web Developer:

Über "Informationen » Verwendete Farben anzeigen" können Sie alle auf der Seite vorkommenden Farben in einem neuen Fenster ausgeben lassen. Eine Kontrastanalyse ist nicht verfügbar.

Web Developer: Verwendete Farben anzeigen

Überprüfung per Kontrast-Analyse:

Ob die Farben auf ihren Seiten ausreichende Kontraste aufweisen, können Sie mit dem Kontrast-Analyzer (Download::Werkzeuge) überprüfen.

Bildschirmfoto der Software zur Kontrast-Analyse

Wer es lieber online mag: Der Colour Contrast Check by snook.ca bietet neben einer Farbkontrastanalyse Links zu weiteren Online-Tools dieser Art.

0.6.x Glossar zu dieser Seite

9 BITV
Barrierefreie Informationstechnikverordnung: Rechtliche Grundlage für Behörden und Einrichtungen der Bundesrepublik Deutschland, die barrierefreie Websites vorschreibt und die Anforderungen dazu vorgibt. Die aktuelle Version 2.0 der Verordnung lehnt sich stark an die WCAG 2.0 an, den Text finden Sie online beim Bundesanzeiger Verlag: . BITV gemäß Bundesgesetzblatt Nummer 48 / 2011 (mit freundlicher Genehmigung des Bundesanzeiger Verlags)
14 CSS
Cascading Style Sheet
46 WAT
Web Accessibility Toolbar : Ein Software-Werkzeug ( Plugin für den Microsoft Internet Explorer) zum Überprüfen einer Webseite auf Zugänglichkeit. Nachfolger der bekannten AIS -Toolbar.

C2Web - Projektteam | Verwaltungs-Berufsgenossenschaft
Telefon: (07141) 919 372 | E-Mail: christian.richter@vbg.de