wisydb / wisy

Open Source CMS for Training and Educational Purposes
Other
1 stars 3 forks source link

Barrierefreiheit: Kontrastmodus #42

Open wisydb opened 5 years ago

wisydb commented 5 years ago

Startseite: kontraststart

Suchergebnisse: kontrastsuche

Kurs-Detailseite: kontrastkursdetail

Anbieter-Detailseite: kontrastanbieterdetail

wisydb commented 5 years ago

Ein Knopf für Besucher ist nicht gemeint, denn der Barrierfreiheitsstandard verlangt im Prinzip immer, dass alles auf Anhieb Nutzbar ist – je nach Niveau unterschiedlich gut, aber generell ohne „Sonderlösungen“.

Es geht also darum, dass die Portale im „Hohen Kontrast“-Modus von Windows nutzbar sind: https://support.microsoft.com/de-de/help/13862/windows-use-high-contrast-mode (i.d.R. der Fall) und dass keine Grafiken und Symbole, die Informationen transportieren, in diesem Modus wegfallen.

Grund hierfür kann sein, dass jene Bilder als Hintergrundgrafiken eingebunden sind. Aus dieser Perspektive empfiehlt es sich also, illustrative und informative Bilder per <img> mit alt-Attribut einzubinden. Es gibt weitere Möglichkeiten, aber dieser Weg ist der sicherste.

Dekorative Bilder sollten im Kontrastmodus nicht zwingend verschwinden. Oft handelt es um eine Unterstützung des visuellen Zugangs. Statt mit background kann eine Grafik wie folgt eingebunden werden

img:before {
  content( 'icon.png' );
}

Diese Technik setzt zunächst voraus, dass die Grafik keine Textalternative benötigt. Sollte die Grafik doch eine Textalternative benötigen, dann handelt es sich wahrscheinlich um eine illustrative Grafik.

In manchen Fällen sollte eine Grafik im Kontrastmodus verschwinden. Das ist besonders dann der Fall, wenn Text auf Grafiken liegt und durch eine Invertierung die Leserlichkeit verschlechtert wird. (schwarz auf einer hellen Grafik wird im Kontrastmodus zu weiß auf einer hellen Grafik). Sofern Text mit Grafik hinterlegt ist, sollte tatsächlich background-image eingesetzt werden.

debagel commented 4 years ago

HTML-Elemente auf Abgrenzbarkeit überprüfen. Da Farbunterschiede verschwinden müssen Elemente mit Rahmen voneinander abgegrenzt werden, zb. sollte der Cookie Hinweis einen weißen Rahmen erhalten usw.

√ Cookie Hinweis √ Simples Menü √ Komplexes Menü √ Suchfeld √ Filter √ Kursliste / Anbieterliste √ Paginierung √ Kursdetailseite: Beschreibung √ Kursdetailseite: Terminliste √ Anbieterdetailseite: Beschreibung √ Anbieterdetailseite: Qualitätszertifikate √ Glossarseiten

debagel commented 4 years ago

Überprüfen ob wichtige Grafiken fehlen / unwichtige Grafiken stören:

√ Simples Menü √ Komplexes Menü √ Suchfeld √ Filter √ Kursliste √ Anbieterliste √ Paginierung √ Kursdetailseite √ Anbieterdetailseite √ Glossarseiten

debagel commented 4 years ago

Elemente mittels CSS Mediaquery "@media screen and (-ms-high-contrast: active)" im High-Contrast-Modus von Windows besser voneinander abgegrenzt. Alle wichtigen Elemente und Seiten in IE11 unter Windows 7 im "High Contrast Black" und "High Contrast White" Modus überprüft.