内联 SVG <标题><描述>可访问性的正确用法 [英] Inline SVG <title> <desc> correct usage for accessilibility

问题描述

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

I am using a lot of inline svgs in my html and am a little confused about the best way to present them concerning accessibility.

我看到了两种将 <title> 和 <desc> 添加到 svgs 的方法 -

I've see two methods to add <title> and <desc> to 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"时还有什么需要考虑的吗?

The first method seems the best as I don't have to give unique IDs to each title and description (I have multiple svgs per page)? Is that the case? Is there anything else to take into consideration when choosing "aria-label" or "aria-labelledby"?

另外，我对这个角色还有点困惑 <desc > 播放 - 它与 alt 完全相同吗?我总是从内联 svgs 中删除 xmlns 和 xmlns:xlink 标签以进行优化，谷歌图像搜索是否仍会将这些内联 svgs 引用为图像?<desc> 会帮忙吗?

Also I am still confused a little about the role < desc > plays - is it exactly the same as alt? I always remove the xmlns and xmlns:xlink tags from inline svgs for optimisation, will google image search still reference these inline svgs as images? Will <desc> help with that?

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

If the inline svg will always display (do inline svgs ever not render?) then the <desc> will never be useful for missing images, which then only leaves page readers for accessibility which could use it. Do they?

基本上值得使用/包含<desc>吗?

Basically is it worth using/including <desc>?

推荐答案

想想