path: root/files/fr/apprendre/a11y/css_and_javascript/index.html

---
title: Meilleures pratiques d'accessibilité CSS et JavaScript
slug: Apprendre/a11y/CSS_and_JavaScript
tags:
  - Accessibilité
  - Apprendre
  - Article
  - CSS
  - Codage des scripts
  - Guide
  - JavaScript
  - contraste
  - couleur
  - discret
translation_of: Learn/Accessibility/CSS_and_JavaScript
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div>

<p class="summary"><span class="tlid-translation translation"><span title="">CSS et JavaScript, lorsqu'ils sont utilisés correctement, peuvent également permettre des expériences web accessibles... ou peuvent nuire considérablement à l'accessibilité s'ils sont mal utilisés.</span> <span title="">Cet article décrit certaines des meilleures pratiques CSS et JavaScript à prendre en compte pour garantir que même un contenu complexe soit aussi accessible que possible.</span></span></p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prérequis :</th>
   <td><span class="tlid-translation translation"><span title="">Connaissances informatiques de base, compréhension de base de HTML, CSS et JavaScript, et compréhension de</span></span>  <a href="/fr/docs/Apprendre/a11y/What_is_accessibility"> Qu'est ce que l'accessibilité ?</a></td>
  </tr>
  <tr>
   <th scope="row"><span class="tlid-translation translation">Objectif</span> :</th>
   <td><span class="tlid-translation translation"><span title="">Familiarisez-vous avec l’utilisation appropriée de CSS et de JavaScript dans vos documents Web afin d’optimiser l’accessibilité et de ne pas la compromettre.</span></span></td>
  </tr>
 </tbody>
</table>

<h2 id="CSS_et_JavaScript_des_technologies_accessibles"><span class="tlid-translation translation"><span title="">CSS et JavaScript, des technologies accessibles ?</span></span></h2>

<p><span class="tlid-translation translation"><span title="">CSS et JavaScript n’ont pas la même importance immédiate en matière d’accessibilité que le HTML, mais ils peuvent toujours aider ou nuire à l’accessibilité, en fonction de leur utilisation.</span> <span title="">En d'autres termes, il est important que vous preniez en compte certains conseils de meilleures pratiques pour vous assurer que votre utilisation de CSS et de JavaScript ne ruine pas l'accessibilité de vos documents.</span></span></p>

<h2 id="CSS">CSS</h2>

<p><span class="tlid-translation translation"><span title="">Commençons par regarder le CSS.</span></span></p>

<h3 id="Sémantique_correcte_et_attentes_de_lutilisateur"><span class="tlid-translation translation"><span title="">Sémantique correcte et attentes de l'utilisateur</span></span></h3>

<p><span class="tlid-translation translation"><span title="">Il est possible d’utiliser CSS pour détourner l'apparence d'un élément HTML pour qu'il ressemble à un autre, mais cela ne veut pas dire que vous devriez le faire.</span> <span title="">Comme nous l’avons souvent mentionné dans notre article </span></span> <a href="/fr/docs/Apprendre/a11y/HTML"> HTML : une bonne base pour l'accessibilité</a>, <span class="tlid-translation translation"><span title="">vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié.</span> <span title="">Sinon, cela peut créer de la confusion et des difficultés d'usage pour tout le monde, plus particulièrement pour les utilisateurs handicapés.</span> <span title="">L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs </span></span> — <span class="tlid-translation translation"><span title="">les éléments ont une apparence et un comportement particuliers, en fonction de leurs fonctionnalités, et ces conventions communes sont attendues par les utilisateurs.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Par exemple, un utilisateur de lecteur d'écran ne peut pas naviguer dans une page via des éléments d'en-tête si le développeur n'a pas utilisé les éléments d'en-tête de manière appropriée pour annoter le contenu.</span> <span title="">De la même manière, un en-tête perd son utilité visuelle si vous le stylisez de sorte qu'il ne ressemble pas à un en-tête.</span></span></p>

<p><span class="tlid-translation translation"><span title="">La règle de base est la suivante : adaptez les styles et les comportements à votre conception sans rompre les habitudes utilisateur qui permettent une expérience intuitive.</span> <span title="">Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte.</span></span></p>

<h4 id="Structure_du_contenu_du_texte_standard"><span class="tlid-translation translation"><span title="">Structure du contenu du texte "standard"</span></span></h4>

<p><span class="tlid-translation translation"><span title="">Titres, paragraphes, listes</span></span> — <span class="tlid-translation translation"><span title="">le contenu de texte de base de votre page :</span></span></p>

<pre class="brush: html">&lt;h1&gt;<span class="tlid-translation translation"><span title="">En-têtes</span></span>&lt;/h1&gt;

&lt;p&gt;<span class="tlid-translation translation"><span title="">paragraphes</span></span>&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;<span class="tlid-translation translation"><span title="">Ma liste</span></span>&lt;/li&gt;
  &lt;li&gt;<span class="tlid-translation translation"><span title="">a deux éléments</span></span>.&lt;/li&gt;
&lt;/ul&gt;</pre>

<p><span class="tlid-translation translation"><span title="">Quelques styles CSS typiques pourraient ressembler à ceci :</span></span></p>

<pre class="brush: css">h1 {
  font-size: 5rem;
}

p, li {
  line-height: 1.5;
  font-size: 1.6rem;
}</pre>

<p><span class="tlid-translation translation"><span title="">Vous devriez </span></span>:</p>

<ul>
 <li><span class="tlid-translation translation"><span title="">Sélectionnez une taille de police</span></span>, une hauteur de ligne, un<span class="tlid-translation translation"><span title=""> espacement interlettres, etc. raisonnables pour que votre texte soit logique, lisible et agréable à lire.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Le style par défaut pour les titres, dans une taille plus grande et en gras les distingue du texte</span></span> principal<span class="tlid-translation translation"><span title="">.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Vos listes devraient ressembler à des listes</span></span>.</li>
 <li>La couleur du texte doit présenter un contraste suffisant avec la couleur de fond.</li>
</ul>

<p><span class="tlid-translation translation"><span title="">Voir</span></span> <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a> et <a href="/fr/docs/Learn/CSS/Styling_text"> Introduction au style de texte</a> <span class="tlid-translation translation"><span title="">pour plus d'informations.</span></span></p>

<h4 id="Texte_mis_en_emphase"><span class="tlid-translation translation"><span title="">Texte mis en emphase</span></span></h4>

<p><span class="tlid-translation translation"><span title="">On met en avant une portion de texte grâce au balises <em>inline</em> <code>&lt;em&gt;</code> :</span></span></p>

<pre class="brush: html">&lt;p&gt; <span class="tlid-translation translation"><span title="">L'eau est</span></span> &lt;em&gt; <span class="tlid-translation translation"><span title="">très chaud</span></span>e &lt;/em&gt;.&lt;/p&gt;

&lt;p&gt; <span class="tlid-translation translation"><span title="">Les gouttelettes d’eau accumulées sur les surfaces s’appellent</span></span>  &lt;strong&gt;condensation&lt;/strong&gt;.&lt;/p&gt;</pre>

<p><span class="tlid-translation translation"><span title="">Vous voudrez peut-être ajouter quelques couleurs simples à votre texte mis en importance :</span></span></p>

<pre class="brush: css">strong, em {
  color: #a60000;
}</pre>

<p><span class="tlid-translation translation"><span title="">Cependant, vous aurez rarement besoin de styliser des éléments d’emphase de manière significative.</span> <span title="">Les conventions standard de texte en gras () et en italique (emphase) sont très reconnaissables, et le changement de style peut être source de confusion.</span> <span title="">Pour mettre des contenus en avant de manière efficace, voir</span></span> <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Emphasis_and_importance">Fondamentaux du texte HTML</a>.</p>

<h4 id="Les_abréviations"><span class="tlid-translation translation"><span title="">Les abréviations</span></span></h4>

<p><span class="tlid-translation translation"><span title="">Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée :</span></span></p>

<pre class="brush: html">&lt;p&gt; <span class="tlid-translation translation"><span title="">Le contenu web est marqué à l'aide de</span></span>  &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt;.&lt;/p&gt;</pre>

<p><span class="tlid-translation translation"><span title="">Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments</span></span> :</p>

<pre class="brush: css">abbr {
  color: #a60000;
}</pre>

<p><span class="tlid-translation translation"><span title="">Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue.</span> <span title="">Pour plus d'informations sur les abréviations, voir </span></span><a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte#Abbreviations">Abréviations</a>.</p>

<div class="text-wrap tlid-copy-target">
<h4 class="result-shield-container tlid-copy-target" id="Liens"><span class="tlid-translation translation"><span title="">Liens</span></span></h4>
</div>

<p><span class="tlid-translation translation"><span title="">Hyperliens  la façon dont vous accédez à de nouveaux endroits sur le Web :</span></span></p>

<pre class="brush: html">&lt;p&gt; <span class="tlid-translation translation"><span title="">Visiter la</span></span>  &lt;a href="https://www.mozilla.org"&gt; <span class="tlid-translation translation"><span title="">Page d'accueil de Mozilla</span></span> &lt;/a&gt;.&lt;/p&gt;</pre>

<p><span class="tlid-translation translation"><span title="">Un style de lien très simple est présenté ci-dessous :</span></span></p>

<pre class="brush: css">a {
  color: #ff0000;
}

a:hover, a:visited, a:focus {
  color: #a60000;
  text-decoration: none;
}

a:active {
  color: #000000;
  background-color: #a60000;
}</pre>

<p><span class="tlid-translation translation"><span title="">Les conventions de style sur les liens sont le soulignement et une couleur différente (par défaut : bleu) dans leur état normal (non visité) de celle utilisée lorsque le lien a déjà été visité (par défaut : violet) et de celle utilisée lorsque le lien est activé (par défaut : rouge)</span><span title="">.</span> <span title="">De plus, le pointeur de la souris se change en icône de pointeur lorsque les liens sont déplacés, et le lien reçoit une surbrillance lorsqu'il est ciblé (par exemple, via une tabulation) ou activé.</span> <span title="">L'image suivante montre la surbrillance dans Firefox (contour en pointillé) et Chrome (contour bleu) :</span></span></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14371/focus-highlight-firefox.png" style="display: block; height: 173px; margin: 0px auto; width: 319px;"></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14369/focus-highlight-chrome.png" style="display: block; height: 169px; margin: 0px auto; width: 309px;"></p>

<p><span class="tlid-translation translation"><span title="">Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous continuez à donner aux utilisateurs des informations visuelles en retour lorsqu'ils interagissent avec les liens.</span> <span title="">Quelque chose doit effectivement se produire pour signaler les changements d'états d'un lien, et vous ne devriez pas vous débarrasser du curseur de pointeur ou du contour</span></span> — <span class="tlid-translation translation"><span title="">ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier</span></span>.</p>

<h4 id="Éléments_form"><span class="tlid-translation translation"><span title="">Éléments form</span></span></h4>

<p><span class="tlid-translation translation"><span title="">Éléments permettant aux utilisateurs de saisir des données sur des sites web :</span></span></p>

<pre class="brush: html">&lt;div&gt;
  &lt;label for="name"&gt;<span class="tlid-translation translation"><span title="">Entrez votre nom</span></span>&lt;/label&gt;
  &lt;input type="text" id="name" name="name"&gt;
&lt;/div&gt;</pre>

<p><span class="tlid-translation translation"><span title="">Vous pouvez voir de bons exemples de CSS dans notre exemple</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> et (<a href="https://mdn.github.io/learning-area/accessibility/css/form-css.html">en direct</a>).</p>

<p><span class="tlid-translation translation"><span title="">La plupart du CSS que vous rédigerez pour les formulaires servira à dimensionner les éléments, à aligner les étiquettes et les entrées, et à leur donner une apparence nette et ordonnée.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Toutefois, vous ne devriez pas trop vous écarter des indications visuelles classiques qui signalent qu'un élément du formulaire est ciblé, c'est fondamentalement la même chose que pour les liens (voir ci-dessus).</span> <span title="">Vous pouvez mettre en forme les états ciblé / survolé du formulaire pour rendre ce comportement plus cohérent sur les navigateurs ou pour obtenir une meilleure intégration au design de votre page, mais ne vous en débarrassez pas complètement. Là encore, les utilisateurs s’appuient sur ces indices pour comprendre ce qui se passe.</span></span></p>

<h4 id="Tableaux"><span class="tlid-translation translation"><span title="">Tableaux</span></span></h4>

<p><span class="tlid-translation translation"><span title="">Tableaux pour la présentation des données tabulées</span></span>.</p>

<p><span class="tlid-translation translation"><span title="">Vous pouvez voir un bon exemple simple de </span></span>  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> et (<a href="https://mdn.github.io/learning-area/accessibility/css/table-css.html">en direct</a>).</p>

<p><span class="tlid-translation translation"><span title="">En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse.</span> <span title="">Il est judicieux de vous assurer que les en-têtes de table se démarquent </span></span> (<span class="tlid-translation translation"><span title="">normalement en gras</span></span>), <span class="tlid-translation translation"><span title="">et de zébrer les lignes via le pseudo-sélecteur <code>:nth-child(n) </code>pour faciliter la lecture.</span></span></p>

<h3 id="Couleur_et_contraste_de_couleur"><span class="tlid-translation translation"><span title="">Couleur et contraste de couleur</span></span></h3>

<p><span class="tlid-translation translation"><span title="">Lorsque vous choisissez un jeu de couleurs pour votre site web, assurez-vous que la couleur du texte </span></span><span class="tlid-translation translation"><span title="">contraste bien avec la couleur de fond</span></span>. <span class="tlid-translation translation"><span title="">Votre design peut sembler agréable, mais cela n’est pas bon si les personnes malvoyantes, par exemple atteintes de daltonisme, ne peuvent pas lire votre contenu.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes.</span> <span title="">Il existe un certain nombre d’outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d’arrière-plan afin de les vérifier.</span> <span title="">Par exemple, le</span></span><span class="tlid-translation translation"><span title=""> </span></span><a href="https://webaim.org/resources/contrastchecker/">vérificateur de contraste de couleur</a> du WebAIM est <span class="tlid-translation translation"><span title="">simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs.</span></span></p>

<div class="note">
<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">Un taux de contraste élevé permettra également à toute personne utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, tel qu'exposé à la lumière du soleil</span></span>.</p>
</div>

<p><span class="tlid-translation translation"><span title="">Un autre conseil est de ne pas compter uniquement sur la couleur pour les panneaux / informations, car cela ne sera pas bon pour ceux qui ne peuvent pas voir la couleur.</span> <span title="">Au lieu de marquer les champs de formulaire obligatoires en rouge, par exemple, marquez-les d'un astérisque et en rouge.</span></span></p>

<h3 id="Cacher_des_choses"><span class="tlid-translation translation"><span title="">Cacher des choses</span></span></h3>

<p><span class="tlid-translation translation"><span title="">Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps.</span> <span title="">Par exemple, dans notre </span></span><a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Exemple de boîte d'information à onglets</a> (voir notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">code source</a>), <span class="tlid-translation translation"><span title="">nous avons trois panneaux d’informations, mais nous les</span></span> <a href="/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement">positionnons</a> <span class="tlid-translation translation"><span title="">les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi</span> <span title="">accessible au clavier – vous pouvez également utiliser <kbd>Tab</kbd> et <kbd>Entrée</kbd> pour les sélectionner)</span></span>.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p>

<p><span class="tlid-translation translation"><span title="">Les utilisateurs de lecteur d’écran ne s’inquiètent de rien. Ils sont satisfaits du contenu tant que l’ordre des sources est logique et ils peuvent tout comprendre.</span> <span title="">Le positionnement absolu (tel qu'utilisé dans cet exemple) est généralement considéré comme l'un des meilleurs mécanismes permettant de masquer un contenu pour obtenir un effet visuel, car il n'empêche pas les lecteurs d'écran d'y accéder.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Par contre, vous ne devriez pas utiliser</span></span> {{cssxref("visibility")}}<code>:hidden</code> ou {{cssxref("display")}}<code>:none</code>, <span class="tlid-translation translation"><span title="">car ils masquent le contenu des lecteurs d'écran s</span><span title="">auf si vous souhaitez que ce contenu leur soit masqué.</span></span></p>

<div class="note">
<p><strong>Note </strong>: <span class="subtitle"><a href="https://webaim.org/techniques/css/invisiblecontent/">Contenu invisible juste pour les utilisateurs de lecteur d'écran</a> </span> <span class="tlid-translation translation"><span title="">contient beaucoup plus de détails utiles concernant ce sujet.</span></span></p>
</div>

<h3 id="Accepter_que_les_utilisateurs_puissent_remplacer_les_styles"><span class="tlid-translation translation"><span title="">Accepter que les utilisateurs puissent remplacer les styles</span></span></h3>

<h4 id="Acceptez_que_les_utilisateurs_puissent_remplacer_vos_styles"><span class="tlid-translation translation"><span title="">Acceptez que les utilisateurs puissent remplacer vos style</span></span>s</h4>

<p><span class="tlid-translation translation"><span title="">Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple :</span></span></p>

<ul>
 <li><span class="tlid-translation translation"><span title="">Voir </span></span><a href="/fr/docs/Outils/Éditeur_de_style">Éditeur de Style</a> <span class="tlid-translation translation"><span title="">pour un guide utile expliquant comment le faire manuellement dans Firefox, et </span></span><a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/">Comment utiliser une feuille de style (css) personnalisée avec Internet Explorer</a> <span class="tlid-translation translation"><span title="">par Adrian Gordon pour</span> <span title="">les instructions IE équivalentes (EN).</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Il est probablement plus facile de le faire en utilisant une extension, par exemple l’extension Stylus est disponible pour</span></span> <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>, <a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>, <a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a>, et <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>.</li>
</ul>

<p><span class="tlid-translation translation"><span title="">Les utilisateurs peuvent le faire pour diverses raisons.</span> <span title="">Un utilisateur malvoyant peut vouloir agrandir le texte de tous les sites Web qu’il visite, ou un utilisateur présentant un déficit de couleur grave peut vouloir afficher tous les sites Web dans des couleurs très contrastées, faciles à lire.</span> <span title="">Quel que soit le besoin, vous devriez être à l'aise avec cela et rendre vos conceptions suffisamment flexibles pour que de tels changements fonctionnent dans votre conception.</span> <span title="">Par exemple, vous voudrez peut-être vous assurer que votre zone de contenu principale peut gérer un texte plus volumineux (le défilement commencera peut-être pour permettre à tout le monde de le voir), et ne le cachera pas ou ne sera pas complètement interrompu.</span></span></p>

<h2 id="JavaScript">JavaScript</h2>

<p><span class="tlid-translation translation"><span title="">JavaScript peut également compromettre l’accessibilité, selon son utilisation.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Le JavaScript moderne est un langage puissant, et nous pouvons faire beaucoup de choses avec cela de nos jours, du contenu simple et des mises à jour d'interface utilisateur aux jeux 2D et 3D à part entière.</span> <span title="">Aucune règle ne stipule que tout le contenu doit être accessible à 100% à toutes les personnes. Vous devez simplement faire ce que vous pouvez et rendre vos applications aussi accessibles que possible.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Le contenu et les fonctionnalités simples sont facilement accessibles – texte, images, tableaux, formulaires et bouton-poussoir activant des fonctions.</span> <span title="">Comme nous l'avons vu dans notre article</span></span> <a href="/fr/docs/Apprendre/a11y/HTML">HTML : une bonne base pour l'accessibilité</a>, <span class="tlid-translation translation"><span title=""> les principales considérations sont les suivantes :</span></span></p>

<ul>
 <li><span class="tlid-translation translation"><span title="">Bonne sémantique : Utiliser le bon élément pour le bon travail.</span> <span title="">Par exemple, assurez-vous que vous utilisez les en-têtes et les paragraphes, et les éléments</span></span> {{htmlelement("button")}} et {{htmlelement("a")}}.</li>
 <li><span class="tlid-translation translation"><span title="">S'assurer que le contenu est disponible sous forme de texte, soit directement sous forme de contenu textuel, soit par un libellé</span></span> <span class="tlid-translation translation"><span title="">pour des éléments</span></span> <code>&lt;form&gt;</code> soit par <a href="/fr/docs/Apprendre/a11y/HTML#Alternatives_textuelles">textes par défaut</a> <span class="tlid-translation translation"><span title="">pour les images.</span></span></li>
</ul>

<p><span class="tlid-translation translation"><span title="">Nous avons également examiné un exemple d'utilisation de JavaScript pour intégrer des fonctionnalités là où il manque – voir </span></span><a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">Remettre l'accessibilité au clavier</a>. <span class="tlid-translation translation"><span title="">Ce n'est pas l'idéal – vous devez utiliser le bon élément pour le bon travail – mais cela montre que c'est possible dans des situations où, pour une raison quelconque, vous ne pouvez pas contrôler le balisage utilisé.</span> <span title="">Un autre moyen d'améliorer l'accessibilité pour les widgets non sémantiques reposant sur JavaScript consiste à utiliser WAI-ARIA pour fournir une sémantique supplémentaire aux utilisateurs de lecteurs d'écran.</span> <span title="">Le prochain article couvrira également cela en détail.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Les fonctionnalités complexes telles que les jeux 3D ne sont pas si faciles à rendre accessibles – un jeu 3D complexe créé à l'aide de </span></span><a href="/fr/docs/Web/API/WebGL_API">L'API WebGL : graphismes 2D et 3D pour le web</a> <span class="tlid-translation translation"><span title="">sera rendu sur un élément</span></span> {{htmlelement("canvas")}}, <span class="tlid-translation translation"><span title="">qui n'a pour l'instant aucune possibilité de fournir</span> <span title="">textes alternatifs ou autres informations à utiliser par les utilisateurs malvoyants.</span> <span title="">On peut soutenir qu’un tel jeu ne compte pas vraiment ce groupe de personnes dans son public cible principal, et il serait déraisonnable de s’attendre à ce que vous le rendiez accessible à 100% aux aveugles, quelle que soit l’implantation des</span></span> <a href="/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">contrôles clavier</a> faite <span class="tlid-translation translation"><span title="">pour qu'il soit utilisable par les utilisateurs sans souris. De plus, rendez le jeu de couleurs suffisamment contrasté pour pouvoir rendre le jeu vidéo utilisable par ceux qui ont des déficiences de la perception des couleurs.</span></span></p>

<h3 id="Le_problème_avec_trop_de_JavaScript"><span class="tlid-translation translation"><span title="">Le problème avec trop de JavaScript</span></span></h3>

<p><span class="tlid-translation translation"><span title="">Le problème survient souvent lorsque les utilisateurs se fient trop à JavaScript.</span> <span title="">Parfois, vous voyez un site Web où tout a été fait avec JavaScript – le code HTML a été généré par JavaScript, le CSS a été généré par JavaScript, etc. Ceci présente toutes sortes de problèmes d'accessibilité et d'autres choses qui y sont associées, donc ce n'est pas conseillé</span><span title="">.</span></span></p>

<p><span class="tlid-translation translation"><span title="">En plus d'utiliser le bon élément pour le bon travail, vous devez également vous assurer que vous utilisez la bonne technologie pour le bon travail !</span> <span title="">Réfléchissez bien pour savoir si vous avez besoin de cette boîte d’informations 3D brillante reposant sur JavaScript, ou si un texte ordinaire avec du CSS conviendrait.</span> <span title="">Réfléchissez bien pour savoir si vous avez besoin d'un widget de formulaire non standard complexe ou d'une saisie de texte.</span> <span title="">Et ne générez pas tout votre contenu HTML en utilisant JavaScript si possible.</span></span></p>

<h3 id="Le_garder_discret"><span class="tlid-translation translation"><span title="">Le garder discret</span></span></h3>

<p><span class="tlid-translation translation"><span title="">Lors de la création de votre contenu, gardez à l'esprit </span></span> <span class="tlid-translation translation"><span title="">l'idée d'un</span></span> <strong><span class="tlid-translation translation"><span title="">JavaScript</span></span> discret, en retrait</strong><span class="tlid-translation translation"><span title="">.</span> <span title="">JavaScript est discret quand il est utilisé pour améliorer des fonctionnalités, il devient gênant quand ces mêmes fonctionnalités sont développées entièrement en JavaScript. Les fonctions de base de votre page devraient idéalement tourner sans JavaScript, même s’il est évident que ce n’est pas toujours possible.</span> La règle est d'utiliser <span title="">lorsque cela est possible les fonctionnalités intégrées au navigateur.</span></span></p>

<p><span class="tlid-translation translation"><span title="">De bons exemples d'utilisation de JavaScript discret incluent :</span></span></p>

<ul>
 <li><span class="tlid-translation translation"><span title="">Fournir une validation de formulaire côté client, qui alerte les utilisateurs en cas de problèmes liés aux entrées de formulaire, sans avoir à attendre que le serveur vérifie les données.</span> <span title="">S'il n'est pas disponible, le formulaire fonctionnera toujours, mais la validation risque d'être plus lente.</span></span></li>
 <li><span class="tlid-translation translation"><span title="">Fournir des commandes personnalisées pour les </span></span>  <code>&lt;video&gt;</code> <span class="tlid-translation translation"><span title="">HTML5 accessibles aux utilisateurs uniquement au clavier, ainsi qu'un lien direct vers la vidéo pouvant être utilisé pour y accéder si JavaScript n'est pas disponible (les commandes du navigateur</span></span> <code>&lt;video&gt;</code> <span class="tlid-translation translation"><span title="">par défaut ne sont pas des touches</span> <span title="">accessibles dans la plupart des navigateurs).</span></span></li>
</ul>

<p id="Client-side_form_validation"><span class="tlid-translation translation"><span title="">Par exemple, nous avons écrit un exemple de validation de formulaire côté client rapide</span></span> — voir <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (<span class="tlid-translation translation"><span title="">voir aussi la </span></span><a href="https://mdn.github.io/learning-area/accessibility/css/form-validation.html">démonstration en direct</a>). <span class="tlid-translation translation"><span title="">Ici, vous verrez un formulaire simple.</span> <span title="">Lorsque vous essayez de soumettre le formulaire avec un ou les deux champs vides, l'envoi échoue et un message d'erreur s'affiche pour vous indiquer ce qui ne va pas.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Ce type de validation de formulaire est discret </span></span>— <span class="tlid-translation translation"><span title="">vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client</span><span title=""> (en désactivant JavaScript dans le navigateur, par exemple).</span> <span title="">La validation côté client est toujours très utile pour signaler les erreurs </span></span>—<span class="tlid-translation translation"><span title=""> les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page.</span> <span title="">C'est un avantage certain en termes de convivialité.</span></span></p>

<div class="note">
<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">La validation côté serveur n'a pas été implémentée dans cette simple démonstration</span></span>.</p>
</div>

<p><span class="tlid-translation translation"><span title="">Nous avons également rendu cette validation de formulaire assez accessible.</span> <span title="">Nous avons utilisé des éléments</span></span> {{htmlelement("label")}} <span class="tlid-translation translation"><span title="">pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure :</span></span></p>

<pre class="brush: html">&lt;label for="name"&gt; <span class="tlid-translation translation"><span title="">Entrez votre nom</span></span> :&lt;/label&gt;
&lt;input type="text" name="name" id="name"&gt;</pre>

<p><span class="tlid-translation translation"><span title="">Nous ne faisons la validation qu'une fois le formulaire soumis </span></span>—<span class="tlid-translation translation"><span title=""> ceci afin de ne pas mettre à jour l'interface utilisateur trop souvent et de ne pas perturber les utilisateurs du lecteur d'écran (et éventuellement d'autres) :</span></span></p>

<pre class="brush: js">form.onsubmit = validate;

function validate(e) {
  errorList.innerHTML = '';
  for(var i = 0; i &lt; formItems.length; i++) {
    var testItem = formItems[i];
    if(testItem.input.value === '') {
      errorField.style.left = '360px';
      createLink(testItem);
    }
  }

  if(errorList.innerHTML !== '') {
    e.preventDefault();
  }
}</pre>

<div class="note">
<p><strong>Note </strong>:  <span class="tlid-translation translation"><span title="">Dans cet exemple, nous masquons et montrons la boîte de message d'erreur en utilisant le positionnement absolu plutôt qu'une autre méthode telle que la visibilité ou l'affichage, car cela n'empêche pas le lecteur d'écran de pouvoir lire le contenu de celui-ci</span></span>.</p>
</div>

<p><span class="tlid-translation translation"><span title="">La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres).</span> <span title="">Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie</span></span> (<code>if(testItem.input.value === '')</code>).</p>

<p><span class="tlid-translation translation"><span title="">Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis.</span> <span title="">S'il y a des erreurs </span></span> (<code>if(errorList.innerHTML !== '')</code>)  <span class="tlid-translation translation"><span title="">nous arrêtons la soumission du formulaire</span></span> ( <span class="tlid-translation translation"><span title="">à l'aide de</span></span><a href="/fr/docs/Web/API/Event/preventDefault"> event.preventDefault()</a>), <span class="tlid-translation translation"><span title="">et affichons tous les messages d'erreur créés (voir ci-dessous).</span> <span title="">Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Pour chaque entrée pour laquelle aucune valeur n'a été renseignée lors de la soumission du formulaire, nous créons un élément de liste avec un lien et l'insérons dans la liste</span></span> <code>errorList</code>.</p>

<pre class="brush: js">function createLink(testItem) {
  var listItem = document.createElement('li');
  var anchor = document.createElement('a');
  anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.';
  anchor.href = '#' + testItem.input.name;
  anchor.onclick = function() {
    testItem.input.focus();
  };
  listItem.appendChild(anchor);
  errorList.appendChild(listItem);
}</pre>

<p><span class="tlid-translation translation"><span title="">Chaque lien a un double objectif </span></span>—<span class="tlid-translation translation"><span title=""> il vous dit quelle est l’erreur, vous pouvez aussi cliquer dessus / l’activer pour passer directement à l’élément d’entrée en question et corriger votre saisie.</span></span></p>

<div class="note">
<p><strong>Note </strong>:  <span class="tlid-translation translation"><span title="">La partie </span></span> <code>focus()</code>  <span class="tlid-translation translation"><span title="">de cet exemple est un peu délicate.</span> <span title="">Chrome et Edge (et les versions plus récentes d'IE) focalisent l'élément lorsque l'utilisateur clique sur le lien, sans avoir besoin du bloc </span></span> <code>onclick</code>/<code>focus()</code>.  <span class="tlid-translation translation"><span title="">Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc</span></span> <code>onclick</code>/<code>focus()</code>  <span class="tlid-translation translation"><span title="">pour le focaliser.</span> <span title="">Firefox ne focalise pas les entrées correctement dans ce contexte, les utilisateurs de Firefox ne peuvent donc pas en profiter pour le moment (bien que tout le reste fonctionne bien).</span> <span title="">Le problème de Firefox devrait bientôt être résolu - des efforts sont en cours pour donner la parité des comportements de Firefox aux autres navigateurs (voir</span></span> {{bug(277178)}}).</p>
</div>

<p><span class="tlid-translation translation"><span title="">De plus, le champ</span></span> <code>errorField</code> <span class="tlid-translation translation"><span title="">est placé en haut de l'ordre source (bien qu'il soit positionné différemment dans UI à l'aide de CSS), ce qui signifie que les utilisateurs peuvent savoir exactement ce qui ne va pas avec les soumissions de formulaire et accéder aux éléments d'entrée en question</span> <span title="">en remontant au début de la page</span></span></p>

<p><span class="tlid-translation translation"><span title="">Pour terminer, nous avons utilisé certains attributs de WAI-ARIA dans notre démonstration pour résoudre les problèmes d’accessibilité causés par des zones de contenu constamment mises à jour sans rechargement de page (les lecteurs d’écran ne le détectent pas et n'en avertissent pas les utilisateurs par défaut) :</span></span></p>

<pre>&lt;div class="errors" role="alert" aria-relevant="all"&gt;
  &lt;ul&gt;
  &lt;/ul&gt;
&lt;/div&gt;</pre>

<p><span class="tlid-translation translation"><span title="">Nous expliquerons ces attributs dans notre prochain article, qui couvre</span></span> <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> <span class="tlid-translation translation"><span title="">de manière beaucoup plus détaillée.</span></span></p>

<div class="note">
<p><strong>Note </strong>:  <span class="tlid-translation translation"><span title="">Certains d'entre vous penseront probablement au fait que les formulaires HTML5 ont des mécanismes de validation intégrés tels que les attributs</span></span> <code>required</code>, <code>min</code>/<code>minlength</code>, et <code>max</code>/<code>maxlength</code>  (voir {{htmlelement("input")}} <span class="tlid-translation translation"><span title="">référence d'élément pour plus d'informations).</span> <span title="">Nous avons fini par ne pas les utiliser dans la démo, car la prise en charge multi-navigateurs est inégale (par exemple, IE10 et versions ultérieures, pas de prise en charge de Safari).</span></span></p>
</div>

<div class="note">
<p><strong>Note </strong>: WebAIM's <a href="https://webaim.org/techniques/formvalidation/">Validation de formulaire et récupération d'erreur utilisables et accessibles (EN)</a> <span class="tlid-translation translation"><span title="">fournit des informations supplémentaires utiles sur la validation de formulaire accessible.</span></span></p>
</div>

<h3 id="Autres_problèmes_daccessibilité_JavaScript"><span class="tlid-translation translation"><span title="">Autres problèmes d'accessibilité JavaScript</span></span></h3>

<p><span class="tlid-translation translation"><span title="">Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité.</span> Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente<span title="">.</span></span></p>

<h4 id="Événements_spécifiques_à_la_souris"><span class="tlid-translation translation"><span title="">Événements spécifiques à la souris</span></span></h4>

<p><span class="tlid-translation translation"><span title="">Comme vous le savez peut-être, la plupart des interactions utilisateur sont implémentées dans JavaScript côté client à l'aide de gestionnaires d'événements, ce qui nous permet d'exécuter des fonctions en réponse à certains événements.</span> <span title="">Certains événements peuvent avoir des problèmes d'accessibilité.</span> <span title="">L'exemple principal que vous rencontrerez concerne des événements spécifiques à la souris tels que  </span></span> <a href="/fr/docs/Web/Events/mouseover"> mouseover</a>, <a href="/fr/docs/Web/Events/mouseout"> mouseout</a>, <a href="/fr/docs/Web/Events/dblclick"> dblclick</a>, <span class="tlid-translation translation"><span title="">etc. Les fonctionnalités qui s'exécutent en réponse à ces événements ne seront pas accessibles à l'aide d'autres mécanismes, tels que les contrôles du clavier.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Pour résoudre de tels problèmes, vous devez doubler ces événements avec des événements similaires pouvant être activés par d'autres moyens (appelés gestionnaires d'événements indépendants du périphérique)</span></span> —<a href="/fr/docs/Web/Events/focus">focus</a> et <a href="/fr/docs/Web/Events/blur">blur (event)</a> <span class="tlid-translation translation"><span title="">fourniraient une accessibilité aux utilisateurs de clavier.</span></span> </p>

<p><span class="tlid-translation translation"><span title="">Regardons un exemple qui illustre cela.</span> <span title="">Considérons une image miniature ; quand elle est survolée ou ciblée (comme sur un catalogue de produits de commerce électronique) une version plus grande de l’image s'affiche.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Nous avons créé un exemple très simple, que vous pouvez trouver sur </span></span><a href="https://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">Exemple d'événements de souris et de clavier</a> (<span class="tlid-translation translation"><span title="">voir aussi le</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">code source</a>). <span class="tlid-translation translation"><span title="">Le code comporte deux fonctions qui affichent et cachent l'image agrandie ;</span> <span title="">ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements :</span></span></p>

<pre class="brush: js">imgThumb.onmouseover = showImg;
imgThumb.onmouseout = hideImg;

imgThumb.onfocus = showImg;
imgThumb.onblur = hideImg;</pre>

<p><span class="tlid-translation translation"><span title="">Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement.</span> <span title="">Cela ne nous permettra toutefois pas d'accéder à la vue agrandie à l'aide du clavier ; pour cela, nous avons inclus les deux dernières lignes, qui exécutent les fonctions lorsque l'image est nette et floue (lorsque la mise au point s'arrête).</span> <span title="">Cela peut être fait en tapant sur l'image, car nous avons inclus</span></span>  <code>tabindex="0"</code> <span class="tlid-translation translation"><span title="">dessus.</span></span></p>

<p><span class="tlid-translation translation"><span title="">L'événement </span></span><a href="/fr/docs/Web/API/Element/click_event">click</a><span class="tlid-translation translation"><span title=""> est intéressant </span></span>—<span class="tlid-translation translation"><span title=""> cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement </span></span><a href="/fr/docs/Web/API/GlobalEventHandlers/onclick">element.onclick</a>  <span class="tlid-translation translation"><span title="">après avoir  pressé <kbd>Entrée</kbd>  sur un lien ou un élément de formulaire ciblé, ou lorsqu'un tel élément est touché sur un écran tactile</span><span title="">.</span> <span title="">Cependant, cela ne fonctionne pas par défaut lorsque vous autorisez un événement à ne pas être mis au point par défaut à l'aide de tabindex. Dans ce cas, vous devez détecter précisément le moment exact où cette touche est enfoncée (voir</span></span> <a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">Remettre l'accessibilité au clavier</a>).</p>

<h2 id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2>

<p><span class="tlid-translation translation"><span title="">Nous espérons que cet article vous a fourni beaucoup de détails et de compréhension sur les problèmes d'accessibilité liés à l'utilisation de CSS et de JavaScript sur les pages Web.</span></span></p>

<p><span class="tlid-translation translation"><span title="">Ensuite, WAI-ARIA !</span></span></p>

<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div>

<div>
<h2 id="Dans_ce_module"><span class="tlid-translation translation"><span title="">Dans ce module</span></span></h2>

<ul>
 <li><a href="/fr/docs/Apprendre/a11y/What_is_accessibility">Qu'est ce que l'accessibilité?</a></li>
 <li><a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">HTML : une bonne base pour l'accessibilité</a></li>
 <li><a href="/fr/docs/Apprendre/a11y/CSS_and_JavaScript">Meilleures pratiques d'accessibilité CSS et JavaScript</a></li>
 <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li>
 <li><a href="/fr/docs/Apprendre/a11y/Multimedia">Accessible multimedia</a></li>
 <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li>
 <li><a href="/fr/docs/Apprendre/a11y/Accessibility_troubleshooting">Évaluation: dépannage d'accessibilité</a></li>
</ul>
</div>