Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

11.1.4.1 Benutzung von Farbe: Komplette Umarbeitung #164

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 25 additions & 32 deletions Prüfschritte/de/11.1.4.1 Benutzung von Farbe.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@ include::include/attributes.adoc[]

== Was wird geprüft?

Über Farben vermittelte Informationen sollen auch ohne Wahrnehmung der Farbe verfügbar sein, also zusätzlich durch andere Mittel (etwa Fettung oder Einrückung) hervorgehoben sein.
Über Farben vermittelte Informationen sollen auch ohne Wahrnehmung der Farbe verfügbar sein, also zusätzlich durch andere Mittel (etwa Fettung oder Einrückung) hervorgehoben sein. Die Vermittlung von Informationen soll sich also nicht *ausschließlich* auf einfache Farbunterschiede stützen.

== Warum wird das geprüft?

Ausschließlich über Farben vermittelte Informationen sind für blinde Nutzende nicht zugänglich.
Auch farbfehlsichtige Nutzende können Farben nicht oder nur eingeschränkt identifizieren und unterscheiden.
Ausschließlich über Farben vermittelte Informationen sind für farbfehlsichtige Nutzende nicht oder nur eingeschränkt identifizierbar und unterscheidbar. Ein Beispiel ist die Rot-Grün Sehschwäche: Rot und grün sind für Menschen mit dieser Sehschwäche nicht unterscheidbar.

== Wie wird geprüft?

Expand All @@ -19,41 +18,35 @@ Der Prüfschritt ist immer anwendbar.

=== 2. Prüfung

Prüfen, ob die App-Ansicht Elemente enthält, die durch Farbgebung Informationen vermittelt.
==== 2.1 Unterschiede nur über Farbe?
. Prüfen, ob die App-Ansicht Elemente enthält, die nur über die Farbgebung Informationen vermitteln.
Beispiele dafür:

* Überschriften werden farblich hervorgehoben
* Ausgewählte Menueinträge werden in einer anderen Farbe dargestellt
* Links im Fließtext werden in einer anderen Farbe dargestellt
* Eine Grafik verwendet unterschiedliche Farben für die vergleichende Darstellung des Kursverlaufs verschiedener Aktien
* Pflichtfelder in Formularen werden farblich gekennzeichnet (die gelb unterlegten Felder müssen immer ausgefüllt werden)

Solche Hervorhebungen sind positiv.
Die Vermittlung wichtiger Informationen soll sich aber nicht *ausschließlich* auf einfache Farbänderungen stützen.
Zu prüfen ist also, ob die Informationen zusätzlich noch auf einem anderen Weg vermittelt werden.

Beispiele für zusätzliche Vermittlung:

* Überschriften sind zusätzlich eingerückt oder durch eine andere Schriftgröße hervorgehoben (das ist fast immer der Fall).
* Ausgewählte Menueinträge sind zusätzlich mit einer Markierung versehen.
* Links im Fließtext sind nicht nur farblich abgesetzt, sondern zusätzlich unterstrichen, gefettet, invertiert oder mit einer Markierung versehen.
Ausnahme: Das Kontrastverhältnis zwischen Linkfarbe und umgebender Textfarbe ist 3:1 oder besser.
In diesem Fall kann im Ausgangszustand auf die zusätzliche Hervorhebung verzichtet werden.
Die Links müssen dann aber bei Fokuserhalt zusätzlich hervorgehoben werden.
* Linien in Schaubildern sind zusätzlich gestrichelt oder durchgezogen.
* Flächen haben unterscheidbare Muster.
* Pflichtfelder im Formular sind zusätzlich mit einem Stern (mit Bedeutungserklärung am Formularbeginn) oder textlich ("Pflichtfeld") gekennzeichnet.

Ebenfalls andere, zusätzliche Vermittlungswege sind am Beispiel der Hervorhebung der aktuell ausgewählten Menüoption erkennbar:

* Die Überschrift ist stets gleichlautend mit der ausgewählten Menüoption.

Ebenfalls nicht als einfache Farbunterschiede gelten:

* Der Status eines Attributs (z.B. verfügbar oder fehlerhaft) wird nur über die Farbe dargestellt, etwa über einen roten oder grünen Punkt
* Ein Diagramm verwendet Farben für die vergleichende Darstellung des Kursverlaufs verschiedener Aktien
* Inkorrekt oder noch nicht ausgefüllte Felder in Formularen werden farblich gekennzeichnet
. Ist das Kontrastverhältnis zwischen dem farblich unterschiedenen Element zu anderen Elementen 3:1 oder besser? Dann geschieht die Hervorhebung nicht nur über Farbe, sondern auch über den Kontrastunterschied. Beispiel: Fließtextlinks haben einen Kontrastunterschied von mehr als 3:1 zum umgebenden Text.
. Falls der Kontrastunterschied unter 3:1 liegt: Gibt es weitere Merkmale, die das farblich unterschiedene Element außerdem unterscheidbar machen?
Beispiele dafür:
* Ausgewählte Menüeinträge sind zusätzlich gefettet oder eingerückt oder eine Überschrift, die dem Menüeintrag entspricht, macht die Auswahl deutlich
* Links im Fließtext sind außerdem unterstrichen, gefettet oder mit einem Symbol versehen
* Der Status eines Attributs (z.B. verfügbar oder fehlerhaft) wird zusätzlich durch die Form des Symbols oder eine zusätzliche Beschriftung dargestellt
* Inkorrekt oder noch nicht ausgefüllte Felder in Formularen werden zusätzlich über eine Fehlermeldung gekennzeichnet
* Das Diagramm verwendet nicht nur Farben, sondern auch Symbole, Legenden oder verschieden gestrichelte Linien für die vergleichende Darstellung

==== 2.2 Prüfung der Tastaturfokus-Hervorhebung
. Wenn die Fokushervorhebung ausschließlich über den Farbwechsel eines Elements geschieht (z.B. ändert sich die Hintergrundfarbe eine Schalters),
prüfen, ob der Kontrastabstand zwischen fokussiertem und unfokussiertem Zustand mindestens 3:1 beträgt.
. Die unveränderte Standard Tastaturfokus-Hervorhebung von iOS und Android über die leichte graue oder blaue Einfärbung des Hintergrunds hat einen unzureichenden Kontrastabstand zum unfokussierten Zustand. Sie ist aber als ausreichend zu bewerten, da für unveränderte Elemente und deren Zustände (einschließlich Fokus) eine Ausnahme in der Anforderung 11.1.4.11 Nicht-Text Kontraste besteht.

=== 3. Hinweise
Nicht als einfache Farbunterschiede gelten:
* die farbige Hinterlegung von Elementen (denn eine Form kommt dazu oder ändert sich)
* der Austausch von Vorder- und Hintergrundfarbe (denn wenn überhaupt ein Unterschied von Vorder- und Hintergrund wahrgenommen wird, ist auch der Austausch wahrnehmbar)

=== 3. Bewertung

=== 4. Bewertung

==== Erfüllt:

Expand Down