明确说明用途的按钮
为无法看见按钮的用户清晰标注操作
明确说明用途的按钮 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。
按钮需要名称
只有当用户知道按钮的作用时，它才有用。无障碍名称就是屏幕阅读器在用户按下按钮前朗读的内容。
文本成为名称
对于普通按钮，其中的可见文本就是无障碍名称。清晰的文字会带来清晰的朗读提示。
<button>Save changes</button>说明操作
请使用按钮所执行的操作为按钮命名，例如“保存”、“删除”或“加入购物车”。动词可以准确告诉用户将发生什么。
避免含糊的标签
当多个按钮都使用这些标签时，“OK”、“提交”或“前往”等标签过于含糊。请说明具体的操作，让每个按钮都能独立表达含义。
仅含图标的问题
没有文本的图标按钮没有无障碍名称。屏幕阅读器可能只会说“按钮”，让用户猜测它的作用。🤔
<button><svg>...</svg></button>为图标按钮命名
使用 aria-label 为没有文字的按钮提供名称。这样图标仍然会显示，但辅助技术会宣布它的作用。
<button aria-label="Close dialog"><svg>...</svg></button>隐藏装饰性图标
当标签已经说明操作时，请将内部图标标记为 aria-hidden，避免它被当作多余内容朗读。
<svg aria-hidden="true">...</svg>宣布状态变化
切换按钮应报告自身状态。请使用 aria-pressed，让屏幕阅读器说明它是开启还是关闭。
<button aria-pressed="true">Mute</button>展开内容
显示或隐藏面板的按钮应带有 aria-expanded，让用户听到面板是打开还是折叠状态。
<button aria-expanded="false">Details</button>保持标签简短且诚实
好的标签应当简短而准确。它应明确承诺按下按钮后会发生什么，不应让用户在点击后感到意外。
让可见名称与无障碍名称一致
如果按钮包含可见文本，请将这些文字保留在其无障碍名称中，这样语音控制用户就能说出自己看到的标签。
快速检查
仅含图标的关闭按钮只显示一个 X。如何为它提供无障碍名称？
回顾
请根据操作为每个按钮命名，为仅含图标的按钮添加标签，并通过 aria 属性公开状态。这样用户始终知道按钮的作用。👍
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「明确说明用途的按钮」课时是免费的吗？
是的 — 「明确说明用途的按钮」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。
「明确说明用途的按钮」这节课中我会学到什么？
为无法看见按钮的用户清晰标注操作 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Accessibility Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「明确说明用途的按钮」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Accessibility Academy 课中编写并运行代码吗？
能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。