Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Inhalte mit CSS? Aber bitte ohne Hintergrundgrafiken! veröffentlicht in 2012

Hintergrundgrafiken und der Kontrastmodus

Wenn jemand den Kontrastmodus im Browser verwendet, dann werden Vordergrund- und Hintergrundfarben der Webseiten mit eigenen Farben überschrieben. Dabei werden Hintergrundgrafiken wie Hintergrundfarben behandelt. Wenn also zum Beispiel eine Schaltflächenleiste mit Hintergrundgrafiken gestaltet wird:

Der TinyMCE Editor mit einer typischen Werkzeugleiste zur Textverarbeitung

dann werden die Schaltflächen bei benutzerdefinierten Farben nicht mehr sichtbar sein. Die nachfolgende Darstellung stellt die gleiche Anwendung in einem Kontrastmodus dar:

Der TinyMCE Editor im Kontrastmodus; die meisten Steuerelemente sind im Kontrastmodus unsichtbar

Solange Grafiken dekorativ sind, dürfen sie Extern, englischsprachig: mit background eingebunden werden. Sobald sie aber illustrativen, informativen oder funktionalen Charakter besitzen, sollten die Grafiken mit HTML eingebunden werden (damit sie einen Alternativtext erhalten können).

Es gibt weitere CSS-Techniken wie list-style-image und content in Verbindung mit den Pseudo-Attributen :before oder :after, die im Gegensatz zu background auch in einer angepassten Darstellung wie der Kontrastmodus angezeigt werden. Diese Techniken können für dekorative Grafiken eingesetzt werden, wenn die Grafiken im Kontrastmodus dargestellt werden sollen. Sie können auch für funktionale Grafiken in aktiven Elementen eingesetzt werden, wenn die aktiven Elemente entsprechende Namen besitzen.

Kontrastmodus auf Windows-Systemen einstellen

Unter den diversen Windows-Systemen kann der Kontrastmodus mit der Tastenkombination linkeAlt+linkeUmschalt+Drucken eingeschaltet (und auch wieder ausgeschaltet) werden.

Windows-Dialogfenster zum Einschalten des Kontrastmodus

Nach der Auswahl des Kontrastschemas und Bestätigung der Auswahl baut Windows den Bildschirm mit dem gewählten Schema neu auf. Im Kontrastmodus werden nicht nur Farben angepasst, sondern Schriftarten, Symbolgrößen, Abstände und Rahmen können ebenfalls anders dargestellt werden. In der Systemsteuerung können sogar eigene Schemata angelegt werden.

Die Einstellungen werden systemweit übernommen — zumindest sollte das so sein. In Browsern wird das unterschiedlich gehandhabt. Während Internet Explorer die Benutzereinstellungen auch auf Webseiten anwendet, muss in anderen Browsern wie Firefox, Chrome oder Opera die Übernahme der benutzereigenen Bildschirmstile in den Browseroptionen zugelassen werden.