Barrierefreies CSS

[ Dies ist eine Übersetzung des englischsprachigen Artikels „Accessible CSS„. Copyright © by www.Webaim.org ]

Einleitung

Cascading Style Sheets oder CSS erlauben es, die Eigenschaften von bestehenden HTML-Elementen zu ändern. Alle Web-Browser haben eine integrierte Stilvorlage, die den Standardstil für alle Elemente definiert. Zum Beispiel, wenn der Browser den <p>-Tag sieht, weiß dieser, dass eine Zeile überspringen und einen neuer Abschnitt gestartet werden muss, da das in der integrierten Stilvorlage vorgeschrieben ist. Der <strong>, <table>, und jeder andere HTML-Tag, hat in der Stilvorlage Größe, Farbe, Position und andere Eigenschaften definiert. Wenn der Autor der Seite für die Elemente einen eigenen Style definiert, kann die integrierte Stilvorlage überschrieben werden und dem Browser angeben, die Elemente in einer anderen Art und Weise anzuzeigen.

CSS wird „Kaskadisierung“ genannt, weil es eine Hierarche oder Rangordnung gibt, die bestimmt, wie die Styles angewendet werden.

illustration of the cascading effect of style sheets

Styles, die in einer externen Stilvorlage (in der Regel eine .css-Datei) definiert sind, überschreiben die Standardeinstellungen des Browsers. Interne Styles (normalerweise auffindbar in dem <head>-Abschnitt einer Seite) überschreiben externe Styles und Element-Styles (werden direkt auf ein Element angewendet) überschreiben interne Styles. Es ist etwas komplizierter als hier beschrieben, aber dies sind die Grundregeln. Dennoch liegt die oberste Schicht der Kontrolle immer beim Endverbraucher. Diese können benutzerdefinierte Styles festlegen, die alle anderen Styles überschreiben oder deaktivieren.

Wichtig

Der Endverbraucher hat immer die ultimative Kontrolle über den Style einer Seite, die er sieht. Für die Barrierefreiheit müssen wir nicht nur zugängliche Styles entwickeln, sondern auch Flexibilität in unseren Designs erlauben, damit der Endverbraucher diese anpassen kann. Die Idee, dass Web-Entwickler und Designer Kontrolle über die Anzeige der Inhalte haben, ist eine Illusion.

Also warum sollte ein Endbenutzer seinen eigenen Style definieren? Ein Nutzer mit einer Sehschwäche kann eine deutlich größere Textgröße festlegen, die es ihm erlaubt, den Textinhalt zu lesen. Ein Nutzer mit einer Farbschwäche oder Sehschwäche könnte Seitenfarben überschreiben, damit er die Seiteninhalte in bestimmten Farben mit hohem Kontrast wahrnehmen kann. Ein Nutzer mit kognitiven Schwierigkeiten oder mit Lernschwierigkeiten könnte die Positionierung, Schriftbilder, Bilder usw. Überschreiben, um eine elementarere Darstellung zu gewährleisten. Kurz gesagt, gibt es viele Gründe aus denen Nutzer die standardmäßigen, oder die von einem Autor definierten Styles, überschreiben. Darüber hinaus ignorieren fast alle Bildschirmlesegeräte CSS.

Inhalt und Präsentation trennen

Eines der wichtigsten Vorteile von CSS ist, dass es den Autoren erlaubt, Inhalte von der Präsentation zu trennen. Zum Inhalt gehört der Text, die Bilder und andere Elemente, die den Kern des Dokuments ausmachen. Die Präsentation umfasst die Darstellungsweise des Inhaltes. Der Inhalt sollte in einem Markup definiert werden, in dem HTML-Code der Seite. Die Präsentation sollte in CSS definiert werden. Auf diese Weise sollte der Inhalt noch voll zugänglich sein, wenn jemand CSS überschreibt oder außer Kraft setzt.

Betrachten Sie den folgenden Screenshot von dieser Seite, auf der CSS deaktiviert wurde.

Screenshot of this page with styles disabled. Plain text with only one image is visible

Obwohl die Seite, bei welcher der Style deaktiviert wurde, kaum aussieht, wie die Seite, die Sie sehen, ist dennoch der gesamte Inhalt vorhanden. Da diese Seite die richtige Semantik der Header und Listen in Markups anstelle von Styles benutzt, bleiben diese sichtbar, obwohl die die Styles deaktiviert sind. Alle Styles, die der Nutzer verändert oder überschreibt, gelten für den darunter liegenden Inhalt, welcher unabhängig von den Benutzeränderungen zugänglich bleiben sollte.

Steuern Sie das visuelle Layout

CSS bietet eine große Kontrolle über die Positionierung von Elementen innerhalb einer Seite. Das bedeutet, dass der zugrunde liegende Quellcode (welcher dem Bildschirmlesegerät die Leserichtung angibt und die Navigationsreihenfolge der Tastatur bestimmt) nicht mit dem visuellen Layout und der Präsentationsreihenfolge übereinstimmt. Wie oben erwähnt, wird der zugrunde liegende Inhalt/ das Markup sehr wichtig, wenn Sie den Inhalt von der Präsentation trennen. Es sollte logisch und intuitiv sein und sollte im Normalfall mit der visuellen Präsentation übereinstimmen, oder zumindest ähnlich zu dieser sein – grob gesagt links nach rechts, oben nach unten.

Inhalte mit CSS verstecken

In nahezu allen Fällen sollte der gesamte Inhalt zugänglich für die Nutzer von Bildschirmlesegeräten sein, der visuell in einer Seite präsentiert ist. Ebenso ist es sehr selten, dass Nutzern von Bildschirmlesegeräten Inhalte angezeigt bekommen, die nicht visuell in einer Seite präsentiert werden. Es gibt jedoch Ausnahmen, für allem für Dinge, die visuell verständlich sind, aber für die eine kurze Erläuterung oder Anweisung für Nutzer von Bildschirmlesegeräten nützlich sein könnte.

Wenn Sie sich den vorherigen Screenshot von dieser Seite ohne Style ansehen, werden Sie feststellen, dass einige Textelemente für Nutzer von Bildschirmlesegeräten angezeigt werden, welche visuell nicht angezeigt werden – ein Textlabel für das Suchfeld, die Überschrift „Main Navigation“ über der Navigation der Seite und die „You are here:“-Anzeige vor dem Pfad. Diese Bereiche sind versteckt für die visuelle Anzeige, bieten aber nützliche Informationen für die Nutzer von Bildschirmlesegeräten.

Anmerkung

Die Techniken zum Verstecken von zugänglichen Inhalten, für CSS, finden Sie in CSS in Action: Invisible Content Just for Screen Reader Users

Inhalte und Bedeutungen mit CSS darstellen

Gegensätzlich zum Verstecken von Inhalten mit CSS, werden Inhalt oder Bedeutung manchmal ausschließlich mit CSS dargestellt. Mit Hilfe von CSS könnte man folgendes tun:

    • Definieren Sie Hintergrundbilder, die Inhalt präsentieren
    • Managen Sie ihr Layout oder die Präsentation so, dass die Bedeutung beeinflusst wird
    • Verwenden Sie Farben allein, um eine Bedeutung zu vermitteln
    • Generieren Sie Inhalte mit CSS

 

Diese Techniken sollten im Allgemeinen vermieden werden. Aber in Situationen, in denen CSS Informationen, Inhalte, oder Bedeutungen präsentiert, muss eine barrierefreie Alternative bereitgestellt werden..

Zum Beispiel können CSS Hintergrundbilder nicht direkt einen Alternativtext erhalten. Darum muss ein Bild, welches Inhalte übermittelt, mit dem img-Element mit einem entsprechenden alt-Attributwert in den Inhalt platziert werden. Wenn das nicht möglich ist, können Sie einen versteckten, Off-Screen-Text verwenden, der den Inhalt der Bilder an die Nutzer vermittelt, die die Bilder nicht sehen können.

Mit CSS können Texte so verändert werden, dass sie wie Überschriften aussehen. Worte können hervorgehoben erscheinen (so als ob <strong> oder <em>-Tags verwendet wären), auch wenn sie nur in einer anderen Farbe dargestellt werden, oder fett, oder kursiv erscheinen (ohne das begleitende semantische Markup). Benutzen Sie immer das grundlegende HTML Markup um den notwendigen semantischen Inhalt und die Bedeutung bereitzustellen, dann verwenden Sie CSS um die Standardstyles zu verbessern und zu ändern.

Header Beispiel

Der unten stehende Satz erweckt den Anschein einer Überschrift, aber es ist nur ein normaler Text, der so verändert wurde, dass er aussieht wie eine Überschrift.

Dies Ist Keine Überschrift. Es Sieht Nur Aus Wie Eine.

Das falsche Markup, welches das Beispiel zur Folge hat, ist dieses:

<p style="font-weight:bold;font-size: 200%;font-family: Arial;">Dies Ist KEINE Überschrift. Es Sieht Nur Aus Wie Eine.</p>

Das richtige Markup ist:

<h1>Dies IST Eine Überschrift Und Es Sieht Auch So Aus Wie Eine.</h1>

Beispiel für Betonung

Das Wort „betont“ in dem unteren Satz ist im Markup nicht betont. Es ist nur so entworfen, dass es fett erscheint.

„Erinnern Sie sich bitte daran, den Text, der wichtig ist, zu betonen.“

Das falsche Markup, welches das Beispiel zur Folge hat, ist dieses:

<p>Erinnern Sie sich bitte daran, den Text, der wichtig ist, zu <span style="font-weight:bold;">betonen</span></p>

Das richtige Markup ist:

<p>Erinnern Sie sich bitte daran, den Text, der wichtig ist, zu <strong>betonen</strong></p>