无障碍名称计算揭秘
了解浏览器如何决定元素的名称。
无障碍名称计算揭秘 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。
什么是可访问名称
可访问名称是屏幕阅读器为元素读出的简短标签，例如按钮的“提交”或字段的“搜索”。
为什么它很重要
如果元素没有可访问名称，屏幕阅读器只会宣布其角色，例如“按钮”，用户就不知道它的用途。
浏览器会计算它
您很少需要直接设置名称。浏览器会根据您的标记运行名称计算算法，以决定每个元素应该叫什么。
它遵循固定顺序
该算法会按照固定的优先级顺序检查来源，并使用找到的第一个来源。了解这一顺序后，您就能预测结果。
aria-labelledby 优先级最高
优先级最高的是 aria-labelledby。如果存在它，就会覆盖其他所有来源，并收集它所指向元素中的文本。
<button aria-labelledby="t">x</button>
<span id="t">Close menu</span>接下来是 aria-label
如果没有 labelledby，浏览器会使用 aria-label，也就是您直接在元素上输入、作为朗读名称的字符串。
<button aria-label="Close">x</button>然后是原生命名方式
接下来是原生来源，例如与输入控件关联的 label，或图像的替代文本。只要可以，请优先使用这些方式。
<label for="email">Email</label>
<input id="email">然后是内容本身
对于许多元素，名称会回退为其文本内容。显示“保存”的按钮，其名称就是“保存”，不需要任何额外属性。
<button>Save</button>title 是最后的备选方案
优先级最低的来源是 title 属性。只有在没有更好来源时，它才会为元素命名，而且很容易被忽略。
名称会被整理
计算出的名称会被合并为一个字符串，并折叠多余的空白，因此换行和缩进不会传达给用户。
名称与描述
名称是元素的称呼；描述是在名称之后读出的额外细节。今天我们重点学习如何正确设置名称。
快速检查
某个元素同时具有 aria-label 和内部文本。哪一个会成为它的名称？
回顾：名称如何构成
您已经学会了名称计算顺序：先是 labelledby，然后是 aria-label，接着是原生标签和内容，最后是 title。🧩
常见问题解答
「无障碍名称计算揭秘」课时是免费的吗？
是的 — 「无障碍名称计算揭秘」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。
「无障碍名称计算揭秘」这节课中我会学到什么？
了解浏览器如何决定元素的名称。 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Accessibility Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「无障碍名称计算揭秘」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Accessibility Academy 课中编写并运行代码吗？
能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。