前端无障碍性最佳实践与实现指南

前端无障碍性：提升网站可访问性

常见误区

• 法律合规：许多国家和地区都有无障碍性法规，不遵守可能面临投诉。
• 用户群体：无障碍设计能覆盖残障人士及特定场景下的正常用户。
• SEO 优化：结构良好的无障碍网站更容易被搜索引擎收录。
• 用户体验：对所有人都友好的设计，对正常人也有好处。

反面教材示例

<!-- 缺乏语义化 HTML -->
<div>
  <div>网站 logo</div>
  <div>
    <div>首页</div>
    <div>关于我们</div>
    <div>联系我们</div>
  </div>
</div>

<!-- 缺少 alt 标签 -->
<img src="logo.png">

<!-- 颜色对比不足 -->
<div style="color: #ccc; background: #fff;">这段文字很难阅读</div>

<!-- 键盘无法访问 -->
<button onclick="doSomething()">点击我</button>

<!-- 缺少 ARIA 属性 -->
<div>
  <div>
    <h2>弹窗标题</h2>
    <p>弹窗内容</p>
  </div>
</div>

正确实践示例

<!-- 使用语义化 HTML -->
<header>
  <h1>网站 logo</h1>
  <nav>
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于我们</a></li>
      <li><a href="/contact">联系我们</a></li>
    </ul>
  </nav>
</header>

<!-- 添加 alt 标签 -->
<img src="logo.png" alt="网站 logo">

<!-- 足够的颜色对比 -->
<div style="color: #000; background: #fff;">这段文字很容易阅读</div>

<!-- 键盘可访问 -->
<button onclick="doSomething()" tabindex="0">点击我</button>

<!-- 添加 ARIA 属性 -->
<div role="dialog" aria-labelledby="modal-title" aria-hidden="true">
  <div>
    <h2>弹窗标题</h2>
    <p>弹窗内容</p>
  </div>
</div>

<!-- 使用 ARIA live region -->
<div aria-live="polite"></div>

// 键盘导航
 document.addEventListener('keydown', function(e) {
   if (e.key === 'Tab') {
     document.body.classList.add('keyboard-navigation');
   }
 });

// 跳过导航链接
function createSkipLink() {
  const skipLink = document.createElement('a');
  skipLink.href = '#main-content';
  skipLink.className = 'skip-link';
  skipLink.textContent = '跳过导航';
  document.body.insertBefore(skipLink, document.body.firstChild);
}

// 表单标签关联
function associateLabels() {
  const inputs = document.querySelectorAll('input');
  inputs.forEach(input => {
    if (input.id) {
      const label = document.querySelector(`label[for="${input.id}"]`);
      if (label) { /* 标签和输入框已关联 */ }
    }
  });
}

// 动态内容通知
function updateStatus(message) {
  const statusElement = document.getElementById('status-message');
  statusElement.textContent = message;
}

/* 焦点样式 */
*:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* 跳过链接样式 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #0066cc;
  color: white;
  padding: 8px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}

/* 键盘导航样式 */
.keyboard-navigation *:focus {
  /* 更明显的焦点样式 */
}

核心建议

前端无障碍性不仅仅是加几个 alt 标签，而是从语义化 HTML、键盘导航、ARIA 属性等多个方面入手。无障碍性是前端开发的基本要求，优秀的前端开发者会将其融入日常开发中。

总结

• 语义化 HTML：使用 header、nav、main、section 等正确标签。
• alt 标签：为所有图片添加有意义的 alt 属性。
• 颜色对比：确保文本和背景对比度足够高。
• 键盘导航：确保所有功能可通过键盘访问。
• ARIA 属性：使用角色和属性增强屏幕阅读器兼容性。
• 焦点管理：确保焦点在正确元素上，并有明显样式。
• 跳过导航：提供跳过重复内容的链接。
• 表单标签：确保所有表单元素有关联的标签。
• 动态内容：使用 ARIA live region 通知变化。
• 测试：使用屏幕阅读器和测试工具验证。