能,但前提是正确使用;用错反而会破坏可访问性。aria是补丁工具,仅在原生语义不足时使用,须严格遵循交互、焦点、语义一致性要求,否则比不用更糟。

能,但前提是正确使用;用错反而会破坏可访问性。
ARIA role 属性写错会导致屏幕阅读器完全忽略元素
很多开发者看到 role="button" 就直接加在 <div> 上,却忘了配套处理键盘交互和焦点管理。结果屏幕阅读器会把它读作“按钮”,但用户按空格/回车没反应,Tab 也无法聚焦——这比不加更糟。
<ul>
<li>仅当原生 HTML 元素无法满足语义需求时才用 <code>role(比如自定义下拉菜单、模态框)
role="button" 必须配合 tabindex="0" 和 onclick + onkeydown(监听 Enter/Space)<button role="button"></button> 是反模式aria-label 和 aria-labelledby 混用容易覆盖真实文本
当一个按钮内有可见文字,又加了 aria-label,多数屏幕阅读器会优先读取 aria-label 内容,把视觉用户看到的文案彻底屏蔽。这不是“增强”,是“替换”。
- 优先用可见文本 + 语义化标签(如
<button>提交表单</button>),无需 ARIA -
aria-label仅用于无文本内容的控件(如纯图标按钮:<button aria-label="删除"><i class="icon-delete"></i></button>) -
aria-labelledby要指向页面中**已存在的、有明确语义的元素 ID**,不能凭空造一个不可见的<span id="hint"></span>然后填空
aria-hidden="true" 误用会切断整个子树的可访问性
常见错误是给某个容器加 aria-hidden="true",以为只隐藏“装饰性内容”,结果里面嵌套的按钮、链接、表单控件全被屏幕阅读器跳过——连键盘 Tab 都进不去。
-
aria-hidden="true"应仅用于纯装饰、无交互、无信息价值的内容(如背景图标、分隔线) - 它具有继承性:父元素设为
true,所有后代默认不可访问,除非显式设aria-hidden="false" - 模态框显示时,常用
aria-hidden="true"关闭背景区域,但必须确保模态框自身aria-hidden="false"或未设置该属性
ARIA 不是可访问性的快捷键,它是补丁工具。浏览器和辅助技术对 ARIA 的支持存在差异,而原生语义(button、nav、main、label 等)永远更可靠、更轻量、更少出错。真正难的不是写对 ARIA,而是判断“这里到底需不需要 ARIA”。











