button 元素仅用 SVG 图标时如何添加可访问名称
仅用 SVG 图标作为按钮时，必须在 button 标签内添加描述性文本，以便屏幕阅读器正确识别按钮功能。
仅用 SVG 图标时屏幕阅读器无法识别按钮功能
屏幕阅读器在解析文档时，会生成可访问树来辅助技术导航。如果 button 元素内部只包含 SVG 图标而没有文本内容，可访问树中该按钮将没有可访问名称。这会导致屏幕阅读器用户无法获知按钮的具体用途，只能听到“按钮”或“图标”等通用词汇，严重降低操作体验。
可访问名称是辅助技术理解元素语义的关键信息。根据可访问性规范，按钮必须提供描述其功能的名称。当 button 元素仅包含 SVG 时，浏览器无法自动推断出该按钮是用于“收藏”、“删除”还是“提交”。因此，仅用 SVG 图标而不添加文本，会导致按钮在可访问性层面失效。
在 button 标签内添加文本描述按钮功能
解决这一问题的标准做法是在 button 标签内直接嵌入描述性文本。例如，可以在 SVG 之前或之后添加“收藏”或“删除”等文字。这样，按钮的可访问名称就会自动包含这段文本，屏幕阅读器在朗读时就能准确告知用户该按钮的作用。
除了直接添加文本，还可以将文本放置在 SVG 内部。例如，将文本放在 SVG 的 title 元素中，或者作为 SVG 的子元素。只要文本在 button 标签内且对用户可见，屏幕阅读器就能将其识别为按钮的可访问名称。这种方式既保留了视觉上的图标设计，又确保了可访问性。
使用 CSS 隐藏文本但保留可访问名称
如果希望按钮在视觉上只显示图标，可以通过 CSS 将文本隐藏。例如，使用 `position: absolute; width: 1px; height: 1px; overflow: hidden;` 等属性将文本移出可视区域。重要的是，这种方式只是隐藏了文本的视觉显示，并没有移除文本本身，因此屏幕阅读器仍然可以读取到它。
需要注意的是，完全隐藏文本可能会影响部分用户的理解。对于不熟悉图标含义或文化背景不同的用户，保留文本可见性通常更有帮助。因此，在追求视觉简洁的同时，应权衡可访问性需求，确保用户能够通过多种方式理解按钮的功能。
验证按钮可访问名称是否生效
验证按钮是否具有正确的可访问名称，可以使用浏览器的开发者工具。在开发者工具的“可访问性”面板中，选中该按钮元素，查看其“名称”属性。如果名称属性显示为“收藏”或“删除”等描述性文本，说明可访问名称设置成功。
另一种验证方法是使用屏幕阅读器进行实际测试。在页面加载后，使用键盘 Tab 键聚焦到该按钮，然后按下 Enter 键或空格键。屏幕阅读器应该朗读出按钮的可访问名称，而不是通用的“按钮”或“图标”。如果朗读内容不正确，说明可访问名称配置存在问题，需要进一步检查代码。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。