ARIA 无障碍属性速查表

写组件时想不起该用哪个 aria-*?按 命名 name / 状态 state / 角色 role / 实时播报 live 四类速查 16 个高频属性,每条附适用场景、正确 vs 错误 标注对照与坑点提醒,示例代码一键复制。

扩展条目 · 掌握进度 · 决策树

在原 16 条基础上补充 15 条 ARIA 1.2 属性与关系,支持搜索、按命名 / 状态 / 关系 / 播报筛选,勾选「已掌握」计算进度,并附原生 HTML 对照表与自绘决策树。

已掌握 0 / 0 条

原生 HTML 与 ARIA 对照表

能力原生 HTMLARIA 替代结论
勾选状态<input type="checkbox" checked>role="checkbox" aria-checked优先原生
禁用disabledaria-disabled="true"真禁用用原生
必填requiredaria-required="true"优先原生
展开收起<details open>aria-expanded自定义控件用 ARIA
当前项无等价属性aria-current="page"必须用 ARIA
数值范围<input type="range">aria-valuemin/max/now自定义滑块用 ARIA
动态播报无等价属性aria-live必须用 ARIA
装饰隐藏hidden / display:nonearia-hidden="true"仅隐藏语义时用

ARIA 使用决策树 · 自绘 SVG

方案管理 · 数值对比 · 导出

调好的参数可存成方案随时载入,也能生成可分享链接;结果里的数值列会自动画成对比图,并支持导出 CSV / JSON。

最近方案 暂无

♿口径说明与常见误填

16 个高频属性四类速查,对错示例对照

四大分类
命名、状态、角色、实时播报四类共 16 个高频 aria-* 属性。
对错对照
每条附适用场景与正确 vs 错误用法示例,坑点即高频翻车点。
代码复制
示例代码一键复制,贴进组件即可套用。
关键词搜索
按属性名或场景词搜索:展开、禁用、播报、必填。
第一定律
能用原生元素就用原生元素,ARIA 只是自定义控件的补充手段。

这个工具解决什么问题

写组件想不起该用哪个 aria-*?本速查表把 16 个高频 ARIA 属性按命名、状态、角色、实时播报四类整理,每条附适用场景、正确与错误示例对照及坑点提醒,支持关键词搜索与示例代码一键复制,读屏适配该补什么属性,这一页查完就够。

三条标注守则

① 可见文字优先:有可见文字时用 labelledby 引用它,别重复 label——语音命令要求听到的和看到的一致。

② 状态必须同步:expanded、disabled、checked 等状态属性要随真实 UI 更新,错误的状态比没有状态更糟。

③ 容器要预先存在:aria-live 容器必须在 DOM 里预先存在,动态插入带 live 的元素本身常常不被监听。

怎么用

  1. 第 1 步 · 搜索或筛分类
    输入 aria-live、展开、禁用等关键词,或按命名、状态、角色、播报四类筛选。
  2. 第 2 步 · 对照示例
    每张卡片展示适用场景与正确、错误用法对照,坑点提醒标注高频失误。
  3. 第 3 步 · 复制示例代码
    一键复制属性用法示例,按自己组件的结构改贴。

更新记录

  • v1.0 2026-11-02
  • 2026-11-02 上线首个版本
  • 2026-11-02 新增实时播报分类与错误示例标注

常见问题

aria-label 怎么用、什么时候用?
只在元素没有可见文字或文字不够描述用途时用,如图标按钮写 aria-label 关闭。有可见文字时优先用 aria-labelledby 引用它,保证语音命令与视觉标签一致;给本就有名字的元素重复标注反而制造噪音。
role button 和 button 标签有什么区别?
原生 button 标签自带角色、键盘回车/空格触发与焦点管理;div 加 role=button 只补了角色,还得手动加 tabindex=0 和按键监听。能用原生元素就用原生元素——这是 ARIA 第一定律。
aria-expanded 用在哪些控件上?
用在能展开/收起内容的触发器上:下拉菜单、折叠面板、树节点、模态框开关,值只能是 true 或 false,且必须与 aria-controls 指向的面板同步更新,否则读屏用户会听到错误状态。
屏幕阅读器识别不了我的组件怎么办?
按顺序排查:① 是否用了原生语义标签;② 自定义控件是否补齐 role、状态属性、tabindex 与键盘事件;③ 装饰图是否空 alt、隐藏内容是否误用 display none;④ 动态结果用 aria-live 播报。本页每条错误示例都是高频翻车点。
aria-live 实时播报怎么用?
给预先存在的容器加 aria-live polite(搜索建议、表单校验)或 assertive(支付失败等紧急提示),之后只更新其内部文本,读屏器会自动播报。动态插入带 aria-live 的元素本身往往不被监听,这是最常见的失效原因。

💬 留言板 0

全部留言需审核通过后展示
💬

还没有留言,来抢沙发吧!

✍️ 说点什么
0 / 500
图形验证码
👣 做完这一步,顺便看看
🏛️ 凯撒密码解密 凯撒密码解密 :1~25 位位移加解密、ROT13 一键转换… → 🔤 乱码转换器在线修复 乱码转换器在线 :把“锟斤拷”“�”“涓枃”“😀”等乱… → 📸 代码截图美化工具 在线代码转图片工具:粘贴或输入代码(支持 JavaScrip… → 🎨 WCAG 对比度检测工具 在线颜色对比度检测工具:输入前景文字色与背景色(支持 #he… →
全部工具 →