构建可访问组件的第一条铁律是优先使用原生语义化标签，避免用div等元素模拟按钮、链接或tab，因其缺失键盘交互、焦点管理和aria状态支持；导航需用aria-label按功能精确标识；表单label必须显式关联或嵌套；tab组件须严格遵循aria规范并管理焦点。

能用原生标签就别手写语义，这是构建可访问组件的第一条铁律。所有“自定义按钮”“模拟链接”“div 做 tab”的做法，本质上都是在给键盘用户和读屏器设障。

为什么比

更安全

浏览器和 NVDA、VoiceOver 这类辅助技术，对 button 的行为有统一预期：可聚焦、Tab 可进入、回车/空格可触发、自带 role="button"。而 div 没有任何这些能力，硬加 role="button" 之后，你还得手动补：

• tabindex="0"（否则键盘根本进不去）
• onkeydown 监听 Enter 和 Space（否则按空格不响应）
• aria-pressed 或 aria-expanded（如果带状态）
• 禁用时同步 disabled 属性和视觉样式（仅灰掉 CSS 不行）

漏掉任意一项，键盘用户就会卡住——这不是“体验差”，是功能不可用。

导航区域必须配 aria-label，且不能泛化

只写 <nav></nav> 是无效的。当页面存在多个 nav（比如顶部主导航、面包屑、页脚快捷入口），读屏器无法区分它们的用途。常见错误包括：

• <nav aria-label="Navigation"></nav> —— 所有导航都叫 Navigation，等于没标
• <nav></nav> 完全没加 aria-label —— NVDA 默认播报“导航区域”，然后静默跳过

正确写法是按实际功能命名：

<nav aria-label="主导航"><ul><li><a href="/">首页</a></li></ul></nav><nav aria-label="面包屑导航"><ol>
<li><a href="/">首页</a></li>
<li aria-current="page">详情页</li>
</ol></nav>

注意：aria-current="page" 必须加在当前页的 a 元素上，值只能是 "page"，不是 "true" 或 "active"。

表单控件的 label 关联不能靠视觉对齐

屏幕阅读器不看 CSS 布局，只认 DOM 结构。以下写法全部失效：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• <p>邮箱</p> <input type="email"> —— 没关联
• <label>邮箱</label><input type="email" id="email"> —— 漏了 for="email"
• <label for="email">邮箱</label><input type="email" id="user-email"> —— id 和 for 值不一致

可靠写法只有两种：

• 显式关联：<label for="email">电子邮箱</label><input type="email" id="email">
• 嵌套写法（慎用）：<label>电子邮箱<input type="email"></label> —— 虽合法，但在旧版 TalkBack 中可能截断播报

验证方式：打开 Chrome 开发者工具 → 切换到 “Accessibility” 面板 → 点击 input 元素 → 查看 “Accessible name” 字段是否显示 label 文本。

Tab 组件必须用 ARIA 角色，纯 CSS 实现不可访问

用 :checked + 或 display: none 控制显隐的 Tab，对键盘和读屏器完全不可见。标准结构必须包含：

• 外层容器：<div role="tablist"> <li>每个 Tab：<code><button role="tab" aria-selected="true" aria-controls="panel-1">面板一</button>
• 对应面板：<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">…</div>

关键细节：

• 非激活面板必须用 hidden 属性（不是 display: none），否则仍会被读屏读出
• 切换时要同步更新 aria-selected 和 hidden，不能只改样式
• 必须监听 ArrowRight/ArrowLeft 键并手动管理焦点，Tab 键应跳出 tablist 区域
• 小屏下若 Tab 改为下拉菜单，需动态把 role="tablist" 替换为 role="combobox"，否则语义错乱

最常被忽略的是：面板首次激活时，焦点应该自动移到面板内第一个可交互元素（比如输入框或按钮），而不是留在 Tab 按钮上——否则用户得再按两次 Tab 才能操作内容。