网页中仅用 SVG 图标时如何添加可访问名称

仅用 SVG 图标为何导致可访问名称缺失

屏幕阅读器依赖可访问名称来理解按钮的功能。如果 button 元素内只包含一个 SVG 图标，浏览器无法提取到任何描述性文本，导致辅助技术无法朗读按钮的作用。这会使依赖屏幕阅读器的用户无法获知按钮的具体用途。

可访问名称是辅助技术生成可访问树的关键信息。当 button 元素内容仅为图形时，可访问树中该按钮的名称字段为空。这意味着用户在浏览网页时，无法通过语音听到按钮的功能描述，从而无法正确操作页面。必须通过添加文本内容来解决这个问题。

要在 button 元素内添加可访问名称，最直接的方法是将描述按钮功能的文本直接放在 button 标签内部。文本应简明扼要地说明按钮的作用，例如“收藏”或“删除”。这样屏幕阅读器在解析文档时，就能将这段文本作为按钮的可访问名称。

文本应紧邻 SVG 图标或位于其后。例如，可以在 SVG 标签后添加文本节点。这种结构确保了文本与图标在视觉上相关联，同时在可访问树中，文本被正确识别为按钮的名称。这满足了辅助技术对可访问名称的要求，确保用户能准确理解按钮功能。

可以使用浏览器的开发者工具检查元素的可访问树。在 Chrome 或 Edge 中，右键点击按钮并选择“检查”，然后在开发者工具中切换到“Accessibility”面板。查看“Accessible Name”字段，如果显示为空，则说明按钮没有可访问名称；如果显示了描述性文本，则说明设置成功。

另一种验证方法是使用屏幕阅读器进行实际测试。在 Windows 上使用 NVDA 或 JAWS，在 Mac 上使用 VoiceOver，朗读页面并导航到该按钮。如果屏幕阅读器正确读出了按钮的描述性文本，而不是仅仅读出“按钮”或“图标”，则说明可访问名称已正确添加并生效。

如果希望按钮在视觉上只显示图标而隐藏文本，可以使用 CSS 来实现。例如，使用 `position: absolute; left: -9999px;` 将文本移出屏幕可视区域。这种方法可以保持文本在 DOM 结构中，从而被屏幕阅读器读取，同时不影响页面的视觉布局。

需要注意的是，完全隐藏文本可能会影响部分用户的理解。对于不熟悉图标含义或文化背景的用户，可见的文本标签能提供更直观的帮助。因此，除非有特殊的设计需求，建议保持按钮文本的可见性，或者提供清晰的图标提示，以确保所有用户都能理解按钮的功能。