html - 内联 SVG <title> 可访问性的正确用法

Question

我在我的 html 中使用了很多内联 svg，并且对于在可访问性方面呈现它们的最佳方式有点困惑。

我见过两种添加 <title> 的方法和 <desc>到 svgs -

<svg role="img" aria-label="[title + description]">
 <title>title text here</title>
 <desc>a description of the image here</desc>
 <path> etc.
</svg>

<svg role="img" aria-labelledby="my_svg_title my_svg_description">
 <title id="my_svg_title">title text here</title>
 <desc id="my_svg_description">a description of the image here</desc>
 <path> etc.
</svg>

第一种方法似乎是最好的，因为我不必为每个标题和描述提供唯一的 ID(我每页有多个 svg)？是这样吗？选择“aria-label”或“aria-labelledby”时还有什么需要考虑的吗？

此外，我仍然对 扮演的角色感到困惑 - 它与 alt 完全一样吗？我总是从内联 svgs 中删除 xmlns 和 xmlns:xlink 标签以进行优化，谷歌图像搜索是否仍会将这些内联 svgs 引用为图像？威尔 <desc>帮忙吗？

如果内联 svg 将始终显示(内联 svg 永远不会呈现吗？)那么 <desc>永远不会对丢失的图像有用，这只会让页面阅读器可以使用它的可访问性。是吗？

基本上值得使用/包括 <desc> ？

Answer 1

想到<title>喜欢alt , 想到 <description>喜欢<figcaption>

您的<title>应该充分描述图片，让用户了解图片包含的内容。

如果它是一个复杂的图像，或者图像在需要更多细节的文章中起着至关重要的作用，那么使用 <description> .

Deque did a great test of different methods并发现您的第二个版本是最可靠的 title和 description通过 aria-labelledby 链接和 ID，所以使用它。

是的，谷歌仍会将它们引用为没有 xmlns 的图像内联服务(前提是您将页面作为 mime 类型 text/html 提供，否则您将遇到呈现问题)。对于外部图像，我会保留它，这是一个很小的优化，不值得。

据我所知，内联 SVG 在 Google 图像搜索中没有被编入索引(但它们的内容仍然对您在 Google 搜索算法中的 SEO 略有贡献，因此仍然值得在适当的地方使用 <description>。)

如果内联，SVG 将始终呈现(很可能是 assuming the browser supports SVG)。

是包括<desc>如果图像足够复杂以至于您无法用 <title> 来描述它不超过 20 个字(一般规则)。

最后的想法 - alt标签，titles等等都是关于可访问性的，不要担心它们的 SEO 关键字，因为你最终会损害可用性。我知道您没有提到这一点，但为了清楚起见，我想我会把它放在这里。

p.s. - 下一次，可能一次限制为 1 或 2 个问题，因为要回答的问题太多了!