ARIA 标签

WAI-ARIA 规范中定义的属性,为 UI 元素提供无障碍名称。指定屏幕阅读器朗读的文本。

ARIA 标签 (aria-label) 是 WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) 规范中定义的属性,为 UI 元素提供无障碍名称。用于为没有视觉标签的元素提供文本信息,作为屏幕阅读器播报元素时的依据。

aria-label 特别适用于纯图标按钮、导航地标等视觉上通过设计传达含义但缺少文本信息的元素。例如,搜索按钮仅包含放大镜图标时,添加 aria-label="搜索" 可以让屏幕阅读器用户了解按钮的用途。同样,当页面包含多个 <nav> 元素时,可以通过 aria-label="主导航"aria-label="页脚导航" 加以区分。ARIA 无障碍指南详细介绍了这些主题。

相关属性包括 aria-labelledby (引用其他元素的文本) 和 aria-describedby (引用补充说明)。aria-label 直接在元素上指定文本,aria-labelledby 引用现有元素 ID。当页面上已存在合适的文本时,优先使用 aria-labelledby;当不存在此类文本时,使用 aria-label。

一个重要原则是,ARIA 的使用应限于原生 HTML 标签 (<label> 元素、alt 属性、<button> 文本内容) 不足的情况。WAI-ARIA 的第一条规则是"如果能用原生 HTML 元素实现,就不要使用 ARIA"。过度使用 ARIA 反而可能损害无障碍性,并可能以意想不到的方式改变屏幕阅读器的行为。Web 无障碍实践书籍提供了更多见解。

从字符计数角度看,aria-label 文本不会显示在屏幕上但会被屏幕阅读器朗读,因此保持简洁明了很重要。过长的标签会增加用户负担,过短则信息不足。通常建议使用 2-3 个词的简洁表达。