| </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="不同瀏覽器中畫布元素的最大尺寸是多少？" href="https://m.php.cn/zh-tw/faq/1796689270.html">不同瀏覽器中畫布元素的最大尺寸是多少？</a></span><span>下一篇：<a class="dBlack" title="不同瀏覽器中畫布元素的最大尺寸是多少？" href="https://m.php.cn/zh-tw/faq/1796689284.html">不同瀏覽器中畫布元素的最大尺寸是多少？</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相關文章</h2><em><a href="https://m.php.cn/zh-tw/article.html" class="bBlack"><i>看更多</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/zh-tw/faq/1609.html" title="深入淺析Bootstrap列表組元件" class="aBlack">深入淺析Bootstrap列表組元件</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/faq/1640.html" title="JavaScript函數柯里化詳解" class="aBlack">JavaScript函數柯里化詳解</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/zh-tw/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-tw/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-tw/faq/2351.html" title="JavaScript快速切換繁體中文和簡體中文的方法及網站支援簡繁體切換的絕招_javascript技巧" class="aBlack">JavaScript快速切換繁體中文和簡體中文的方法及網站支援簡繁體切換的絕招_javascript技巧</a><div class="clear"></div></li></ul></div></div><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-tw/about/us.html">關於我們</a><a href="https://m.php.cn/zh-tw/about/disclaimer.html">免責聲明</a><a href="https://m.php.cn/zh-tw/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></html> |
