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

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

1. 使用语义化 HTML

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

-- -------------------- ---- -------
--------- -----
------
  ------
    ---------- ---- ----------
  -------
  ------
    --------
      ------------------
      -----
        ----
          ------ ---------------------
          ------ ---------------------
          ------ ---------------------
        -----
      ------
    ---------
    ------
      ---------
        ----------------
        --------------
      ----------
    -------
    --------
      --------- ---- --------
    ---------
  -------
-------

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 属性将数据单元格与表头单元格相关联。

-- -------------------- ---- -------
-------
  -----------------------
  -------
    ----
      --- -------------------
      --- -------------------
      --- -------------------
    -----
  --------
  -------
    ----
      --- -------------------
      --- -----------------------
      --- -----------------------
      --- -----------------------
    -----
    ----
      --- -------------------
      --- -----------------------
      --- -----------------------
      --- -----------------------
    -----
  --------
--------

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 个注意事项