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

如何解决是否可以在 IMG 标签中使用 SVG？

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

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

我的问题是，将 .SVG 与 IMG 选择器和“alt”标签一起使用是否可以/适合可访问性？

解决方法

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

而且由于您使用的是 svg 格式，因此您也可以使用 svg 内联，只要您遵循 accessibility guidelines from W3C.

为图形提供等效的文本。

• 当图形的文本内容（例如，在“文本”元素中）说明其功能时，不需要等效文本。使用“标题” 子元素来解释“文本”元素的功能，其含义 从他们的文字内容看不清楚。
• 当图形不包含解释性文本内容时，它需要等效的文本。如果等价物很复杂，请使用 ‘desc’ 元素，否则使用 ‘title’ 子元素。
• 如果图形是由有意义的部分构建的，则从有意义的部分构建描述。

,

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

,

是的，可以使用 alt 访问图像标签中的 SVG。我还看到使用了 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 被正确读取，那么它很可能通过了辅助功能。

,

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