| </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>
Images fonctionnelles
</h3>
<ul>
<li><p>Toute image ayant un objectif fonctionnel (par exemple, un logo qui renvoie à la page d'accueil, une icône en forme de loupe utilisée comme bouton de recherche) doit inclure un texte alternatif approprié.</p></li>
<li><p>Le texte alternatif doit décrire l'<strong>action de l'image</strong>, et non ses aspects visuels.</p></li>
<li><p>Si l'image est à la fois informative et exploitable, vous pouvez ajouter des descriptions alternatives à chaque élément, mais ce n'est pas une obligation. par exemple<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>
Images complexes
</h3>
<ul>
<li><p>Si une image nécessite plus d'explications qu'une image décorative, informative ou fonctionnelle, incluez des infographies, des cartes, des graphiques/tableaux et des illustrations complexes, utilisez l'une de ces méthodes pour ajouter des descriptions alternatives</p></li>
<li><p>Créez un lien vers une ressource ou fournissez un lien vers une explication plus longue plus loin sur la page. par exemple<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>Ajoutez l'attribut aria-describeby au <img> puis liez l’image à un identifiant contenant une description plus longue. par ex.
</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>
Bonnes pratiques en matière de texte alternatif
</h3>
<ul>
<li><p>Il est conseillé de limiter le texte alternatif à 150 caractères ou moins pour éviter la fatigue du lecteur.</p></li>
<li><p>Évitez d'utiliser des mots comme <strong>"image de"</strong> ou <strong>"photo de"</strong> dans la description, car le lecteur d'écran identifiera ces types de fichiers.</p></li>
<li><p>Lorsque vous nommez des images, soyez aussi cohérent et précis que possible. Les noms d'images sont une solution de secours lorsque le texte alternatif est manquant ou ignoré.</p></li>
<li><p>Évitez d'utiliser des caractères non alphabétiques (par exemple, #, 9 et) </p></li>
<li><p>Utilisez des tirets entre les mots plutôt que des traits de soulignement dans les noms d'images ou dans le texte alternatif.</p></li>
<li><p>Utilisez une ponctuation appropriée autant que possible. Sans cela, les descriptions d’images ressembleront à une longue phrase interminable.</p></li>
<li><p>Écrivez un texte alternatif comme un humain et non comme un robot. Le bourrage de mots clés ne profite à personne : les personnes utilisant des lecteurs d'écran seront ennuyées et les algorithmes des moteurs de recherche les pénaliseront.</p></li>
</ul>
<p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</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>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Quelles sont les dimensions maximales des éléments de canevas dans différents navigateurs ?" href="https://m.php.cn/fr/faq/1796689270.html">Quelles sont les dimensions maximales des éléments de canevas dans différents navigateurs ?</a></span><span>Article suivant：<a class="dBlack" title="Quelles sont les dimensions maximales des éléments de canevas dans différents navigateurs ?" href="https://m.php.cn/fr/faq/1796689284.html">Quelles sont les dimensions maximales des éléments de canevas dans différents navigateurs ?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</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/fr/faq/1609.html" title="Une analyse approfondie du composant de groupe de liste Bootstrap" class="aBlack">Une analyse approfondie du composant de groupe de liste Bootstrap</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/1640.html" title="Explication détaillée du currying de la fonction JavaScript" class="aBlack">Explication détaillée du currying de la fonction JavaScript</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/1949.html" title="Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)" class="aBlack">Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/2248.html" title="Angularjs intègre l'interface utilisateur WeChat (weui)" class="aBlack">Angularjs intègre l'interface utilisateur WeChat (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/2351.html" title="Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript" class="aBlack">Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_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>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/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> |
