Inline SVG lt;titlegt; lt;descgt; correct usage for accessilibility(内联 SVG lt;标题gt;lt;描述gt;可访问性的正确用法)
本文介绍了内联 SVG <标题><描述>可访问性的正确用法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的 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>?
推荐答案
想想</code>就像<code>alt</code>，想想<code><description></code> 喜欢 <code><figcaption></code><em class="showen"></em></p>
<p class="en">Think of <code><title></code> like <code>alt</code>, think of <code><description></code> like <code><figcaption></code></p>
<p class="cn">您的 <code><title></code> 应充分描述图像，以便用户了解图像包含的内容.<em class="showen"></em></p>
<p class="en">Your <code><title></code> should describe the image sufficiently to provide a user with an understanding of what the image contains.</p>
<p class="cn">如果它是一个复杂的图像，或者图像在需要更多细节的文章中起着至关重要的作用，则使用 <code><description></code>.<em class="showen"></em></p>
<p class="en">If it is a complex image, or the image plays a vital role in an article that necessitates more details then use <code><description></code>.</p>
<p class="cn">Deque 对不同的方法做了很好的测试，发现你的第二个版本是最可靠的，其中 <code>title</code> 和 <code>description</code> 通过 <code>aria-labelledby</code> 和 ID 链接，<strong>所以使用它</strong>.<em class="showen"></em></p>
<p class="en">Deque did a great test of different methods and found that your second version was the most reliable with a <code>title</code> and <code>description</code> linked via <code>aria-labelledby</code> and IDs, <strong>so use that</strong>.</p>
<p class="cn">是的，谷歌仍然会将它们引用为没有 <code>xmlns</code> 内联提供的图像(前提是您将页面作为 mime 类型 <code>text/html</code> 提供，否则您将遇到渲染问题).对于外部图像，我会保留它，这是一个很小的优化，不值得.<em class="showen"></em></p>
<p class="en">Yes google will still reference them as images without <code>xmlns</code> served inline (provided you serve your page as mime type <code>text/html</code> otherwise you will get rendering issues). For external images I would leave it in, it is such a minor optimisation it isn't worth it.</p>
<p class="cn">据我所知，内嵌 SVG 在 Google 图像搜索中没有被编入索引(但它们的内容仍然有助于您在 Google 搜索算法中的 SEO，因此仍然值得拥有 <code><description></code>在适当的地方.)<em class="showen"></em></p>
<p class="en">Inline SVGs do not get indexed as far as I am aware in Google Image Search (but their content still contributes to your SEO in Google Search Algorithms slightly so it is still worth having <code><description></code> where appropriate.)</p>
<p class="cn">如果内联，SVG 将始终呈现(假设浏览器支持 SVG，这很有可能).<em class="showen"></em></p>
<p class="en">SVGs will always render if inline (assuming the browser supports SVG which is very likely). </p>
<p class="cn">是的，如果图像足够复杂以至于您无法用 <code><title></code> 在 20 个字或更少的字数内描述它，则包括 <code><desc></code>(一般规则).<em class="showen"></em></p>
<p class="en">Yes include <code><desc></code> if the image is sufficiently complex that you can't describe it with <code><title></code> in 20 words or less (general rule).</p>
<p class="cn"><strong>最后的想法</strong> - <code>alt</code> 标签、<code>titles</code> 等都是关于可访问性的，不要担心它们的 SEO 关键字，因为你会最终损害可用性.我知道你没有提到，但为了清楚起见，我想我会把它放在这里.<em class="showen"></em></p>
<p class="en"><strong>final thought</strong> - <code>alt</code> tags, <code>titles</code> etc. are all about accessibility, don't worry about them for SEO keywords as you will end up damaging usability. I know you didn't mention that but I thought I would put it in here for clarity.</p>
<p class="cn"><strong>p.s.</strong> - 下一次，可能一次限制为 1 或 2 个问题，因为要回答的问题很多！<em class="showen"></em></p>
<p class="en"><strong>p.s.</strong> - Next time, maybe limit this to 1 or 2 questions at once as that was a lot to answer!</p>
<p>这篇关于内联 SVG <标题><描述>可访问性的正确用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！</p></description>
