HTML可访问性（Accessibility）

可访问性确保所有用户，包括残障用户，都能使用网站。这是现代Web开发的重要组成部分。

关键可访问性实践

1. 使用alt属性

为所有图片添加描述性的alt文本，帮助屏幕阅读器用户理解图片内容。

html

<!-- 良好的实践 -->
<img src="logo.png" alt="公司logo，显示公司名称和标志">

<!-- 装饰性图片可以使用空alt属性 -->
<img src="decoration.png" alt="">

2. 为表单控件添加标签

使用<label>标签将文本描述与表单控件关联，提高可访问性和用户体验。

html

<!-- 显式关联（推荐） -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!-- 隐式关联 -->
<label>
  密码：
  <input type="password" name="password">
</label>

3. 使用ARIA属性

为复杂组件添加无障碍描述，帮助屏幕阅读器理解页面结构和交互元素。

html

<!-- 导航区域 -->
<div role="navigation" aria-label="主导航">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</div>

<!-- 展开/折叠组件 -->
<button aria-expanded="false" aria-controls="content">
  展开详情
</button>
<div id="content" aria-hidden="true">
  这里是详情内容
</div>

4. 确保键盘可访问

所有功能都应该可以通过键盘操作，包括导航、表单填写和交互元素。

确保焦点顺序合理
使用:focus伪类提供清晰的焦点指示器
避免使用tabindex="-1"禁用默认焦点

css

/* 提供清晰的焦点样式 */
button:focus,
input:focus,
a:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

5. 使用适当的颜色对比度

确保文本和背景的对比度符合WCAG标准（至少4.5:1的正常文本对比度）。

6. 结构化内容

使用适当的标题层级（h1-h6）组织内容，帮助用户和屏幕阅读器理解页面结构。

html

<h1>主标题</h1>
<p>介绍内容...</p>

<h2>章节标题</h2>
<p>章节内容...</p>

<h3>子章节标题</h3>
<p>子章节内容...</p>

可访问性工具

WAVE：网页可访问性评估工具
axe：浏览器扩展，用于检测可访问性问题
Lighthouse：Chrome开发者工具中的可访问性审计功能
NVDA/JAWS：屏幕阅读器，用于测试实际使用体验