alternative textuelle

L'alternative textuelle est un texte que l'on associe à un contenu graphique comme une image, une zone cliquable dans une image ou un élément de formulaire de type image, dans un site web ou dans un document produit par un logiciel d'une suite bureautique, pour que l'utilisateur qui ne peut visualiser l'image puisse être informé de ce qu'elle représente et signifie. L'alternative textuelle est restituée à la place de l'image quand celle-ci n'est pas consultable. L'alternative textuelle, dont l'emploi est obligatoire dans le cadre de l'accessibilité du web, concerne tant les personnes qui utilisent un navigateur textuel ou un lecteur d'écran, que celles qui, par choix ou à cause d'un problème technique, ne peuvent visualiser l'image. Celle-ci peut en effet : * constituer une information nécessaire ou complémentaire à la compréhension du texte ; * être l'objet d'un lien renvoyant vers une autre partie du texte, vers une autre image, vers une autre page web ; * constituer un test, comme une image CAPTCHA, dont l'incompréhension ne permet pas à l'internaute d'opérer la manœuvre nécessaire à la poursuite de son opération sur le site web. L'alternative textuelle n'est donc pas la légende d'une image mais bien sa description concrète, dépendant de son contexte d'utilisation, même si elle doit être la plus concise possible. Par exemple, dans l'image ci-après, la légende ne permet pas de savoir que la friteuse est en action sur une cuisinière à gaz ni que le panier métallique est grillagé. L'alternative textuelle précise, si cette information est considérée comme nécessaire par l’auteur, que le récipient est sur une gazinière et contient des frites en train de cuire. Dans le cas d'un site web, l'alternative textuelle est introduite par l'attribut alt. Cet attribut doit être présent selon le cas : * soit dans la balise HTML <img> qui décrit l'image ; * soit dans la balise <area> d'une zone d'image réactive ; * soit dans la balise <input> possédant un attribut type="image" ; * soit dans la balise <applet> dans le cas où l'image est incorporée ou générée par une <a href="/wiki/Applet" title="Applet">applet</a>. <p>Ainsi, le code HTML de l'image présentée en exemple peut être :</p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"> <pre><span></span><span class="p"><</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">"Fries cooking.jpg"</span> <span class="na">alt</span><span class="o">=</span><span class="s">"Frites dorant dans un panier grillagé plongé dans l’huile d’une casserole en fonte posée sur une gazinière"</span><span class="p">/></span><span class="p"><</span><span class="nt">p</span><span class="p">></span>Friteuse formée d’une casserole en fonte munie d’un panier métallique.<span class="p"> <!--</span--><span class="nt">p</span><span class="p">></span></span></pre> </div> <p>L'alternative textuelle introduite par « <code>alt=</code> » précède la légende.</p> <p>Dans un autre contexte, la même image pourra recevoir une alternative : il pourrait être nécessaire d'illustrer le degré de cuisson des frites en fonction de leur couleur, auquel cas la mention du moyen de cuisson peut être omise. L'image peut même recevoir une alternative vide si elle ne sert que de décoration, comme dans le cas d'une frise décorative. Attention, l'alternative, même vide, doit toujours être présente.</p> <h2><span id="R.C3.A9f.C3.A9rences"></span><span class="mw-headline" id="Références">Références</span></h2> <div class="references-small decimal" style=""> <div class="mw-references-wrap"> <ol class="references"> <li id="cite_note-1"><span class="reference-text"><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> <a rel="nofollow" class="external text" href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F65"><span class="lang-en" lang="en">F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute on img elements, area elements, and input elements of type "image"</span></a>, <span class="lang-en" lang="en">Techniques for WCAG 2.0</span>, sur le site du <a href="/wiki/W3C" class="mw-redirect" title="W3C">W3C</a>.</span></li> <li id="cite_note-2"><span class="reference-text">Marie-Valentine Blond, Olivier Marcellin et Mélina Zerbib, <i>Lisibilité des sites web</i>, Eyrolles, 2011, <span class="nowrap"><abbr class="abbr" title="page">p.</abbr> 79</span>.</span></li> <li id="cite_note-3"><span class="reference-text"><span class="ouvrage"><a rel="nofollow" class="external text" href="https://www.w3.org/WAI/WCAG21/Techniques/html/H37.html">« <cite style="font-style:normal;">H37: Using alt attributes on img elements</cite> »</a>, sur <span class="italique">www.w3.org</span> <small style="line-height:1em;">(consulté le <time class="nowrap" datetime="2019-08-29" data-sort-value="2019-08-29">29 août 2019</time>)</small></span></span></li> <li id="cite_note-4"><span class="reference-text"><abbr class="abbr indicateur-langue" title="Langue : anglais">(en)</abbr> <a rel="nofollow" class="external text" href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/F38"><span class="lang-en" lang="en">F38: Failure of Success Criterion 1.1.1 due to omitting the alt-attribute for non-text content used for decorative purposes only in HTML</span></a>, <span class="lang-en" lang="en">Techniques for WCAG 2.0</span>, sur le site du <a href="/wiki/W3C" class="mw-redirect" title="W3C">W3C</a>.</span></li> </ol> </div> </div> <ul id="bandeau-portail" class="bandeau-portail"> <li><span class="bandeau-portail-element"><span class="bandeau-portail-icone"><a href="/wiki/Portail:Handicap" title="Portail du handicap"><img alt="icône décorative" src="//upload.wikimedia.org/wikipedia/commons/thumb/7/76/Wheelchair.svg/22px-Wheelchair.svg.png" decoding="async" width="22" height="24" class="noviewer" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/7/76/Wheelchair.svg/33px-Wheelchair.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/7/76/Wheelchair.svg/45px-Wheelchair.svg.png 2x" data-file-width="39" data-file-height="42"></a></span> <span class="bandeau-portail-texte"><a href="/wiki/Portail:Handicap" title="Portail:Handicap">Portail du handicap</a></span> </span></li> <li><span class="bandeau-portail-element"><span class="bandeau-portail-icone"><a href="/wiki/Portail:Internet" title="Portail d’Internet"><img alt="icône décorative" src="//upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Circle-icons-email.svg/24px-Circle-icons-email.svg.png" decoding="async" width="24" height="24" class="noviewer" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Circle-icons-email.svg/36px-Circle-icons-email.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Circle-icons-email.svg/48px-Circle-icons-email.svg.png 2x" data-file-width="512" data-file-height="512"></a></span> <span class="bandeau-portail-texte"><a href="/wiki/Portail:Internet" title="Portail:Internet">Portail d’Internet</a></span> </span></li> </ul> <!-- NewPP limit reportParsed by mw1401Cached time: 20221218133834Cache expiry: 1814400Reduced expiry: falseComplications: []CPU time usage: 0.115 secondsReal time usage: 0.166 secondsPreprocessor visited node count: 473/1000000Post‐expand include size: 6398/2097152 bytesTemplate argument size: 322/2097152 bytesHighest expansion depth: 14/100Expensive parser function count: 1/500Unstrip recursion depth: 0/20Unstrip post‐expand size: 3773/5000000 bytesLua time usage: 0.059/10.000 secondsLua memory usage: 3397885/52428800 bytesNumber of Wikibase entities loaded: 1/400--> <!--Transclusion expansion time report (%,ms,calls,template)100.00% 135.057 1 -total 60.94% 82.309 1 Modèle:Références 38.97% 52.633 1 Modèle:Portail 23.32% 31.490 1 Modèle:Lien_web 22.10% 29.854 2 Modèle:En 21.24% 28.685 1 Modèle:Indication_de_langue 15.77% 21.292 1 Modèle:Suivi_des_biographies 14.69% 19.835 1 Modèle:Catégorisation_badges 4.65% 6.286 4 Modèle:Lang 4.16% 5.613 1 Modèle:Portail_handicap--> <!-- Saved in parser cache with key frwiki:pcache:idhash:7715605-0!canonical and timestamp 20221218133833 and revision id 190435524. --> </applet>