ARIA 无障碍属性速查表
写组件时想不起该用哪个 aria-*?按 命名 name / 状态 state / 角色 role / 实时播报 live 四类速查 16 个高频属性,每条附适用场景、正确 vs 错误 标注对照与坑点提醒,示例代码一键复制。
扩展条目 · 掌握进度 · 决策树
在原 16 条基础上补充 15 条 ARIA 1.2 属性与关系,支持搜索、按命名 / 状态 / 关系 / 播报筛选,勾选「已掌握」计算进度,并附原生 HTML 对照表与自绘决策树。
已掌握 0 / 0 条
没有匹配的扩展属性,换个关键词试试(如"滑块"、"弹窗"、"关系")。
原生 HTML 与 ARIA 对照表
| 能力 | 原生 HTML | ARIA 替代 | 结论 |
|---|---|---|---|
| 勾选状态 | <input type="checkbox" checked> | role="checkbox" aria-checked | 优先原生 |
| 禁用 | disabled | aria-disabled="true" | 真禁用用原生 |
| 必填 | required | aria-required="true" | 优先原生 |
| 展开收起 | <details open> | aria-expanded | 自定义控件用 ARIA |
| 当前项 | 无等价属性 | aria-current="page" | 必须用 ARIA |
| 数值范围 | <input type="range"> | aria-valuemin/max/now | 自定义滑块用 ARIA |
| 动态播报 | 无等价属性 | aria-live | 必须用 ARIA |
| 装饰隐藏 | hidden / display:none | aria-hidden="true" | 仅隐藏语义时用 |
ARIA 使用决策树 · 自绘 SVG
方案管理 · 数值对比 · 导出
调好的参数可存成方案随时载入,也能生成可分享链接;结果里的数值列会自动画成对比图,并支持导出 CSV / JSON。

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