首先要考虑的是：您真的需要吗？ 如果可以，在图标旁边添加文字已被反复证明是用户体验 (UX) 最佳的可访问性和清晰度方案（参见 Apple 的 最新失误）。但是，如果您确实需要（我明白，有时确实需要），Sara Soueidan 和 Scott O’Hara 撰写了一系列文章，很好地阐述了所有选项，并提供了有关此主题的实际研究。
- Sara Soueidan：可访问的图标按钮
- Scott O’Hara：上下文标记可访问的图像和 SVG
如果您只想得到直接的答案，我建议您在按钮中使用一些文本。
<button aria-expanded="false" id="menu-trigger">
<svg viewBox="0 0 32 32" width="32px" height="32px"
aria-hidden="true" focusable="false">
<!-- svg content -->
</svg>
Menu
</button>Sara 说没有万能的方法，但似乎您确实需要在按钮内部使用实际的文本，并以某种方式隐藏或覆盖它。仅使用 SVG 无法为按钮或链接提供可靠的可访问名称。
有趣的是，要正确处理这种模式已经 很长时间了。
我相信在
button元素上包含一个aria-label是一个可行的方案，既能保持美观又能保证可访问性。不过，我仍然认为应该始终包含文本以尽可能减少用户的认知负担。我同意，我认为最好在按钮中包含一些描述性文本。您可以始终将文本包装在一个 span 标签中，然后使用仅屏幕阅读器类将其视觉隐藏。这样，如果网站加载 CSS 失败或用户只想查看没有 CSS 或 JavaScript 的纯 HTML，浏览器仍会在按钮中显示文本。
按钮上的 title 属性怎么样？
这难道不是它的完美用例吗？如果用户不熟悉图标，它会提供一个“工具提示”，并为屏幕阅读器提供有意义的标题。
关于：标题/工具提示不被认为是可访问的
https://www.w3.org/TR/html/dom.html#the-title-attribute
https://mdn.org.cn/en-US/docs/Web/HTML/Global_attributes/title
并且不应该依赖于此。话虽如此，通过一些搜索，有一些解决方法可以使工具提示可访问
https://inclusive-components.design/tooltips-toggletips/（您的里程可能会有所不同）但我的想法与仅 PDF 相同，仅在必要时使用（而不是仅仅因为）。
是的，如果您依赖工具提示。但在 Sara Soueidan 提供的示例中，根本没有工具提示。
我想说的是，为什么 title 属性甚至不被认为是为屏幕阅读器提供有意义标签的一种方式？
title 属性并非对所有人都是完美的解决方案，但它可以帮助使用指向设备的视力正常的用户。键盘用户需要一些额外的 :focus 样式，只有触摸用户会被排除在外，需要 JavaScript 解决方案。
但就渐进增强而言，我认为 title 属性是最佳选择。我唯一的问题是，为什么没有测试 title 属性？屏幕阅读器是否忽略 title 属性（因为 SEO 优先于用户）？
您在关于外部文章的评论中单独指出了 Apple，但公平地说，Google 在 Apple 加入之前很久就在其网络服务中推动了这一趋势的开始。