“SVG 图标最易访问的 HTML 是什么？”这个问题没有一刀切的答案，因为图标在网站上的作用各不相同。我个人比较喜欢 Heather Migliorisi 的研究，它涵盖了所有这些内容，但我可以快速总结一下：如果图标是装饰性的，则将其隐藏；如果图标是独立的，则为其添加标题；如果图标是链接，则让链接发挥作用。以下是这三种可能性
图标是装饰性的
也就是说，图标只是在那里看起来很漂亮，但如果它完全消失了也没关系。如果是这种情况
<svg aria-hidden="true" ... ></svg>无需宣布图标，因为它旁边的标签已经完成了这项工作。因此，我们不读取它，而是将其从屏幕阅读器中隐藏。这样，标签就可以发挥其应有的作用，而 SVG 不会妨碍它。
图标是独立的
这里的意思是，图标没有伴随可见的文本标签，并且本身就是一个有意义的操作触发器。这是一个棘手的问题。随着时间的推移，它变得越来越好，对于现代浏览器来说，您只需要
<svg role="img"><title>Good Label</title> ... </svg>. 这适用于 <button> 内部的 SVG，或者如果 SVG 本身扮演“按钮”的角色。
图标被链接包裹
……并且链接是有意义的操作。重要的是链接具有良好的文本。如果链接具有可见文本，则图标是装饰性的。如果 SVG 是链接，它被包装在 <a> 中（而不是内部 SVG 链接），那么，为其提供一个可访问的标签，例如
<a href="/" aria-label="Good Label"><svg aria-hidden="true" ... ></svg></a>……或者，在链接和隐藏的 SVG 中添加一个 <span class="screen-reader-only"> 文本。
不确定是否有人最近进行了测试，但在内联 SVG 中使用
<title>元素会干扰 Facebook 的爬虫获取链接预览。这意味着，当您分享链接时，爬虫会查找页面上的所有<title>元素，并将它们拼接在一起作为其链接预览卡片的标题。因此，您最终可能会得到一个预览卡片标题，例如“Acme 网站 搜索我们的网站 Facebook Twitter YouTube …”，“Acme 网站”是<head>中<title>中网页的实际标题，但“搜索我们的网站 Facebook Twitter YouTube …”来自任何 SVG 中的<title>元素。根据我（有限的）阅读的 HTML 可访问性内容，我认为
aria-label和aria-labeledby属性只应该在没有与相关元素关联的现有标签文本时使用。我认为像<a href="…" title="有意义的标题"><svg … /></a>和<button title="有意义的标题"><svg … /></button>这样的模式对于那些仅包含图标的可点击元素来说已经足够了……？不建议使用 SVG
<title>。除了 Justin 提到的问题（我个人之前并不知道）之外，在我的 文章 中，我还链接了我朋友 Scott O’hara 的一篇文章，他在文章中详细介绍了不同标签技术的屏幕阅读器支持情况。在按钮内部的 SVG 上不建议使用<title>，而是使用我在文章中概述的其他技术之一。我还有另一篇与此主题相关的文章正在创作中。（附言：感谢您链接到我的文章！注意：我姓名上的链接链接到 Heather 的文章，而不是我的文章。）
以下两种方式之间是否存在任何差异？
和
为什么在这种情况下不使用
<title>？??
理论上它们是相同的，请参阅 https://html5accessibility.com/stuff/2020/11/07/not-so-short-note-on-aria-label-usage-big-table-edition/，但是……
……第二种形式在 VoiceOver 中更冗长，因为带有 aria-label 的 SVG 会作为一个组进行宣布，因此建议在链接上使用 aria-label。
如何在不使用 CSS 的情况下在输入框内使用 svg 图标？