确保无障碍访问是改善网站的明确途径。当您使您的网站无障碍时，您会扩大受众，改善所有使用它的人（不仅仅是那些有无障碍需求的人）的体验，并且您也会获得 SEO 优势。
同样，偏好查询 自定义是另一个绝佳机会，可以让您的用户获得更个性化的体验，让他们感觉更舒适和愉快。
您可以利用的一个偏好查询是 prefers-reduced-motion。此偏好表示您的用户希望获得没有花哨、快速动画的网页体验。您可以以支持此偏好的方式编写样式，然后为未设置此偏好的用户编写媒体查询，以获得更“生动”的交互体验。
另一个需要考虑的偏好是用户的首选配色方案。虽然大多数网站今天默认使用浅色主题，但过去几年来，深色主题一直是人们最常提出的请求，尤其是在晚上浏览网页时。提供与用户偏好相一致的 自定义主题 是改善用户体验的另一种方式。
您可以通过使用 CSS 自定义属性并使用 prefers-color-scheme 媒体功能调整这些自定义属性的值来有效地做到这一点。如果您使用 background、text 和 highlight 等通用值，则可以在一个地方更新所有值。
不要忘记使用 color-scheme 属性，以自动从浏览器获取一些主题转换。设置此属性告诉浏览器页面支持哪些颜色主题（浅色、深色或两者）。反过来，浏览器也会自动将表单控件和浏览器 UI（如滚动条）转换为正确的主题。
在此演示中，即使我没有为我的颜色主题设置文本颜色，但由于我告诉浏览器该站点使用 color-scheme: light dark 在 :root 中支持浅色和深色主题，因此它会自动将字体从黑色切换为白色。
您可以在 Chrome DevTools 的“渲染”面板中测试您的深色主题，而无需更改系统设置。此插图显示了该站点 houdini.how 的深色模式。
创建深色主题的另一个好处是您为用户提供的 电池续航时间延长。在 Pixel 6 实验室研究中，发现对于 OLED 屏幕，深色主题可节省 11% 的功耗。
因此，现在您尊重用户的无障碍需求、偏好和电池续航时间，这是一种非常好的方法，可以为用户改善您的网站。