是否可以在 IMG 标签中使用 SVG？答案

【问题标题】：Is it accessible to use SVG in IMG tag?是否可以在 IMG 标签中使用 SVG？
【发布时间】：2021-09-03 01:42:51
【问题描述】：

我有一个 SVG 图像，我将像这样在我的网站上使用它

<img src="test.svg" alt="This is a test alt" />

我的问题是，使用带有 IMG 选择器和“alt”标签的 .SVG 是否可以/对可访问性有好处？

【问题讨论】：

无障碍是什么意思？
根据documentation SVG 是用于图像源的有效类型。不明白为什么会有问题。
@MartinMeli 屏幕阅读器
这里是可访问 svgs 的官方规范：w3.org/TR/SVG11/access.html#SVGAccessibilityGuidelines，这里是一篇文章：webaim.org/blog/future-web-accessibility-svg，这里是 W3C 编辑草案：w3.org/TR/SVG/access.html#SVGRelatedAccessibilityDocuments
嗨@NathanielFlick，如果您将评论添加为答案，我会接受，因为它对我有帮助

标签： html image svg accessibility

【解决方案1】：

格式无关紧要（只要是valid），您使用的标签（img）和它的属性在这种情况下是alt，它必须是描述性的用户看到的图片

而且因为你有一个svg 格式，你也可以使用svg 内联，只要你遵循accessibility guidelines from W3C.

为图形提供文本等价物。

当图形的文本内容（例如，在“文本”元素中）解释其功能时，不需要文本等效项。使用“标题” 子元素解释“文本”元素的功能，其含义从他们的文字内容看不清楚。

当图形不包含说明性文本内容时，它需要等效文本。如果等价物很复杂，请使用 ‘desc’ 元素，否则使用 ‘title’ 子元素。

如果图形是从有意义的部分构建的，则从有意义的部分构建描述。

【讨论】：

【解决方案2】：

是的，图像标签中的 SVG 可以通过 alt 访问。我还看到使用了 aria-label 但这可能不是必需的。您也可以按照以下规范本地使用 SVG（不带 img 标签）：

此处提供可访问 svg 的官方规范：
w3.org/TR/SVG11/access.html#SVGAccessibilityGuidelines
还有一篇关于 WebAim for the Future of SVG 可访问性的文章：webaim.org/blog/future-web-accessibility-svg
这里是 W3C 编辑草稿（意味着它尚未完成）：w3.org/TR/SVG/access.html#SVGRelatedAccessibilityDocuments

确保使用 SiteImprove Chrome Extension 以及您可以访问的任何屏幕阅读器（JAWS、NVDA 或 VoiceOver）进行测试。如果 svg 被正确读取，那么它很可能通过了辅助功能。

【讨论】：

那篇 webAIM 文章很有趣，虽然很老了！我使用 SVG 和 JS 创建交互式可访问图形，您可以将 tabindex 属性添加到单个 SVG 子元素，例如<g id="test" tabindex=0 aria-label="hullo world">...</g> - 大多数咏叹调也可用。它在除 IE 之外的浏览器中运行良好。但是，如果需要，即使 IE 也可以使用 xlink
另一个检查可访问性的优秀扩展是deque.com/axe

【解决方案3】：

你的例子很好，屏幕阅读器可以使用 alt 属性来描述图像

【讨论】：

【解决方案4】：

是的。它是！但首先我认为我们需要清楚地了解图像的真正含义。图像是事物的图形/视觉表示。它可能是一个人物或艺术。现在有很多方法可以显示图像。但是当涉及到格式（JPG、PNG、GIF 或 SVG）时，它是图像处理 + 存储和许多其他功能的方法。显示图像后，对普通用户来说唯一重要的是内容。 “alt”是一个可访问性属性，它描述了图像的内容。所以“alt”属性与图片的格式应该没有关系。

【讨论】：