CSS 无障碍最佳实践指南-JavaScript中文网-JavaScript教程资源分享门户

在当今数字时代，越来越多的人们使用互联网进行各种任务和活动，但这并不是每个人都能轻松访问。无障碍(WAI-ARIA)被设计用于使网络内容更加易于访问，并提高残障人士对世界的可访问性。

CSS通常是修饰界面的主要工具，可以用于设计页面元素的外观和交互行为。本文将介绍CSS无障碍最佳实践，以帮助您创建易于访问的网站。

1. 遵循WCAG2.1指南

WCAG2.1是Web Content Accessibility Guidelines（Web内容无障碍指南）的最新版本。它是一个全球性的公认标准，为网络开发人员提供了一系列正式的要求，以确保Web内容的所有用户都可访问。其中包括三个层次的标准（A，AA和AAA），开发者必须至少遵循Level A层次的要求。因此，开发团队应该使用这些指南作为设计前的参考，并在页面上使用可以支持无障碍需求的代码。

2. 选择内容相关的颜色

选择对比度明显的颜色是非常重要的。颜色对比度决定了文字是否容易阅读，因此，设计人员应该尽可能选择容易识别的颜色。同时，最好避免使用红色和绿色等常见敏感色来传达重要信息，因为不是每个人都能区分出这些特定的颜色。

以下是一个遵循WCAG2.1中颜色对比度较高的示例：

body {
  background-color: #FFF;
  color: #333;
}
a {
  color: #007FFF;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #666;
}

3. 使用alt属性

在HTML中，alt属性是用来描述图片的，而对于屏幕阅读器，可以用来替代图像进行阅读。无障碍用户可能使用屏幕阅读器阅读页面内容，而使用alt属性可以提供超出纯文本阅读的信息。

以下是一个示例：

<img src="image.png" alt="A man using a wheelchair to cross a street" />

4. 避免使用CSS样式增加额外语义

CSS样式应该用来修饰内容而不是为内容制造新语义。在制作网站时，应该尽量减少某个特定视觉样式在代码中的出现次数，只使用<style>元素或外部文件来确定处理样式的方式。

例如，下面是具有错误样式的示例：

<p style="color: blue; font-family: Arial; margin: 0; padding: 0;">这是一个段落</p>

应该被改写为：

p {
  color: blue;
  font-family: Arial;
  margin: 0;
  padding: 0;
}

<p>这是一个段落</p>

5. 确保页面可大声朗读

某些无障碍用户可能需要使用屏幕阅读器或其他设备来大声朗读页面内容。因此，在编写CSS样式时，应该考虑到盲人用户使用屏幕阅读器访问页面的方式。

以下是一些CSS代码示例：

a,
button {
  color: #007FFF;
}
/*开启hover效果后，颜色会改变*/
a:hover,
button:hover {
  color: #F00;
  text-decoration: underline;
}

6. 使用有意义的、描述性的链接文本

您应该尽可能避免使用模糊不清的、无意义的链接文本。这是一种普遍错误，并会导致困惑和混淆。相反，应该使用具有描述性的、有意义的链接文本。这样，无障碍用户也能够更加轻松地使用页面。

以下是一个正确的示例：

<a href="https://www.google.com" title="Google">访问Google</a>

7. 使用语义化标签

语义化标签是指具有意义并用于传达特定含义的HTML元素。HTML5引入了更多的语义化标签，如<article>，<section>和<main>等，使得文档更具明确性和可读性。

以下是一个HTML5语义化标签的示例：

<header>
  <h1>网站名称</h1>
</header>
<nav>
  <ul>
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
  </ul>
</nav>
<section>
  <h2>发帖</h2>
  <form>
    ...
  </form>
</section>
<aside>
  ...
</aside>
<footer>
  ...
</footer>

8. 添加“跳至内容”的链接

对于某些用户，使用键盘来导航页面是一项必需的技能。对于他们，保证快速访问页面的每个部分非常重要。因此，应该在每个页面的顶部添加“跳至内容”的链接，以便用户可以快速跳转到页面的主体部分。

以下是一个示例代码：

<a href="#main-content" class="show-on-focus">跳转至主体内容</a>

/* 隐藏跳转链接，除非键盘焦点移至链接上 */
.show-on-focus {
  position: absolute;
  top: -10000px;
  left: -10000px;
}

.show-on-focus:focus {
  position: static;
  left: auto;
  top: auto;
}

总结：

CSS无障碍最佳实践指南，包括了遵循WCAG2.1指南、选择内容相关的颜色、使用alt属性、避免使用CSS样式增加额外语义、确保页面可大声朗读、使用有意义的、描述性的链接文本、使用语义化标签和添加“跳至内容”的链接等方面。遵循这些实践，可以使您的网站更加有吸引力、易于使用和易于访问，从而更好地满足全球范围内的用户需求。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65935cd9eb4cecbf2d80e53f

CSS 无障碍最佳实践指南