让每个人都能访问你的网页
WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）是一套技术规范，用于增强网页的无障碍性。
| Role | 用途 | 示例 |
|---|---|---|
role="navigation" |
导航区域 | <div role="navigation"> |
role="main" |
主要内容 | <div role="main"> |
role="button" |
按钮 | <div role="button" tabindex="0"> |
role="dialog" |
对话框 | <div role="dialog" aria-modal="true"> |
role="alert" |
重要提示 | <div role="alert">错误信息</div> |
role="tablist" |
标签页列表 | <div role="tablist"> |
<!-- 使用 ARIA 增强自定义组件 -->
<div role="button"
tabindex="0"
aria-pressed="false"
onclick="toggleButton(this)">
切换按钮
</div>
<!-- 自定义下拉菜单 -->
<div class="dropdown">
<button aria-haspopup="true"
aria-expanded="false"
aria-controls="menu-list">
菜单
</button>
<ul id="menu-list" role="menu" hidden>
<li role="menuitem">选项 1</li>
<li role="menuitem">选项 2</li>
</ul>
</div>确保所有交互元素都可以通过键盘访问。
| tabindex 值 | 行为 |
|---|---|
tabindex="0" |
元素可聚焦，按 DOM 顺序 |
tabindex="-1" |
元素可脚本聚焦，但不在 Tab 顺序中 |
tabindex="1+" |
指定顺序（不推荐，难以维护） |
<!-- 可聚焦的 div -->
<div tabindex="0" role="button" onclick="handleClick()">
点击我
</div>
<!-- 模态框焦点管理 -->
<div role="dialog" aria-modal="true" tabindex="-1" id="modal">
<h2 id="modal-title">对话框标题</h2>
<button onclick="closeModal()">关闭</button>
</div>| 平台 | 屏幕阅读器 | 说明 |
|---|---|---|
| Windows | NVDA（免费） | 最流行的免费屏幕阅读器 |
| Windows | JAWS（付费） | 行业标准，功能最全面 |
| macOS/iOS | VoiceOver | 系统内置，快捷键 Cmd+F5 |
| Android | TalkBack | 系统内置 |
| 级别 | 正常文本 | 大文本（18pt+ 或 14pt+粗体） |
|---|---|---|
| AA（最低要求） | 4.5:1 | 3:1 |
| AAA（最佳） | 7:1 | 4.5:1 |
✓ 良好：黑字白底（21:1）
✓ 可接受：深灰字白底（5.7:1）
✗ 不足：浅灰字白底（1.6:1）
✓ 良好：白字红底（5.2:1）
<!-- ❌ 不好：仅用颜色表示状态 -->
<span style="color: red;">错误</span>
<span style="color: green;">成功</span>
<!-- ✓ 好：颜色 + 图标 + 文本 -->
<span style="color: red;" role="img" aria-label="错误">❌</span> 错误
<span style="color: green;" role="img" aria-label="成功">✓</span> 成功提升现有页面的可访问性：