详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性

下面是详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性的攻略：

什么是CSS prefers-* 规范？

CSS prefers-* 媒体查询是CSS3中的一项新特性，它提供了让浏览器和开发者检测用户当前启用的首选主题的方法。利用这个特性，我们可以很好地提高网站的可访问性和健壮性。

总体上，CSS prefers-* 规范有以下几个方面：

1. prefers-color-scheme：手动选择亮色或黑暗模式。
2. prefers-contrast：选择强调或减弱周围环境的视觉对比度。
3. prefers-reduced-motion：选择静止或减轻动画或运动的程度。
4. prefers-reduced-transparency：减轻背景或元素透明度。

如何应用CSS prefers-* 规范？

首先，在HTML文档中，为了提高语义化，应该增加一些角色和属性。例如，在整个页面级别上，可以使用 role="presentation" 消除与系统主题之间的干扰和冲突。在某个部分上，应该添加 aria-label 来进一步提高可访问性。

<!-- a section with labeled content -->
<section aria-label="Project Information">
  <h1>Notebook Design</h1>
  <p><a class="screenshot" href="/notebook-design.jpg"><img src="/notebook-thumbnail.jpg" alt="Notebook Design"></a></p>
  <p>Notebook Design is a notebook design pattern that is common among young women and college students. It is characterized by its soft colors, floral patterns, and a variety of themes, such as travel and night sky.</p>
  <p><a href="/notebook-design.html">Read more...</a></p>
</section>

接下来，针对不同的属性值，可以在CSS中应用样式。

prefers-color-scheme

增加支持亮色或黑暗模式。

/* light theme */
body {
  background-color: white;
  color: black;
}

/* dark theme */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

prefers-contrast

增加强调或减弱周围环境的视觉对比度。

/* increase contrast */
@media (prefers-contrast: high) {
  body {
    color: black;
    background-color: white;
  }

  a {
    color: blue;
    text-decoration: underline;
  }
}

prefers-reduced-motion

减轻动画或运动的程度。

/* disable motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-name: none !important;
    transition-duration: 0.001ms !important;
    transition-property: none !important;
    transform: none !important;
  }
}

prefers-reduced-transparency

减轻背景或元素透明度。

/* reduce transparency */
@media (prefers-reduced-transparency: reduce) {
  body {
    background-color: white;
  }

  .modal {
    background-color: white;
    opacity: 0.75;
  }
}

案例分析

假设我们有一个博客网站，为了提供更好的可访问性和健壮性，我们可以实现一些如下的操作：

1. 根据用户的主题偏好，更改网站的配色方案。
2. 缩小动画效果或整个页面的运动范围，以减轻动画对敏感用户造成的影响。
3. 带有自动滚动和浏览图片的幻灯片可能会引起一些用户头晕，可在设置属性时不添加动画效果，或提供一个选项更改动画速度或幻灯片速度。

代码示例：

<!-- a slider with images -->
<section aria-label="Image Slider">
  <div class="slider">
    <div class="slide active" style="background-image:url('image1.jpg')"></div>
    <div class="slide" style="background-image:url('image2.jpg')"></div>
    <div class="slide" style="background-image:url('image3.jpg')"></div>
  </div>
</section>

/* light or dark theme */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }

  .slider .slide {
    border: 2px solid black;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }

  .slider .slide {
    border: 2px solid white;
  }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  .slide {
    animation: none;
  }
}

/* reduce transparency */
@media (prefers-reduced-transparency: reduce) {
  .slide {
    background-color: #222;
    opacity: 0.8;
  }
}

结论

通过使用CSS prefers-* 规范，我们可以提高网站的可访问性和健壮性，这是很重要的。因为当我们关注最不利情况的用户时，我们实际上会使每个人都更轻松，更自由地使用该网站。