无障碍 Web 应用开发的 8 个优质技巧-JavaScript中文网-JavaScript教程资源分享门户

在 Web 应用开发中，无障碍性是一个重要的话题。无障碍性是指为了让所有人都能够访问和使用 Web 应用，设计和开发应用程序时需要遵循的一些规则和技术。在本文中，我们将介绍 8 个优质技巧，帮助你开发更加无障碍的 Web 应用。

1. 使用语义化 HTML

语义化 HTML 是无障碍 Web 应用开发的基础。使用语义化的 HTML 标签来定义页面内容，可以让屏幕阅读器和其他辅助技术更好地理解页面结构和内容。例如，使用 h1 标签来定义页面标题，使用 nav 标签来定义导航栏，使用 button 标签来定义按钮等。

// www.javascriptcn.com code example
<header>
  <h1>我的网站</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于我们</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</header>

2. 添加适当的文本替代

对于图片、视频、音频等非文本内容，需要添加适当的文本替代来描述它们的内容和作用。这样可以让屏幕阅读器和其他辅助技术读出这些内容，让视觉障碍者也能够了解页面上的信息。

<img src="example.jpg" alt="这是一个示例图片">
<video src="example.mp4" controls>
  <track kind="captions" src="example.vtt" label="中文字幕">
</video>
<audio src="example.mp3" controls>
  <track kind="captions" src="example.vtt" label="中文字幕">
</audio>

3. 提供明显的焦点指示

为页面中的交互元素添加明显的焦点指示，可以让键盘用户更好地了解自己当前所在的位置和状态。例如，添加高亮、边框、背景色等效果来表示当前焦点所在的元素。

:focus {
  outline: 2px solid blue;
}

4. 增加键盘可访问性

键盘是许多用户的主要输入方式，因此需要确保页面中的所有交互元素都可以使用键盘进行操作。例如，使用 tabindex 属性来指定元素的键盘顺序，使用键盘事件来处理交互操作。

<button tabindex="0" onclick="alert('Hello World!')">点击我</button>

document.addEventListener('keydown', function(event) {
  if (event.keyCode === 13) { // Enter
    alert('Hello World!');
  }
});

5. 避免使用纯色作为唯一的视觉区分

对于视力受损的用户，使用纯色作为唯一的视觉区分可能会导致难以区分不同的元素。因此需要使用其他视觉特征来区分不同的元素，例如使用不同的形状、大小、颜色等。

// www.javascriptcn.com code example
.button {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #333;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
}

.button-primary {
  background-color: #007bff;
  color: #fff;
}

6. 提供易于理解的错误提示

对于表单等交互元素，如果用户输入了错误的内容，需要提供易于理解的错误提示。提示信息应该简洁明了，指出错误的原因和如何进行修正。

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  <span class="error-message" aria-live="polite"></span>
  <button type="submit">提交</button>
</form>

// www.javascriptcn.com code example
var form = document.querySelector('form');
var usernameInput = form.querySelector('#username');
var errorMessage = form.querySelector('.error-message');

form.addEventListener('submit', function(event) {
  if (!usernameInput.value) {
    event.preventDefault();
    errorMessage.textContent = '用户名不能为空';
    usernameInput.setAttribute('aria-invalid', true);
    usernameInput.focus();
  }
});

usernameInput.addEventListener('input', function() {
  errorMessage.textContent = '';
  usernameInput.removeAttribute('aria-invalid');
});

7. 使用 ARIA 规范

ARIA（Accessible Rich Internet Applications）是一组用于增强 Web 应用可访问性的规范。使用 ARIA 规范可以为屏幕阅读器等辅助技术提供更多的信息，让用户更好地了解页面结构和交互。

<div role="tabpanel" aria-labelledby="tab1">
  <h2 id="tab1">选项卡 1</h2>
  <p>这是选项卡 1 的内容</p>
</div>
<div role="tabpanel" aria-labelledby="tab2">
  <h2 id="tab2">选项卡 2</h2>
  <p>这是选项卡 2 的内容</p>
</div>

8. 进行无障碍性测试

最后，需要对 Web 应用进行无障碍性测试，确保所有用户都能够访问和使用应用程序。可以使用一些工具和技术来进行测试，例如屏幕阅读器、键盘操作、无障碍性检查器等。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的网站</title>
</head>
<body>
  <header>
    <h1>我的网站</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h2>欢迎访问我的网站</h2>
    <p>这是一个示例页面，用于演示无障碍 Web 应用开发的技巧。</p>
    <form>
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" required>
      <span class="error-message" aria-live="polite"></span>
      <button type="submit">提交</button>
    </form>
  </main>
</body>
</html>

以上就是无障碍 Web 应用开发的 8 个优质技巧，希望对你有所帮助。无障碍性是一个复杂的问题，需要不断地学习和实践才能够掌握。

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

无障碍 Web 应用开发的 8 个优质技巧