Die Gewährleistung der Barrierefreiheit ist ein klarer Weg, um Ihre Website zu verbessern. Wenn Sie Ihre Website barrierefrei gestalten, vergrößern Sie Ihr Publikum, verbessern das Erlebnis für alle Benutzer (nicht nur für Menschen mit Barrierefreiheitsbedürfnissen) und erzielen zudem SEO-Vorteile.
In ähnlicher Weise ist die Anpassung mit Präferenzabfragen eine weitere großartige Gelegenheit, Ihren Benutzern ein personalisiertes Erlebnis zu bieten, das sie anspricht und angenehmer zu nutzen ist.
Eine Präferenzabfrage, die Sie nutzen können, ist prefers-reduced-motion. Diese Präferenz bedeutet, dass Ihre Benutzer eine Web-Erfahrung ohne auffällige, schnelle Animationen bevorzugen. Sie können Ihre Stile so schreiben, dass sie diese Präferenz unterstützen, und dann eine Media Query für diejenigen schreiben, die diese Präferenz nicht festgelegt haben, um Ihre „lautere“ interaktive Erfahrung zu erhalten.
Eine weitere zu berücksichtigende Präferenz ist das bevorzugte Farbschema eines Benutzers. Während die meisten Websites heute standardmäßig ein helles Thema verwenden, sind dunkle Themen in den letzten Jahren eine Top-Anfrage gewesen, insbesondere für das Surfen im Internet bei Nacht. Die Bereitstellung einer benutzerdefinierten Thematisierung, die den Präferenzen Ihres Benutzers entspricht, ist eine weitere Möglichkeit, das Benutzererlebnis zu verbessern.
Dies können Sie effizient mit CSS-Custom Properties tun und die Werte dieser Custom Properties mit der prefers-color-scheme Media Feature anpassen. Wenn Sie allgemeine Werte wie background, text und highlight verwenden, können Sie Ihre Werte an einer Stelle aktualisieren.
Vergessen Sie nicht, auch die color-scheme Eigenschaft zu verwenden, um automatisch einige Theme-Konvertierungen vom Browser zu erhalten. Das Festlegen dieser Eigenschaft teilt dem Browser mit, welche Farbschemata (hell, dunkel oder beides) die Seite unterstützt. Der Browser konvertiert dann automatisch Formularsteuerelemente und Browser-UI wie Scrollleisten in das richtige Theme.
In dieser Demo, auch wenn ich die Textfarbe für meine Farbschemata nicht festlege, da ich dem Browser mit color-scheme: light dark im :root mitgeteilt habe, dass die Website sowohl helle als auch dunkle Themes unterstützt, wechselt er automatisch die Schriftart von Schwarz zu Weiß.
Sie können Ihr dunkles Thema testen, ohne Ihre Systemeinstellungen in den Chrome DevTools unter dem „Rendering“-Panel zu ändern. Diese Abbildung zeigt die Website houdini.how in ihrem dunklen Modus.
Ein weiterer Bonus bei der Erstellung eines dunklen Themas sind die Akkulaufzeit-Einsparungen, die Sie Ihren Benutzern bieten. In einer Pixel 6 Lab-Studie wurde festgestellt, dass bei einem OLED-Bildschirm ein dunkles Thema 11 % Energie spart.
Somit berücksichtigen Sie nun die Barrierefreiheitsbedürfnisse, Präferenzen und die Akkulaufzeit Ihrer Benutzer, was eine ziemlich großartige Möglichkeit ist, Ihre Website für Ihre Benutzer zu verbessern.