无障碍开发中必须知道的 10 个注意事项-JavaScript中文网-JavaScript教程资源分享门户

无障碍开发指的是在设计和开发网站或应用程序时，考虑到所有用户的需求，包括有视觉、听觉、认知或身体上的障碍的用户。这种开发可以帮助更多的人访问您的网站或应用程序，并提高用户体验。以下是无障碍开发中必须知道的 10 个注意事项。

1. 使用语义化 HTML

语义化 HTML 是指使用正确的 HTML 标记来描述页面内容的结构和意义。这有助于屏幕阅读器和其他辅助技术正确地解释页面。例如，使用 <h1> 标记表示页面的主要标题，使用 <nav> 标记表示导航栏等。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <title>语义化 HTML 示例</title>
  </head>
  <body>
    <header>
      <h1>这是页面的主要标题</h1>
      <nav>
        <ul>
          <li><a href="#">链接1</a></li>
          <li><a href="#">链接2</a></li>
          <li><a href="#">链接3</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>这是文章的标题</h2>
        <p>这是文章的内容</p>
      </article>
    </main>
    <footer>
      <p>&copy; 2021 公司名称</p>
    </footer>
  </body>
</html>

2. 提供有意义的文本替代品

对于图片、视频、音频等非文本内容，需要提供有意义的替代品，以便屏幕阅读器和其他辅助技术可以正确地解释它们。例如，对于一张包含公司 logo 的图片，可以使用 alt 属性提供一个简短的描述。

<img src="logo.png" alt="公司名称的 logo">

3. 不要依赖颜色来传达信息

有些用户可能无法区分不同的颜色，因此不应该依赖颜色来传达重要信息。例如，如果您在表单中使用红色文本表示错误，还应该使用其他方式来标记这些错误，例如在文本框旁边添加一个红色感叹号。

<label for="username">用户名:</label>
<input type="text" id="username" name="username" required aria-describedby="username-error">
<span id="username-error" role="alert" aria-live="polite" style="color: red;">请输入用户名</span>

在这个示例中，我们使用 aria-describedby 属性将错误消息与输入框相关联，并使用 role="alert" 和 aria-live="polite" 属性告诉屏幕阅读器该如何处理这个消息。

4. 使用可访问的表格

表格是一种很好的呈现数据的方式，但是需要使用正确的标记和属性来确保它们易于访问。例如，使用 th 标记定义表头单元格，使用 scope 属性指定表头单元格的范围，使用 id 和 headers 属性将数据单元格与表头单元格相关联。

// www.javascriptcn.com code example
<table>
  <caption>表格标题</caption>
  <thead>
    <tr>
      <th scope="col">列1</th>
      <th scope="col">列2</th>
      <th scope="col">列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">行1</th>
      <td headers="col1">数据1</td>
      <td headers="col2">数据2</td>
      <td headers="col3">数据3</td>
    </tr>
    <tr>
      <th scope="row">行2</th>
      <td headers="col1">数据4</td>
      <td headers="col2">数据5</td>
      <td headers="col3">数据6</td>
    </tr>
  </tbody>
</table>

5. 使用键盘导航

有些用户可能无法使用鼠标来导航网站或应用程序，因此需要使用键盘导航。使用 tabindex 属性确保所有可交互元素都可以通过键盘访问，并使用 :focus 伪类来指定元素获得焦点时的样式。

<button tabindex="0">可通过键盘访问的按钮</button>

button:focus {
  outline: 2px solid blue;
}

6. 考虑可访问的颜色对比度

确保文本和背景颜色之间的对比度足够高，以便所有用户都可以轻松地看到文本。可以使用 Web Content Accessibility Guidelines (WCAG) 中定义的标准来检查颜色对比度。

body {
  color: #333;
  background-color: #f5f5f5;
}

7. 提供明确的指示

确保用户知道他们在网站或应用程序中的位置和状态。例如，使用 aria-current 属性指示当前页面在导航栏中的位置。

<nav>
  <ul>
    <li><a href="/" aria-current="page">首页</a></li>
    <li><a href="/about/">关于我们</a></li>
    <li><a href="/contact/">联系我们</a></li>
  </ul>
</nav>

8. 使用语音输入和识别

为那些无法使用键盘或鼠标的用户提供语音输入和识别功能。可以使用 Web Speech API 实现这些功能。

<input type="text" id="voice-input" name="voice-input" x-webkit-speech>

const voiceInput = document.getElementById('voice-input');
voiceInput.addEventListener('webkitspeechchange', function() {
  console.log('语音输入结果:', voiceInput.value);
});

9. 提供易于理解的错误消息

当用户提交表单时，如果出现错误，需要提供易于理解的错误消息。使用 aria-describedby 属性将错误消息与相应的表单字段相关联，并使用 role="alert" 和 aria-live="polite" 属性告诉屏幕阅读器该如何处理错误消息。

<label for="username">用户名:</label>
<input type="text" id="username" name="username" required aria-describedby="username-error">
<span id="username-error" role="alert" aria-live="polite">请输入用户名</span>

10. 测试您的网站或应用程序

最后，确保测试您的网站或应用程序，以确保它们易于访问，并且所有用户都可以使用它们。可以使用屏幕阅读器和其他辅助技术进行测试，并使用 WCAG 标准来检查您的网站或应用程序的无障碍性。

以上是无障碍开发中必须知道的 10 个注意事项。通过遵循这些注意事项，您可以创建易于访问的网站或应用程序，并为所有用户提供更好的体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d3c5a8a941bf713471ff1e

无障碍开发中必须知道的 10 个注意事项