仅用图标作为按钮时如何提供可访问名称

纯图标按钮的可访问性问题

当按钮元素内只包含一个图标而没有其他文本时，屏幕阅读器无法读取按钮的功能描述，导致无法访问。可访问名称是辅助技术解析文档并生成可访问树所需的信息。如果没有名称，用户无法知道按钮的作用。为了解决这个问题，需要在按钮内添加简短且描述功能的文本。

例如，一个仅包含心形 SVG 图标的按钮，如果没有文本，屏幕阅读器只会读出图标，而不会告诉用户这是“收藏”功能。通过在 SVG 标签后添加“Add to favorites”文本，屏幕阅读器就能正确识别按钮的功能。

最直接的方法是将文本放在按钮元素内部，紧随图标之后。文本应简洁地描述按钮的功能，确保用户能快速理解。这种方法简单有效，能确保所有用户都能看到并听到按钮的用途。例如，将文本放在 SVG 标签之后，确保文本与图标在视觉上相邻。

需要注意的是，虽然这种方法能提供可访问名称，但可能会影响页面的视觉设计。如果希望保持页面整洁，可以使用 CSS 技术来隐藏文本，同时保持其可解析性。这需要结合特定的 CSS 属性来实现。例如，使用绝对定位将文本移出可视区域，同时保持其在文档流中的位置。

如果希望视觉上隐藏按钮文本，可以使用 CSS 属性的组合来实现。一种常见的方法是使用绝对定位将文本移出屏幕，同时保持其在文档流中的位置。这种方法确保文本仍然存在于文档中，可以被屏幕阅读器读取。例如，将文本的 left 属性设置为负值，使其完全移出可视区域。

然而，仅仅隐藏文本可能会影响用户体验。对于不熟悉图标含义或文化背景的用户，可见的文本能提供更清晰的帮助。因此，在决定是否隐藏文本时，需要权衡可访问性与用户体验。如果图标含义明确且用户群体熟悉，可以适当隐藏文本；否则，建议保留文本可见。

要验证按钮的可访问性，可以使用浏览器的开发者工具或辅助技术进行测试。首先，使用屏幕阅读器聚焦到按钮，检查是否读出了描述性文本。如果文本被隐藏，确保屏幕阅读器仍然能读取到文本内容。例如，在 Chrome 开发者工具中，检查按钮的“可访问名称”属性是否包含描述性文本。

此外，还可以使用键盘导航测试按钮的可访问性。确保用户可以通过 Tab 键聚焦到按钮，并使用 Enter 键激活按钮。如果按钮没有可访问名称，屏幕阅读器可能会跳过该按钮或读出无意义的标签。通过这些步骤，可以确认按钮是否提供了正确的可访问名称。