使用 aria-hidden 隐藏装饰性图标
将装饰元素排除在无障碍树之外。
使用 aria-hidden 隐藏装饰性图标 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。
有些图标什么也不表达
标签旁边的小装饰对屏幕阅读器用户没有任何帮助。朗读它只会增加他们必须应付的噪音。🔇
“装饰性”这个词
如果移除图标不会改变用户的理解，那么这个图标就是装饰性的。附近的文本已经承载了含义。
将其从无障碍树中隐藏
在装饰性图标上设置 aria-hidden="true"，将其从无障碍树中移除，让屏幕阅读器完全跳过它。
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>它也会隐藏子元素
在容器上设置一个 aria-hidden="true" 会隐藏该元素及其内部的所有内容，因此应标记容器，而不是每条路径。
对 img 使用空 alt 也能实现相同效果
如果装饰性图标是 <img>，请改为给它一个空的 alt。空 alt 会告诉屏幕阅读器跳过这张图片。
<img src="sparkle.png" alt="" />绝不要隐藏可见内容
黄金法则是：不要对视力正常的用户所依赖的任何内容设置 aria-hidden。否则，您会为部分用户抹去真实内容。
绝不要隐藏可聚焦元素
在可聚焦元素上设置 aria-hidden 会制造一个幽灵：键盘用户可以移到这个控件上，但屏幕阅读器却拒绝朗读它。
将其与 focusable false 配合使用
对于装饰性的内联 SVG，请同时添加 focusable="false" 和 aria-hidden，避免任何浏览器将它偷偷加入制表键顺序。
<svg aria-hidden="true" focusable="false">
<path d="..." />
</svg>重复图标属于装饰性内容
“删除”一词旁边的垃圾桶图标是重复的。请隐藏图标，让可见文本为所有用户传达含义。
留意孤立图标
请注意：没有附近文本的图标通常不是装饰性的。隐藏它会让控件变得无声且没有名称。
确认它已经消失
在无障碍检查器中，正确隐藏的图标会直接从树中消失。这个空缺正是您想要的结果。
快速检查
可见的“完成”一词旁边有一个对勾图标。您应该如何处理这个图标？
回顾：隐藏噪音
装饰性图标应设置 aria-hidden="true"（或使用空 alt）以及 focusable false，但绝不要将这些设置用于可聚焦元素或独特内容。噪音更少，页面更清晰。🎯
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「使用 aria-hidden 隐藏装饰性图标」课时是免费的吗？
是的 — 「使用 aria-hidden 隐藏装饰性图标」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。
「使用 aria-hidden 隐藏装饰性图标」这节课中我会学到什么？
将装饰元素排除在无障碍树之外。 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Accessibility Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「使用 aria-hidden 隐藏装饰性图标」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Accessibility Academy 课中编写并运行代码吗？
能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 内联 SVG：role img 与 title
- 使用 aria-hidden 隐藏装饰性图标
- 让图标按钮仍然拥有名称
- 图标字体及其无障碍隐患