| </td>
<td>Short, brief descriptions</td>
<td>Simple, widely supported</td>
<td>Limited in length</td>
</tr>
<tr>
<td>aria-label</td>
<td>Brief descriptions</td>
<td>Quick, inline</td>
<td>Best for short text</td>
</tr>
<tr>
<td>aria-labelledby</td>
<td>Complex descriptions using <title> and <desc></td>
<td>Comprehensive, flexible</td>
<td>More verbose</td>
</tr>
<tr>
<td><figcaption></td>
<td>Visible description in a figure context</td>
<td>Visible and accessible</td>
<td>Not ideal for all SVGs</td>
</tr>
</tbody>
</table></div>
<h3>
功能图像
</h3>
<ul>
<li><p>任何具有功能性目的的图像（例如，链接到主页的徽标、用作搜索按钮的放大镜图标）都应包含适当的替代文本。</p></li>
<li><p>替代文本应描述<strong>图像的操作</strong>，而不是其视觉方面。</p></li>
<li><p>如果图像既提供信息又具有可操作性，您可以为每个元素添加替代描述 - 但这不是必需的。例如<br>
</p></li>
</ul>
<pre class="brush:php;toolbar:false"><!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">
</pre>
<h3>
复杂图像
</h3>
<ul>
<li><p>如果图像需要比装饰性、信息性或功能性图像更多的解释（包括信息图表、地图、图形/图表和复杂插图），请使用这些方法中的任何一种来添加替代描述</p></li>
<li><p>链接到资源或提供跳转链接到页面稍后的较长说明。例如<br>
</p></li>
</ul>
<pre class="brush:php;toolbar:false"><img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting
on the leaves of my prize rose bush.">
</pre>
<ul>
<li>将 aria-scribedby 属性附加到 <img alt="无障碍 (a) 规则 - 3" > 中然后，元素将图像链接到包含较长描述的 ID。例如
</li>
</ul>
<pre class="brush:php;toolbar:false"><div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
</a>
</div>
</pre>
<h3>
替代文本最佳实践
</h3>
<ul>
<li><p>建议将替代文本限制在 150 个字符或更少，以避免读者疲劳。</p></li>
<li><p>避免在说明中使用 <strong>“图像”</strong> 或 <strong>“照片”</strong> 等词语，因为屏幕阅读器会识别这些文件类型。</p></li>
<li><p>命名图像时，尽可能保持一致和准确。当替代文本丢失或被忽略时，图像名称是后备。</p></li>
<li><p>避免使用非字母字符（例如 #、9、&）</p></li>
<li><p>在图像名称或替代文本中使用单词之间的破折号，而不是下划线。</p></li>
<li><p>尽可能使用正确的标点符号。如果没有它，图像描述听起来就像是一个漫长的、永无休止的连续句子。</p></li>
<li><p>像人类而不是机器人一样编写替代文本。关键字堆砌对任何人都没有好处——使用屏幕阅读器的人会感到恼火，搜索引擎算法会惩罚他们。</p></li>
</ul>
<p>以上是无障碍 (a) 规则 - 3的详细内容。更多信息请关注PHP中文网其他相关文章！</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">css</a> <a href="javascript:void(0);">less</a> <a href="javascript:void(0);">NULL</a> <a href="javascript:void(0);">Resource</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">include</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">Length</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">cap</a> <a href="javascript:void(0);">append</a> <a href="javascript:void(0);">background</a> <a href="javascript:void(0);">idea</a><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div></div></div><div class="nphpSytBox"><span>上一篇：<a class="dBlack" title="What are the Maximum Dimensions for Canvas Elements in Different Browsers?" href="https://m.php.cn/zh/faq/1796689270.html">What are the Maximum Dimensions for Canvas Elements in Different Browsers?</a></span><span>下一篇：<a class="dBlack" title="How I built a lightweight CRM for drip campaigns" href="https://m.php.cn/zh/faq/1796689284.html">How I built a lightweight CRM for drip campaigns</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相关文章</h2><em><a href="https://m.php.cn/zh/article.html" class="bBlack"><i>查看更多</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/zh/faq/1609.html" title="深入浅析Bootstrap列表组组件" class="aBlack">深入浅析Bootstrap列表组组件</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/1640.html" title="JavaScript函数柯里化详解" class="aBlack">JavaScript函数柯里化详解</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/1949.html" title="JS密码生成与强度检测完整实例(附demo源码下载)" class="aBlack">JS密码生成与强度检测完整实例(附demo源码下载)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/2248.html" title="Angularjs整合微信UI（weui）" class="aBlack">Angularjs整合微信UI（weui）</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh/faq/2351.html" title="JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招_javascript技巧" class="aBlack">JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招_javascript技巧</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>公益在线PHP培训，帮助PHP学习者快速成长！</p></div><div class="footermid"><a href="https://m.php.cn/zh/about/us.html">关于我们</a><a href="https://m.php.cn/zh/about/disclaimer.html">免责声明</a><a href="https://m.php.cn/zh/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script><!-- End Matomo Code --></html> |
