♿
ARIA 无障碍速查
ARIA 角色与属性无障碍速查。
本地处理 · 不上传
加载工具中…
相关：aria · 无障碍 · a11y · role
ARIA 无障碍速查列出常用的 role 与 aria-* 属性及其用途。用对它们能让辅助技术正确理解界面结构。
使用步骤
- 先确定要标注的是地标区域、组件还是状态
- 找到对应的 role 或 aria-* 属性名
- 照示例写进 HTML，注意有些属性只能配特定 role
- 改完用读屏软件或浏览器无障碍面板实际听一遍
使用场景
- 为自定义组件添加无障碍标记
- 理解各 role 的语义
- 查找合适的 aria 属性
- 无障碍改造时的参考
小贴士
- ARIA 的第一条规则是：能用原生 HTML 元素就不要用 ARIA。button 元素天然具备所有正确行为，加了 role 的 div 需要手工补齐一切。
- 错误的 ARIA 比不加更糟——它会覆盖元素的原生语义，给屏幕阅读器传递错误信息。
- aria-label 用于给没有可见文字的元素（如图标按钮）提供名称，这是最常用也最容易补上的一项。
常见问题
什么时候该用 ARIA？
当原生 HTML 无法表达所需语义时。规范的第一条规则就是「能用原生元素就别用 ARIA」——用 button 而不是加了 role="button" 的 div，前者自带键盘支持、焦点管理与正确播报。
用错 ARIA 会怎样？
比不用更糟。ARIA 会覆盖元素的原生语义，错误的 role 会让屏幕阅读器向用户播报错误的信息。宁可不加，也不要凭猜测添加。
图标按钮怎么处理？
加 aria-label 提供文字名称。纯图标按钮对屏幕阅读器是一个没有名字的按钮，用户完全不知道它的作用。这是无障碍改造中最常见也最容易修的一类问题。
ARIA 无障碍速查是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用ARIA 无障碍速查，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。