"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ü

Interactive-Studio

prefers-color-scheme

Das prefers-color-scheme ist ein CSS-Feature, das ganz automatisch erkennt, ob ein Nutzer auf seinem Gerät den Dark Mode oder den Light Mode verwendet. Die Einstellung erfolgt allerdings direkt im Betriebssystem oder im Browser, nicht auf der Website. Die Website passt sich viel mehr automatisch an, und zwar ganz ohne JavaScript oder Extra-Klicks. So sieht jeder direkt die Version, die den persönlichen 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 zugangsfreundlich. Menschen mit Lichtempfindlichkeit profitieren davon. In Kombination mit prefers-reduced-motion oder kontrastreichen Designs unterstützt es die Entwicklung einer barrierefreien Website, die für alle Menschen angenehm und gut lesbar ist.

Ein konkretes Beispiel? Ein Onlineshop zeigt im Light Mode helle Produktbilder auf weißem Hintergrund, im Dark Mode wird der Hintergrund dunkel, die Texte bleiben kontraststark, und das Logo wechselt automatisch zu einer Variante, die auch bei Dunkelheit gut sichtbar ist.

prefers-color-scheme ist allerdings keine Pflicht im EU-Barrierefreiheitsgesetz oder in der EU-Richtlinie über Barrierefreiheit. Die Vorgaben beziehen sich auf allgemeine Standards wie die WCAG, etwa Kontraste, Navigation oder Tastaturbedienbarkeit. 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äntchen Modernität und vor allem auch technische Kompetenz. Es zeigt darüber hinaus aber auch, dass Inklusion ernst genommen wird, dass alle Menschen ernst genommen werden. Die Nutzerzufriedenheit und Verweildauer gewinnen dadurch. Besonders bei Recruiting-, E-Commerce- oder Corporate Websites lässt sich damit das Markenimage stärken und die Conversion erhöhen. Wer die professionelle Webentwicklung nutzt, kann solche Features, die stets auch auf das Erleben abzielen, integrieren, ohne dass Design oder Performance darunter leiden.

Begierde Wissen