本文介绍了内联 SVG <title><描述>可访问性的正确用法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的 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.
我看到了两种将 </code> 和 <code><desc></code> 添加到 svgs 的方法 -<em class="showen"></em></p>
<p class="en">I've see two methods to add <code><title></code> and <code><desc></code> to svgs -</p>
<pre><code><code><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>
</code></code></pre>
<p class="cn">第一种方法似乎是最好的，因为我不必为每个标题和描述提供唯一的 ID(我每页有多个 svg)?是这样吗?选择aria-label"或aria-labelledby"时还有什么需要考虑的吗?<em class="showen"></em></p>
<p class="en">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"?</p>
<p class="cn">另外我对这个角色仍然有点困惑 <desc > 播放 - 和 alt 完全一样吗?我总是从内联 svgs 中删除 xmlns 和 xmlns:xlink 标签以进行优化，谷歌图像搜索是否仍将这些内联 svgs 引用为图像?<code><desc></code> 会对此有帮助吗?<em class="showen"></em></p>
<p class="en">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 <code><desc></code> help with that?</p>
<p class="cn">如果内联 svg 将始终显示(内联 svg 是否永远不呈现?)那么 <code><desc></code> 将永远不会用于丢失图像，这只会让页面阅读器可以访问用它.是吗?<em class="showen"></em></p>
<p class="en">If the inline svg will always display (do inline svgs ever not render?) then the <code><desc></code> will never be useful for missing images, which then only leaves page readers for accessibility which could use it. Do they?</p>
<p class="cn">基本上值得使用/包括<code><desc></code>吗?<em class="showen"></em></p>
<p class="en">Basically is it worth using/including <code><desc></code>?</p>
<h3 class="best_ans mt-1">推荐答案</h3>
<p class="cn">把<code><title></code>想成<code>alt</code>，想到<code><description></code> 就像 <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"><a href="https://www.deque.com/blog/creating-accessible-svgs/" rel="noreferrer">Deque 对不同的方法进行了很好的测试</a> 并发现您的第二个版本是最可靠的，<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 将始终呈现(<a href="https://caniuse.com/#feat=svg" rel="noreferrer">假设浏览器支持 SVG</a>，这很有可能).<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><desc></code> 如果图像足够复杂以至于您无法用 <code><title></code> 用 20 个字或更少的词来描述它(一般规则).<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 <title><描述>可访问性的正确用法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p>
</div>
<div class="arc-body-main-more">
<span onclick="unlockarc('2611938');">查看全文</span>
</div>
</div>
<div>
</div>
<div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div>
</div>
</article>
<div id="arc-ad-2" class="mb-1">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5038752844014834"
data-ad-slot="3921941283"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="widget bgwhite radius-1 mb-1 shadow widget-rel">
<h5>相关文章</h5>
<ul>
<li>
<a target="_blank" title="内联 SVG <标题><描述>可访问性的正确用法" href="/2838413.html">
内联 SVG <标题><描述>可访问性的正确用法;
</a>
</li>
<li>
<a target="_blank" title="内联SVG< title>< desc>正确使用可访问性" href="/2270509.html">
内联SVG< title>< desc>正确使用可访问性;
</a>
</li>
<li>
<a target="_blank" title="title属性的可访问性" href="/866592.html">
title属性的可访问性;
</a>
</li>
<li>
<a target="_blank" title="为什么链接不带<title>包含的 <svg>因为它是可访问的名称?" href="/2423735.html">
为什么链接不带<title>包含的 <svg>因为它是可访问的名称?;
</a>
</li>
<li>
<a target="_blank" title="Highcharts SVG可访问性" href="/2269907.html">
Highcharts SVG可访问性;
</a>
</li>
<li>
<a target="_blank" title="可访问性 - 使用< P>" href="/1052711.html">
可访问性 - 使用< P>;
</a>
</li>
<li>
<a target="_blank" title="换出< title> t1< / title>< title> t2< / title> < title>新标题< / title>< title>新标题< / title>" href="/1256706.html">
换出< title> t1< / title>< title> t2< / title> < title>新标题< / title>< title>新标题< / title>;
</a>
</li>
<li>
<a target="_blank" title="< TITLE>" href="/1044278.html">
< TITLE>;
</a>
</li>
<li>
<a target="_blank" title="更好的做法是使用< a>或<角色="按钮>可访问性?" href="/2271621.html">
更好的做法是使用< a>或<角色="按钮>可访问性?;
</a>
</li>
<li>
<a target="_blank" title="正确的方式与< svg>" href="/579544.html">
正确的方式与< svg>;
</a>
</li>
<li>
<a target="_blank" title="可访问控件描述" href="/1129671.html">
可访问控件描述;
</a>
</li>
<li>
<a target="_blank" title="< div>用法正确？无法获取列排列" href="/580779.html">
< div>用法正确？无法获取列排列;
</a>
</li>
<li>
<a target="_blank" title="Python 获取 <title>" href="/2459883.html">
Python 获取 <title>;
</a>
</li>
<li>
<a target="_blank" title="什么是可访问的描述" href="/1125587.html">
什么是可访问的描述;
</a>
</li>
<li>
<a target="_blank" title="ThreadLocal的用法如何降低可重用性" href="/543177.html">
ThreadLocal的用法如何降低可重用性;
</a>
</li>
<li>
<a target="_blank" title="ConcurrentQueue< StrongBox<>>的用法是:" href="/1862336.html">
ConcurrentQueue< StrongBox<>>的用法是:;
</a>
</li>
<li>
<a target="_blank" title="我应该更喜欢 <nav><ul><li><a-or-other-tag>从可访问性的角度来看，还是<nav><a-or-other-tag>?" href="/2510214.html">
我应该更喜欢 <nav><ul><li><a-or-other-tag>从可访问性的角度来看，还是<nav><a-or-other-tag>?;
</a>
</li>
<li>
<a target="_blank" title="如何更改 GitLab <title>?" href="/2794941.html">
如何更改 GitLab <title>?;
</a>
</li>
<li>
<a target="_blank" title="javascript的可访问性" href="/1049388.html">
javascript的可访问性;
</a>
</li>
<li>
<a target="_blank" title="可访问性文章" href="/1077427.html">
可访问性文章;
</a>
</li>
<li>
<a target="_blank" title="网络可访问性" href="/1773599.html">
网络可访问性;
</a>
</li>
<li>
<a target="_blank" title="可访问性：SVG和MathML推荐使用alt-text惯例？" href="/880865.html">
可访问性：SVG和MathML推荐使用alt-text惯例？;
</a>
</li>
<li>
<a target="_blank" title="MS访问2013的可访问性" href="/1128245.html">
MS访问2013的可访问性;
</a>
</li>
<li>
<a target="_blank" title="奇怪的查询结果/< title>问题" href="/1049583.html">
奇怪的查询结果/< title>问题;
</a>
</li>
<li>
<a target="_blank" title="< title>元素需要位于< head>元件？" href="/873552.html">
< title>元素需要位于< head>元件？;
</a>
</li>
</ul>
</div>
<div class="mb-1">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5038752844014834"
data-ad-slot="3921941283"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="side">
<div class="widget widget-side bgwhite mb-1 shadow">
<h5>前端开发最新文章</h5>
<ul>
<li>
<a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html">
为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？;
</a>
</li>
<li>
<a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html">
错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接;
</a>
</li>
<li>
<a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html">
如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？;
</a>
</li>
<li>
<a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html">
如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？;
</a>
</li>
<li>
<a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html">
警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件;
</a>
</li>
<li>
<a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html">
如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？;
</a>
</li>
<li>
<a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html">
此请求已被阻止;内容必须通过HTTPS提供;
</a>
</li>
<li>
<a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html">
资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）;
</a>
</li>
<li>
<a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html">
通过HTTPS加载页面但请求不安全的XMLHttpRequest端点;
</a>
</li>
<li>
<a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html">
拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。;
</a>
</li>
</ul>
</div>
<div class="widget widget-side bgwhite mb-1 shadow">
<h5>
热门教程
</h5>
<ul>
<li>
<a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html">
Java教程
</a>
</li>
<li>
<a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html">
Apache ANT 教程
</a>
</li>
<li>
<a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html">
Kali Linux教程
</a>
</li>
<li>
<a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html">
JavaScript教程
</a>
</li>
<li>
<a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html">
JavaFx教程
</a>
</li>
<li>
<a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html">
MFC 教程
</a>
</li>
<li>
<a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html">
Apache HTTP客户端教程
</a>
</li>
<li>
<a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html">
Microsoft Visio 教程
</a>
</li>
</ul>
</div>
<div class="widget widget-side bgwhite mb-1 shadow">
<h5>
热门工具
</h5>
<ul>
<li>
<a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4">
Java 在线工具
</a>
</li>
<li>
<a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6">
C(GCC) 在线工具
</a>
</li>
<li>
<a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8">
PHP 在线工具
</a>
</li>
<li>
<a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1">
C# 在线工具
</a>
</li>
<li>
<a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5">
Python 在线工具
</a>
</li>
<li>
<a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33">
MySQL 在线工具
</a>
</li>
<li>
<a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2">
VB.NET 在线工具
</a>
</li>
<li>
<a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14">
Lua 在线工具
</a>
</li>
<li>
<a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35">
Oracle 在线工具
</a>
</li>
<li>
<a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7">
C++(GCC) 在线工具
</a>
</li>
<li>
<a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20">
Go 在线工具
</a>
</li>
<li>
<a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45">
Fortran 在线工具
</a>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">var eskeys = '内联,svg,title,lt,描述,gt,可,访问,性,的,正确,用法'; var cat = 'cc';';//qianduan</script>
</div>
<div id="pop" onclick="pophide();">
<div id="pop_body" onclick="event.stopPropagation();">
<h6 class="flex flex101">
登录
<span onclick="pophide();">关闭</span>
</h6>
<div class="pd-1">
<div class="wxtip center">
<span>扫码关注<em>1秒</em>登录</span>
</div>
<div class="center">
<img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" />
</div>
<div style="margin-top:10px;display:flex;justify-content: center;">
<input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" />
<input id="btngo" type="button" onclick="chk()" value="GO" />
</div>
<div class="center" style="margin: 4px; font-size: .8rem; color: #f60;">
发送“验证码”获取
<em style="padding: 0 .5rem;">|</em>
<span style="color: #01a05c;">15天全站免登陆</span>
</div>
<div id="chkinfo" class="tip"></div>
</div>
</div>
</div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script>
<footer class="footer">
<div class="container">
<div class="flink mb-1">
友情链接：
<a href="https://www.it1352.com/" target="_blank">IT屋</a>
<a href="https://huajiakeji.com/" target="_blank">Chrome插件</a>
<a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a>
</div>
<section class="copyright-section">
<a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a>
©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a>
<a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a>
<a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a>
<a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a>
<a href="/1155981.html" title="IT屋-免责申明"><免责申明></a>
本站内容来源互联网,如果侵犯您的权益请联系我们删除.
</section>
<!--统计代码-->
<script type="text/javascript">
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script type="text/javascript">
(function () {
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</div>
</footer>
</body>
</html>
