我有一张SVG图片，我将在我的网站上像这样使用它
<img src="test.svg" alt="This is a test alt" />
我想问的是，在可访问性方面，是否可以使用带有IMG选择器和“alt”标签的.SVG文件？
在IMG标签中使用SVG是否可行？
3
- js-learner
6
什么是可访问性？ - Martin Meli
1根据文档，SVG是可用于图像源的有效类型。我不明白为什么会有问题。 - Mathyn
@MartinMeli 屏幕阅读器 - js-learner
1可访问SVG的官方规范在此处：https://www.w3.org/TR/SVG11/access.html#SVGAccessibilityGuidelines，相关文章请参见：https://webaim.org/blog/future-web-accessibility-svg/，W3C编辑草案请参见：https://www.w3.org/TR/SVG/access.html#SVGRelatedAccessibilityDocuments。 - Nathaniel Flick
嗨@NathanielFlick，如果您将您的评论添加为答案，我会接受它，因为它对我有帮助。 - js-learner
嗨，@js-learner，谢谢，我会做的！ - Nathaniel Flick
5个回答
4
无论使用什么格式（只要是有效的格式），重要的是您使用的标签（
而且，由于您有一个
为图形提供文本等效替代物。
当图形的文本内容（例如在“文本”元素中）解释了其功能时，不需要文本等效替代物。使用“title”子元素来解释“文本”元素的功能，如果从其文本内容无法清晰理解其含义。
当图形不包括解释性文本内容时，需要提供文本等效替代物。如果替代物很复杂，则使用“desc”元素；否则使用“title”子元素。
如果图形由有意义的部分构成，则从有意义的部分构建描述。
img）及其属性，在这种情况下，alt必须描述用户所看到的图像。而且，由于您有一个
svg格式，您还可以使用svg内联，只要您遵循W3C的可访问性指南。为图形提供文本等效替代物。
当图形的文本内容（例如在“文本”元素中）解释了其功能时，不需要文本等效替代物。使用“title”子元素来解释“文本”元素的功能，如果从其文本内容无法清晰理解其含义。
当图形不包括解释性文本内容时，需要提供文本等效替代物。如果替代物很复杂，则使用“desc”元素；否则使用“title”子元素。
如果图形由有意义的部分构成，则从有意义的部分构建描述。
- dippas
2
是的，在图像标签中使用的SVG可以通过alt进行访问。我也看到过使用aria-label，但这可能是不必要的。您还可以本地使用SVG（无需img标签），按照以下规范操作：
- 可访问SVG的官方规范在此处：
w3.org/TR/SVG11/access.html#SVGAccessibilityGuidelines - WebAim上关于SVG可访问性未来的文章在此处：
webaim.org/blog/future-web-accessibility-svg - 这里是W3C编辑草案（意味着尚未完成）：
w3.org/TR/SVG/access.html#SVGRelatedAccessibilityDocuments
- 可访问SVG的官方规范在此处：
w3.org/TR/SVG11/access.html#SVGAccessibilityGuidelines - WebAim上关于SVG可访问性未来的文章在此处：
webaim.org/blog/future-web-accessibility-svg - 这里是W3C编辑草案（意味着尚未完成）：
w3.org/TR/SVG/access.html#SVGRelatedAccessibilityDocuments
请确保使用SiteImprove Chrome Extension和您可以访问的任何屏幕阅读器（JAWS、NVDA或VoiceOver）进行测试。如果svg被正确读取，则有可能通过可访问性测试。
- Nathaniel Flick
2
1那篇webAIM的文章很有趣，尽管它相当古老！我使用SVG和JS创建交互式可访问图形，您可以为单个SVG子元素添加
tabindex属性，例如<g id="test" tabindex=0 aria-label="hullo world">...</g> - 大多数aria也是可用的。它在各种浏览器中运行得非常好，除了IE。但是，即使需要，在使用xlink的情况下，甚至IE也可以正常工作。 - brennanyoung1另一个检查无障碍性的优秀扩展是 https://www.deque.com/axe - Seno
1
你的例子很好，屏幕阅读器可以使用alt属性描述图片
- Martin Meli
0
是的。它就是这样！但首先，我认为我们需要清楚地了解图像实际上是什么。图像是某物的图形/视觉表示。它可以是数字或艺术品。现在有许多种显示图像的方式。但是当涉及到格式（JPG、PNG、GIF或SVG）时，它是图像如何被处理和存储以及许多其他功能的方法。一旦一个图像被显示出来，对普通用户来说，唯一重要的事情就是内容。 "alt" 是一个可访问性属性，用于描述图像的内容。因此，在图像格式方面与 "alt" 属性应该没有关系。
- shahria jaman khan
0
我无论用什么方法，都不能在REACT中使用img标签。而作为一个对象，它会破坏样式。我想出的解决方案是创建一个返回svg html的新TSX文件。这样，我可以在任何需要的地方调用它。就像这样:
然后在您的组件中像这样使用它。就是这样：
- Eduard
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接