:按钮元素

¥Icon buttons

仅显示图标的按钮没有 accessible name。可访问的名称为辅助技术（例如屏幕阅读器）提供了在解析文档并生成 可访问性树 时访问的信息。然后，辅助技术使用辅助功能树来导航和操作页面内容。

¥Buttons that only display an icon do not have an accessible name. Accessible names provide information for assistive technology, such as screen readers, to access when they parse the document and generate an accessibility tree. Assistive technology then uses the accessibility tree to navigate and manipulate page content.

要为图标按钮指定一个易于访问的名称，请将文本放入 元素中，以简明地描述按钮的功能。

¥To give an icon button an accessible name, put text in the

element that concisely describes the button's functionality.

示例

¥Examples

html

Add to favorites

结果

¥Result

如果你想在视觉上隐藏按钮的文本，一种可行的方法是使用 CSS 属性的组合 将其从屏幕上视觉上删除，但保持其可通过辅助技术进行解析。

¥If you want to visually hide the button's text, an accessible way to do so is to use a combination of CSS properties to remove it visually from the screen, but keep it parsable by assistive technology.

但是，值得注意的是，让按钮文本可见可以帮助那些可能不熟悉图标含义或不理解按钮用途的人。这对于那些技术不够精通或对按钮使用的图标有不同文化解释的人来说尤其重要。

¥However, it is worth noting that leaving the button text visible can help people who may not be familiar with the icon's meaning or understand the button's purpose. This is especially important for people who are not technologically sophisticated or who may have different cultural interpretations of the icon the button uses.

什么是可访问的名称？| 帕切洛集团

MDN 了解 WCAG，指南 4.1 解释

了解成功标准 4.1.2 | W3C 了解 WCAG 2.0