Web 可访问性最佳实践：确保所有用户平等访问

3. 提供替代文本

为图片提供 alt 属性，让屏幕阅读器能够描述图片内容。装饰性图片可使用空字符串。

<!-- 缺失 alt -->
<img src="logo.png">

<!-- 补充 alt -->
<img src="logo.png" alt="公司 logo">

4. 键盘可访问性

确保所有功能都可以通过键盘访问，特别是焦点状态要清晰可见。移除默认样式后务必添加自定义焦点指示器。

/* 基础焦点样式 */
:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* 按钮自定义焦点 */
button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.5);
}

5. 适当的表单标签

为表单元素添加关联的 label，提高可访问性和点击区域。

<!-- 仅依赖 placeholder -->
<input type="text" placeholder="姓名">

<!-- 使用 label -->
<label for="name">姓名</label>
<input type="text" id="name" placeholder="请输入姓名">

6. ARIA 属性

当原生 HTML 无法满足需求时，使用 ARIA（Accessible Rich Internet Applications）属性增强交互说明。

<!-- 导航菜单 -->
<nav aria-label="主导航">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</nav>

<!-- 动态按钮 -->
<button aria-expanded="false" aria-controls="menu">菜单</button>
<div hidden>
    <!-- 菜单内容 -->
</div>

7. 跳过导航链接

为键盘用户提供'跳过到主要内容'的链接，避免每次都要遍历整个导航栏。

<a href="#main-content" class="skip-link">跳过导航</a>
<nav><!-- 导航内容 --></nav>
<main id="main-content"><!-- 主要内容 --></main>

<style>
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #667eea;
    color: white;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s ease;
}
.skip-link:focus {
    top: 0;
}
</style>

8. 合理的标题层级

保持标题层级顺序（h1 -> h2 -> h3），不要跳过级别，这有助于屏幕阅读器构建文档大纲。

<!-- 错误：跳过了 h2 -->
<h1>网站标题</h1>
<h3>章节标题</h3>

<!-- 正确 -->
<h1>网站标题</h1>
<h2>章节标题</h2>
<h3>子章节标题</h3>

9. 多媒体内容的字幕

为视频和音频提供字幕和文字稿，方便听障用户或静音环境下的观看。

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track kind="captions" src="captions.vtt" srclang="zh" label="中文">
    您的浏览器不支持视频播放。
</video>

10. 响应式设计

确保网站在不同设备上都能正常访问，字体大小和布局需适配移动端。

/* 响应式布局 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 响应式字体 */
body { font-size: 16px; }
@media (max-width: 768px) {
    body { font-size: 14px; }
}

测试工具

开发完成后，建议使用以下工具进行验证：

1. Lighthouse

Chrome DevTools 内置工具，快速扫描可访问性问题。

1. 打开 Chrome DevTools (F12)
2. 选择 Lighthouse 面板
3. 勾选 Accessibility 选项
4. 点击 Generate report 生成报告

2. axe DevTools

专业的浏览器扩展，集成度高，适合日常开发调试。

1. 安装 axe DevTools 扩展
2. 打开目标页面
3. 点击图标运行 Scan
4. 查看详细问题列表

3. WAVE

在线评估工具，无需安装插件。

1. 访问 https://wave.webaim.org/
2. 输入网址
3. 查看可视化反馈结果

实战案例

案例 1：可访问的导航菜单

包含 ARIA 状态管理和键盘事件处理。

<nav aria-label="主导航">
    <button aria-expanded="false" aria-controls="menu">菜单</button>
    <ul hidden>
        <li><a href="#">首页</a></li>
        <li><a href="#">产品</a></li>
    </ul>
</nav>

<script>
const menuToggle = document.querySelector('button');
const menu = document.querySelector('ul');

menuToggle.addEventListener('click', () => {
    const expanded = menuToggle.getAttribute('aria-expanded') === 'true';
    menuToggle.setAttribute('aria-expanded', !expanded);
    menu.hidden = expanded;
});
</script>

<style>
nav { background: #333; color: white; padding: 10px; }
button { background: #667eea; border: none; padding: 8px 16px; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 10px 0 0; }
a { color: white; text-decoration: none; display: block; padding: 5px; }
a:hover, a:focus { background: rgba(255, 255, 255, 0.1); }
button:focus, a:focus { outline: 2px solid #667eea; outline-offset: 2px; }
</style>

案例 2：可访问的表单

确保每个输入框都有明确的 Label 关联，且焦点状态明显。

<form>
    <div>
        <label for="name">姓名</label>
        <input type="text" id="name" required>
    </div>
    <div>
        <label for="email">邮箱</label>
        <input type="email" id="email" required>
    </div>
    <button type="submit">提交</button>
</form>

<style>
form { max-width: 600px; margin: 0 auto; padding: 20px; background: #f5f7fa; border-radius: 8px; }
div { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; }
input:focus, textarea:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2); }
button { background: #667eea; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; }
button:focus { outline: 2px solid #667eea; outline-offset: 2px; }
</style>

案例 3：可访问的模态框

模态框需要管理焦点循环，ESC 键关闭，以及背景遮罩的交互。

<button id="modal-toggle">打开模态框</button>
<div id="modal" aria-hidden="true" role="dialog" aria-labelledby="modal-title">
    <div class="modal-content">
        <h2 id="modal-title">模态框标题</h2>
        <p>模态框内容</p>
        <button id="modal-close">关闭</button>
    </div>
</div>

<script>
const modalToggle = document.getElementById('modal-toggle');
const modal = document.getElementById('modal');
const modalClose = document.getElementById('modal-close');

modalToggle.addEventListener('click', () => {
    modal.setAttribute('aria-hidden', 'false');
    modalClose.focus();
});

modalClose.addEventListener('click', () => {
    modal.setAttribute('aria-hidden', 'true');
    modalToggle.focus();
});

document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && modal.getAttribute('aria-hidden') === 'false') {
        modal.setAttribute('aria-hidden', 'true');
        modalToggle.focus();
    }
});
</script>

<style>
#modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
#modal[aria-hidden="true"] { display: none; }
.modal-content { background: white; padding: 20px; border-radius: 8px; max-width: 500px; width: 90%; }
button { background: #667eea; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
button:focus { outline: 2px solid #667eea; outline-offset: 2px; }
</style>

总结

Web 可访问性是前端开发的重要责任，它确保所有用户都能平等地访问和使用网站。在实现过程中，我们要像对待艺术品一样精心考虑每一个细节，从语义化标签到焦点样式，确保网站对所有人都友好。记住，像素不能偏差 1px，可访问性的标准也不能偏差一分一毫。让我们用可访问性为页面注入人文的温度，让每个用户都能平等地享受数字世界的美好。