【问题标题】: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 是否可以/对可访问性有好处?

【问题讨论】:

标签: html image svg accessibility


【解决方案1】:

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

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

为图形提供文本等价物。

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

【讨论】:

    【解决方案2】:

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

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

    【讨论】:

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

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

    【讨论】:

      【解决方案4】:

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

      【讨论】:

        猜你喜欢
        • 2019-05-27
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多