"Enter": Navigation überspringen
  • Tab oder Shift + Tab - zum nächsten oder voherigen interaktiven Element springen
  • ↓ ↑ ← → - innerhalb eines Elements navigieren
  • w a s d - innerhalb eines Elements navigieren
  • Enter - Element aktivieren
  • i - Tastaturbefehle anzeigen
  • CTRL / CMD + + oder - - Ansicht vergrößern oder verkleinern
  • Escape - Popup schließen
  • t - Tooltip anzeigen
  • m - zum Menü

Barrierefreies Internet

prefers-color-scheme

Das prefers-color-scheme ist ein CSS-Feature, das ganz auto­matisch erkennt, ob ein Nutzer auf seinem Gerät den Dark Mode oder den Light Mode verwendet. Die Ein­stel­lung erfolgt allerdings direkt im Betriebs­system oder im Browser, nicht auf der Website. Die Website passt sich viel mehr auto­matisch an, und zwar ganz ohne JavaScript oder Extra-Klicks. So sieht jeder direkt die Version, die den persön­lichen Vorlieben entspricht.

Warum ist prefers-color-scheme wichtig für Barrierefreiheit?

prefers-color-scheme sieht aber nicht nur schick aus: Es ist vor allem auch zugangs­freund­lich. Menschen mit Licht­empfind­lich­keit profitieren davon. In Kombina­tion mit prefers-reduced-motion oder kontrast­reichen Designs unter­stützt es die Entwicklung einer barriere­freien Website, die für alle Menschen angenehm und gut lesbar ist.

Ein konkretes Beispiel? Ein Onlineshop zeigt im Light Mode helle Produkt­bilder auf weißem Hintergrund, im Dark Mode wird der Hinter­grund dunkel, die Texte bleiben kontrast­stark, und das Logo wechselt auto­matisch zu einer Variante, die auch bei Dunkel­heit gut sichtbar ist.

prefers-color-scheme ist allerdings keine Pflicht im EU-Barriere­frei­heits­gesetz oder in der EU-Richt­linie über Barriere­freiheit. Die Vorgaben beziehen sich auf allge­meine Standards wie die WCAG, etwa Kontraste, Navi­gation oder Tastatur­bedien­barkeit. Technische Details wie Dark/Light Mode per CSS sind nicht vorgeschrieben.

Wie können Unternehmen davon profitieren?

Unternehmen können prefers-color-scheme clever einsetzen. Ein Dark/Light Mode verleiht Websites immer ein Quänt­chen Moder­nität und vor allem auch technische Kompe­tenz. Es zeigt darüber hinaus aber auch, dass Inklu­sion ernst genommen wird, dass alle Menschen ernst genommen werden. Die Nutzer­zufrie­denheit und Verweil­dauer gewinnen dadurch. Besonders bei Recruiting-, E-Commerce- oder Corporate Websites lässt sich damit das Marken­image stärken und die Conversion erhöhen. Wer die profes­sionelle Webent­wicklung nutzt, kann solche Features, die stets auch auf das Erleben abzielen, integrieren, ohne dass Design oder Performance darunter leiden.

Ich suche nach

Begierde Wissen