Navigation und Service

Einfach teilhaben (Link zur Startseite)


Anleitung

Diese Anleitung bezieht sich auf Maßnahmen, die nötig sind, um die normale Darstellung für Menschen mit Behinderung so leicht wahrnehmbar wie möglich zu machen. Eine Umwandlung von Format und Darstellung soll dabei nicht stattfinden. Die Maßnahmen sind dabei immer ein Kompromiss zwischen der Freiheit der Gestaltung und der Wahrnehmbarkeit für Menschen mit Behinderungen.

Nicht auf Farben verlassen

Farben sind ein wichtiges Mittel bei der Gestaltung von Webseiten. Neben ästhetischen Aspekten haben Farben auch Wirkungen auf die Nutzerführung und die Gebrauchstauglichkeit. Farben können auch die Barrierefreiheit im Bereich der Verständlichkeit stark verbessern. Aber, Sie dürfen sich nie allein auf die Darstellung von Farben verlassen. Sie sollten Farben immer mit weiteren Darstellungsoptionen kombinieren. Die Möglichkeiten sind so vielfältig, dass hier nur eine Auswahl aufgezeigt werden kann.

  • Farbige Links, können zusätzlich unterstrichen werden.
  • Andere farbige Texte oder Seitenbereiche, können zusätzlich eingerahmt, größer, fett oder kursiv dargestellt werden.
  • Farbige Zuordnungen in Diagrammen können durch Muster oder Beschriftungen unterstützt werden.
  • Farbige Symbole werden durch Formen eindeutig.

Ein besonderes Thema ist die farbige Gestaltung zur Unterstützung der Navigation. Jedem Themenbereich ist dabei eine bestimmte Farbe zugeordnet. Wird nun ein Beitrag angezeigt, werden bestimmte Stilelemente der Webseite in dieser Farbe dargestellt. Solche Farbschemata haben einen positiven Einfluss auf die Gebrauchstauglichkeit und werden gerne verwendet. Um aber auch hier unabhängig von der farblichen Darstellung diese Information darzustellen, muss das aktuelle Thema zusätzlich anders gekennzeichnet werden. Informationen hierzu finden Sie im Abschnitt "Navigation und Orientierung im Internetauftritt"

Da aus ästhetischen Gründen auf eine Unterstreichung von Links in Fließtexten gerne verzichtet wird, wurde dieses Phänomen in einer WCAG-Technik besonders behandelt. Die WCAG erlaubt das Weglassen der Unterstreichung von Links in Fließtexten, wenn:

  • die Link-Farbe zur Farbe des umgebenen Textes ein Kontrastverhältnis von 3:1 aufweist
  • und der Link beim Überfahren mit der Maus und bei einem aktiven Tastaturfokus unterstrichen wird.

Die farbliche Gestaltung solcher Links ist dadurch zwar möglich, aber stark eingeschränkt. Der Link braucht nicht nur ein Kontrastverhältnis von 3:1 zum Umgebungstext, sondern auch einen 4,5:1 Kontrast zum Hintergrund. Damit sind die Farbkombinationen schon sehr stark eingeschränkt. Die Technik wird zwar als ausreichend toleriert, aber ausdrücklich nicht empfohlen.

Audio-Ausgaben

Wenn Sie in irgendeiner Form eine Audio-Ausgabe auf Ihrer Webseite einbinden möchten, sollte

  • die Ausgabe nicht automatisch starten, oder
  • die Ausgabe nicht länger als 3 Sekunden andauern!

Die Techniken der WCAG erlauben zwar unter bestimmten Voraussetzungen eine automatisch abspielende Audio-Ausgabe, aber empfohlen wird dies nicht. Die Voraussetzungen wären, dass es eine Möglichkeit am Beginn der Webseite für die Nutzerin oder den Nutzer gibt, die Audioausgabe anzuhalten oder dass die Lautstärke getrennt von der Systemlautstärke geregelt werden kann. In beiden Fällen haben aber Screenreadernutzerinnen und -nutzer Probleme, da sie auch akustisch navigieren und so durch die Nebengeräusche die Steuerung für die Audio-Ausgabe nur sehr schwer finden.

Für Webseiten der Priorität II gelten weitere Einschränkungen. Bei jedem Audioinhalt muss der Sprachinhalt um mindestens 20 Dezibel lauter als das Hintergrundgeräusch sein. Dies entspricht ungefähr der vierfachen Lautstärke. Ausgenommen sind kurze gelegentliche Geräusche im Hintergrund, Bestandteile von Hörmarken (akustische Logos), Audio-CAPTCHAS oder musikalische Darbietungen.

Kontraste

Für alle Texte und für alle Bilder von Texten gilt ein Mindestkontrastverhältnis der Schriftfarbe zum Hintergrund. Die Berechnung des Kontrastverhältnisses beruht auf Formeln für die Luminanz, ein Maß für die Helligkeit von Bildpunkten in der Videotechnik. Es gibt zahlreiche Werkzeuge zur Ermittlung des Kontrastverhältnisses. Je nach Vorliebe können Sie ein Analyseprogramm für Ihr Betriebssystem installieren oder eine Erweiterung für Ihren Browser verwenden, zum Beispiel:

Folgende Abbildung zeigt den Farbkontrast-Analysierer (Color Contrast Analyser) in deutscher Sprache. Im oberen Bereich können die zu analysierenden Farben ausgewählt werden. Im unteren Bereich zeigt das Werkzeug das Ergebnis als Verhältniswert an und untersucht gleichzeitig, welche Grenzwerte eingehalten wurden. In dem gezeigten Beispiel wurde das Kontrastverhältnis eines Blau-Tons zu einem Gelb-Ton untersucht. Das Kontrastverhältnis beträgt 6,2:1. Eingehalten wurden demnach auf Webseiten der Priorität I die Grenzwerte für normalen Text und für großen oder Fett geschriebenen Text. Für Webseiten der Priorität II wurde nur der Grenzwert für großen oder Fett geschriebenen Text eingehalten. Der Grenzwert für normalen Text auf Webseiten der Priorität II wurde nicht eingehalten. Eine Webseite der Priorität II dürfte diese Farbkombination für Fließtext also nicht verwenden.

Screenshot des Color Contrast Analyser Screenshot des Color Contrast Analyser

Für die Kontrastverhältnisse existieren 3 Grenzwerte:

  • das Kontrastverhältnis 3:1, entspricht dem von der ISO-Norm ISO-9241-3 empfohlenem Minimum für normal Sehende. Bei diesem Kontrastverhältnis soll ein angenehmes und längeres Lesen möglich sein.
  • das Kontrastverhältnis 4,5:1, trägt dem Verlust an Sehkraft im Alterungsprozess eines normal sehenden Menschen Rechnung und entspricht dem, was ein 80-jähriger Mensch üblicherweise noch gut lesen kann. Ebenfalls entspricht dies dem, was ein Mensch mit Farbfehlsichtigkeit und ein Mensch mit einem moderaten Sehschärfeverlust noch lesen kann.
  • das Kontrastverhältnis 7:1, ermöglicht es auch noch Menschen mit ausgeprägtem Sehverlust Texte zu lesen. In der Regel entspricht dies einer Restsehschärfe, bei dem die Betroffenen üblicherweise dazu übergehen, mit assistiven Technologien und speziellen Textvergrößerungen zu arbeiten.

Da nicht jede Schriftgröße und Schriftstärke gleich gut oder gleich schlecht zu lesen ist, werden auch Grenzen für die verwendete Schrift definiert. Als "großer" Text gilt ein Text mit einer Schriftgröße von 18 Punkt (pt) oder ein Text, der fett geschrieben ist und mindestens 14 Punkt (14pt) groß ist. Die tatsächliche Schriftgröße ist allerdings abhängig von Schriftart, Bildschirmgröße und Bildschirmauflösung. Deshalb wird vereinfacht davon ausgegangen, dass in einem Browser mit Standardeinstellungen eine Schrift mit 150 % (1.5em) oder eine fette Schrift mit 120 % (1.2em) als "Groß" gelten kann. Die relativen Maße beziehen sich immer auf die Standardschriftgröße des Browsers. Der Firefox-Browser hat eine Standardschriftgröße von 16 Pixeln, 150 % davon ergeben 24 Pixel. Also können tatsächliche Schriftgrößen mit 24 Pixeln in diesem Fall als "Groß" gelten. Diese "pauschale" Berechnung gilt nicht für ungewöhnliche Schriftarten.

Wenn Ihre Webseite die Priorität I erfüllen muss, gelten für Sie folgende Grenzwerte für Text und Hintergrund:

  • "großer" Text — Kontrastverhältnis 3:1
  • normaler Text — Kontrastverhältnis 4,5:1

Entsprechend höher sind die Anforderungen für Webseiten, die die Priorität II erfüllen müssen:

  • "großer" Text — Kontrastverhältnis 4,5:1
  • normaler Text — Kontrastverhältnis 7:1

Ausgenommen vom Mindestkontrast sind:

  • Texte, die Bestandteile einer Wortbildmarke (Logos oder Firmennamens) sind.
  • Texte, die nebensächlich sind, weil sie irgendwo auf einem Foto vorkommen, aber nichts mit der Bildinformation zu tun haben.
  • Texte in rein dekorativen Grafiken.
  • Texte, die Bestandteile von inaktiven Benutzerschnittstellen sind.

Zum Festlegen der Farben sollten Sie die CSS-Eigenschaften color und background-color verwenden. Legen Sie für jedes Textelement beide Farben entweder direkt oder durch Vererbung vom Elternelement fest. Denken Sie daran, dass die meisten Browser bereits Schwarz und Weiß als Standard festgelegt haben. Zum Überprüfen können Sie diese Einstellungen Ihres Browsers aber in zwei unübliche Farben ändern, zum Beispiel Schrift in Lila und einem Hintergrund in Pink. Falls für irgendein Element vergessen wurde, die Farben zu definieren, sollte dies nun schnell ins Auge springen.

Veränderbare Schriftgröße

Die BITV verlangt, dass alle Texte sich bis zu 200 % vergrößern lassen und dass dabei keine Texte beschnitten oder überdeckt werden. Eine Textvergrößerung kann auf drei Arten erfolgen:

  • Ein Browser unterstützt eine Zoom-Funktion, bei der alle Seitenbestandteile wie unter einer Lupe vergrößert werden.
  • Ein Browser unterstützt eine Möglichkeit die Standard-Schriftgröße zu verändern.
  • Die Webseite selbst unterstützt eine Möglichkeit die Schriftgröße durch Knöpfe oder Links zu verändern.

Da die Fähigkeit zur Vergrößerung prinzipiell in der Verantwortung der Browserhersteller liegt, ist es in erster Linie Ihre Aufgabe als Ersteller einer Webseite, die Vergrößerung nicht zu verhindern. Da erst neuere Browser eine Zoom-Funktion unterstützen, können Sie sich im Allgemeinen auf diese Technik nicht verlassen. Die WCAG empfehlen deshalb, zumindest eine der beiden anderen Techniken zusätzlich zu nutzen.

Alle größeren Browser bieten eine Möglichkeit die Standardschriftgröße zu verändern oder eine kleinste Schriftgröße zu definieren. Wenn Sie sich diese Technik zunutze machen wollen, müssen Sie alle anderen Schriftgrößen von der vom Nutzer festgelegten Schrift ableiten. Wenn Sie also eine Schriftgröße definieren möchten, müssen Sie immer die Einheiten em oder % nutzen. Je nach Vererbung kann dann die dargestellte Schriftgröße berechnet werden. Wenn in den folgenden CSS-Definitionen eine von der Nutzerin oder dem Nutzer eingestellte Schriftgröße von 16 Pixeln angenommen wird, ergibt sich durch die Vererbungen (3 mal 150 %) für die letzte Schriftgröße ein Wert von 54 Pixel

/* bei einer Nutzer-Schriftgröße von 16px */
p .a {font-size:150%}      /* ergibt 24px */
p .a .b {font-size:150%}   /* ergibt 36px */
p .a .b .c {font-size:150%}/* ergibt 54px */

Zusätzlich müssen sich die Textcontainer ebenfalls an die verwendete Schrift anpassen, dies ist zum Beispiel dadurch möglich, dass für die Containerbreite die Maßeinheit em verwendet wird. Die Verwendung der Einheit % ist nur eingeschränkt möglich, da diese sich im Falle von Containern auf den übergeordneten Container beziehen und nicht auf die Schriftgröße. Ein "em" entspricht dabei ungefähr der Breite des Buchstabens "M". Folgender Quellcode erzeugt daher einen Container, der ungefähr so breit ist wie 10 "M"s.

div.container {width:10em}

Falls Sie keine der oberen Techniken nutzen können, bleibt Ihnen nur die Möglichkeit eine Vergrößerungsoption in Ihre Webseite zu integrieren. Üblicherweise werden dazu zwei oder drei Knöpfe in die Seite integriert, die zum Beispiel mit "A+", "A-" und "A=" beschriftet sind. Es sind hier auch andere Beschriftungen möglich. Hier ein paar Beispiele:

Verschiedene Screenshots von Knöpfen zur Schriftvergrößerung Verschiedene Screenshots von Knöpfen zur Schriftvergrößerung

Durch ein JavaScript wird dann die Schriftgröße manuell vergrößert, verkleinert oder auf den Ursprungswert zurückgesetzt. Diese Knöpfe müssen sehr gut sichtbar und ausreichend groß sein, denn wer auf eine Schriftvergrößerung angewiesen ist, muss die Knöpfe trotzdem ohne Probleme finden können.

Für allen drei Techniken gilt, dass bei einer Vergrößerung um 200 % keine Informationen verdeckt oder abgeschnitten werden dürfen! Auch wenn eine Vergrößerungsmöglichkeit in der Webseite erlaubt ist, zu bevorzugen sind die ersten beiden Techniken, da hier die betroffenen Personen auf die Ihnen bekannten Hilfen — der Vergrößerung durch den Browser — zurückgreifen können und die Webseite nicht erst auf vielleicht vorhandene Vergrößerungsknöpfe untersuchen müssen!

Schriftgrafiken

Schriftgrafiken sind Bilder von Text, wobei der dargestellte Text eine wesentliche Information ist. Taucht ein Text nur zufällig auf einem Foto auf und trägt nicht zum Verständnis des Textes bei, ist dies keine Schriftgrafik.

Schriftgrafiken können grundsätzlich verwendet werden, wenn genau die verwendete Präsentation wichtig für die Informationsübermittlung ist oder wenn die Schriftgrafik keine Information beinhaltet und lediglich der Dekoration dient. Bilder von Firmenlogos und Marken gehören zu den Schriftgrafiken, die verwendet werden dürfen. Genauso darf auch ein Bild von einem Beispieltext in einer bestimmten Schriftart dargestellt werden, wenn genau die Eigenschaften dieser Schriftart gezeigt werden sollen.

Andere Schriftgrafiken dürfen auf Webseiten die der Priorität II unterliegen nicht verwendet werden. Bei Webseiten der Priorität I existiert noch eine weitere Ausnahme, die es erlaubt Schriftgrafiken zu nutzen. Die Grafik muss vom Nutzer mit einfachen Mitteln anpassbar sein, und zwar in der Schriftgröße und der verwendeten Schrift- und Hintergrundfarbe. Dies ist nur möglich, wenn Sie die Grafiken automatisch vom Server generieren lassen oder wenn Sie alle Schriftgrafiken mit den unterschiedlichsten Einstellungskombinationen vorrätig speichern. Der Nutzerin oder dem Nutzer muss über einen einfach zu bedienenden Mechanismus die Möglichkeit gegeben werden, zwischen den Versionen umzuschalten.

Für Schriftgrafiken gelten noch weitere Bedingungen, lesen Sie dazu auch den Abschnitt Textalternativen für Bilder.

Nutzereinstellungen

Wenn Ihre Webseite der Priorität II unterliegt, müssen Sie Maßnahmen treffen, um folgende Kriterien an Ihre Webseite zu erfüllen:

  • Vordergrund- und Hintergrundfarbe müssen individuell einstellbar sein.
  • Die Zeilenbreite darf nicht mehr als 80 Zeichen betragen.
  • Texte werden nicht in einem Blocksatz dargestellt.
  • Der Zeilenabstand im Fließtext beträgt mindestens 1,5 Zeilen und zwischen den Abschnitten selbst ist der Abstand noch größer.
  • Wenn die Schriftgröße auf 200 % vergrößert wird, muss nicht wiederholt hin und her gescrollt werden, um Fließtext lesen zu können.

Alle diese Punkte können Sie dadurch erfüllen, dass Sie Mechanismen in Ihre Seite integrieren, mit der Nutzerinnen oder Nutzer die Darstellung entsprechend Ihrer Bedürfnisse einstellen können. Dies kann zum Beispiel, durch Knöpfe mit denen die entsprechenden CSS-Eigenschaften ausgetauscht werden, geschehen. Besser ist es jedoch die Möglichkeiten zu unterstützen beziehungsweise nicht zu unterbinden, die die Betriebssysteme und die Browser mitbringen.

Betriebssysteme bieten zum Beispiel einen Kontrastmodus an und in Browsern können individuelle Farbzusammenstellungen für Vordergrund und Hintergrund eingestellt werden. Wenn Sie diese Einstellungen berücksichtigen und sich nicht darauf verlassen, dass Ihre Farbauswahl zu jederzeit funktioniert, sollten hier keine Probleme zu erwarten sein.

Wenn Sie die Breite der Fließtexte auf einen Wert wie 60em beschränken, können Sie davon ausgehen, dass die Zeilenbreite nicht mehr als 80 Zeichen beträgt. Wenn Sie die Breite ihres Textbereichs so in % definiert haben, dass sich der Bereich verkleinert, wenn das Browserfenster verkleinert wird, kann eine Nutzerin oder ein Nutzer das Fenster verkleinern, bis die Darstellung seinen Wünschen entspricht. In beiden Fällen erfüllen sie diese Unterbedingung der BITV.

Wenn Sie in Ihren CSS-Eigenschaften den Wert text-align:justify nicht für Fließtexte verwenden, nutzen Sie automatisch keinen Blocksatz, sondern nur links- oder rechtsbündigen Text.

Einen Zeilen-Abstand von 1,5 Zeilenhöhen müssen Sie leider selbst sicherstellen. Dazu müssen Sie in den CSS-Eigenschaften von Fließtexten die Zeilenhöhe mit line-height:150% oder line-height:1.5em oder größeren Werten festlegen.

Die letzte Bestimmung, dass Vermeiden des Scrollens beim Lesen eines Textes bei einer Schriftvergrößerung von 200 % und einer bildschirmfüllenden Darstellung, bedeutet nicht, dass eine Nutzerin oder ein Nutzer überhaupt nicht scrollen muss. Es soll nur nicht für jede Zeile hin- und hergescrollt werden müssen, wenn ein Fließtext gelesen wird. Welche Bildschirmauflösung als "Bildschirmfüllend" gilt, kann nur bestimmt werden, wenn sich alle Nutzerinnen und Nutzer in einer kontrollierten Umgebung befinden, zum Beispiel einem Intranet in einer Verwaltung. Bei öffentlichen Webseiten kann aber davon ausgegangen werden, dass niedrigere Auflösungen als 1024 Pixel in der Breite nicht mehr vorkommen.

© Bundesministerium für Arbeit und Soziales, 2016