| </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>
Funktionsbilder
</h3>
<ul>
<li><p>Jedes Bild mit einem funktionalen Zweck (z. B. ein Logo, das auf die Startseite verweist, ein Lupensymbol als Suchschaltfläche) sollte geeigneten Alternativtext enthalten.</p></li>
<li><p>Alt-Text sollte die <strong>Aktion des Bildes</strong> beschreiben, nicht seine visuellen Aspekte.</p></li>
<li><p>Wenn das Bild sowohl informativ als auch umsetzbar ist, können Sie jedem Element alternative Beschreibungen hinzufügen – dies ist jedoch keine Voraussetzung. z.B.<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>
Komplexe Bilder
</h3>
<ul>
<li><p>Wenn ein Bild mehr Erklärungen erfordert als ein dekoratives, informatives oder funktionales Bild, einschließlich Infografiken, Karten, Grafiken/Diagramme und komplexe Illustrationen, verwenden Sie eine dieser Methoden, um alternative Beschreibungen hinzuzufügen</p></li>
<li><p>Verlinken Sie auf eine Ressource oder stellen Sie später auf der Seite einen Sprunglink zu einer längeren Erklärung bereit. z.B.<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>Fügen Sie das aria-describedby-Attribut an das <img>-Attribut an. Element verknüpfen Sie dann das Bild mit einer ID, die eine längere Beschreibung enthält. z.B.
</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>
Best Practices für alternative Texte
</h3>
<ul>
<li><p>Es wird empfohlen, alternativen Text auf 150 Zeichen oder weniger zu begrenzen, um eine Ermüdung des Lesers zu vermeiden.</p></li>
<li><p>Vermeiden Sie die Verwendung von Wörtern wie <strong>„Bild von“</strong> oder <strong>„Foto von“</strong> in der Beschreibung, da der Bildschirmleser diese Dateitypen erkennt.</p></li>
<li><p>Seien Sie bei der Benennung von Bildern so konsistent und genau wie möglich. Bildnamen sind eine Alternative, wenn der Alternativtext fehlt oder ignoriert wird.</p></li>
<li><p>Vermeiden Sie die Verwendung von Nicht-Alpha-Zeichen (z. B. #, 9 und &) </p></li>
<li><p>Verwenden Sie Bindestriche zwischen Wörtern anstelle von Unterstrichen in Bildnamen oder Alternativtext.</p></li>
<li><p>Verwenden Sie nach Möglichkeit die richtige Zeichensetzung. Ohne sie klingen die Bildbeschreibungen wie ein langer, nie endender Folgesatz.</p></li>
<li><p>Schreiben Sie Alternativtext wie ein Mensch und nicht wie ein Roboter. Keyword-Stuffing nützt niemandem – Leute, die Screenreader verwenden, werden verärgert sein und Suchmaschinenalgorithmen werden sie abstrafen.</p></li>
</ul>
<p>Das obige ist der detaillierte Inhalt vonBarrierefreiheit (a) Regeln – 3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</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>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Was sind die maximalen Abmessungen für Canvas-Elemente in verschiedenen Browsern?" href="https://m.php.cn/de/faq/1796689270.html">Was sind die maximalen Abmessungen für Canvas-Elemente in verschiedenen Browsern?</a></span><span>Nächster Artikel：<a class="dBlack" title="Was sind die maximalen Abmessungen für Canvas-Elemente in verschiedenen Browsern?" href="https://m.php.cn/de/faq/1796689284.html">Was sind die maximalen Abmessungen für Canvas-Elemente in verschiedenen Browsern?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/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> |
