Lobsters | 📄 原文链接 | 2026-07-14 收录

不要在静态文本元素上使用 aria-label

来源：benmyers.dev — 2026-07-13

📋 概述

Ben Myers 在这篇无障碍实战文章中纠正了一个极其常见的反模式：在静态文本元素（如 <div>、<span>、<p>）上使用 aria-label 或 aria-labelledby。根据 ARIA 规范，这些属性的可访问名称仅对交互元素（按钮、链接、表单控件）和地标区域有效——在静态元素上使用时，大多数屏幕阅读器会直接忽略。文章通过详细的角色映射表列出了所有禁止使用 aria-label 的 HTML 元素，并提供了正确的替代方案。

🔑 核心要点

aria-label 禁止在 generic、paragraph、emphasis、strong 等角色上使用——这意味着 <div>、<p>、<em>、<strong> 默认不支持
macOS VoiceOver 是个例外：它仍然会读出违规的 aria-label，导致开发者误以为自己的"修复"有效
正确做法：如果需要可访问名称，先覆盖 role（如 role="img"），然后再使用 aria-label 才有效
ARIA 1.3 草案进一步扩展了禁止列表，新增 definition、mark、suggestion、term、time 等角色
常见的失败模式：用 <span aria-label="vegetarian">🌱</span> 标注素食图标——屏幕阅读器只看到 emoji，aria-label 被忽略
根本原则：aria-label 是为交互元素和地标设计的，静态文本的语义应由 HTML 元素本身承载

💡 金句

你加了 aria-label 觉得修复了无障碍问题，但在大多数浏览器/屏幕阅读器组合下，它们根本不会被读出——这就是规范明确禁止在静态文本元素上使用的原因。

← 返回 Lobsters 首页