内联SVG< title>< desc>正确使用可访问性 [英] 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标记以进行优化，Google图片搜索是否仍将这些嵌入式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>?
推荐答案
像 alt 这样思考< title> ，想想< description> ，例如< figcaption>
Think of <title> like alt, think of <description> like <figcaption>
您的< title> 应该充分描述图像，以使用户了解图像包含的内容.
Your <title> should describe the image sufficiently to provide a user with an understanding of what the image contains.
如果图像很复杂，或者图像在需要更多详细信息的文章中起着至关重要的作用，请使用< description> .
If it is a complex image, or the image plays a vital role in an article that necessitates more details then use <description>.
Deque对不同方法进行了很好的测试，发现您的第二个方法版本是最可靠的，通过 aria-labelledby 和ID链接的 title 和 description ，请使用.
Deque did a great test of different methods and found that your second version was the most reliable with a title and description linked via aria-labelledby and IDs, so use that.
是的，google仍将它们作为没有内联提供 xmlns 的图像来引用(前提是您将页面作为mime类型的 text/html 服务，否则会出现渲染问题).对于外部图像，我将其保留，这是一个很小的优化，这是不值得的.
Yes google will still reference them as images without xmlns served inline (provided you serve your page as mime type text/html 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.
就我所知，内联SVG在Google图像搜索中并未得到索引(但它们的内容仍会在Google搜索算法中对您的SEO有所贡献，因此仍然值得< description> 适当的地方.)
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 <description> where appropriate.)
如果是内联的，SVG始终会呈现(假设浏览器支持SVG 很有可能).
SVGs will always render if inline (assuming the browser supports SVG which is very likely).
如果图像足够复杂以至于您无法用20个或更少的单词用< title> 来描述它(一般规则)，则包括< desc>
Yes include <desc> if the image is sufficiently complex that you can't describe it with <title> in 20 words or less (general rule).
最终思路- alt 标签，标题等都是关于可访问性的，不必担心它们会成为SEO关键字最终会破坏可用性.我知道您没有提到它，但我想为了清楚起见将其放在此处.
final thought - alt tags, titles 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.s.-下次，也许一次将这个问题限制为1或2个问题，因为答案很多！
p.s. - Next time, maybe limit this to 1 or 2 questions at once as that was a lot to answer!
这篇关于内联SVG< title>< desc>正确使用可访问性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
