diff options
Diffstat (limited to 'files/fr/learn/accessibility/css_and_javascript/index.html')
| -rw-r--r-- | files/fr/learn/accessibility/css_and_javascript/index.html | 254 |
1 files changed, 126 insertions, 128 deletions
diff --git a/files/fr/learn/accessibility/css_and_javascript/index.html b/files/fr/learn/accessibility/css_and_javascript/index.html index 06b093fa74..43455aa4be 100644 --- a/files/fr/learn/accessibility/css_and_javascript/index.html +++ b/files/fr/learn/accessibility/css_and_javascript/index.html @@ -19,51 +19,51 @@ original_slug: Apprendre/a11y/CSS_and_JavaScript <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> +<p>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. 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.</p> -<table class="learn-box standard-table"> +<table class="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> + <td>Connaissances informatiques de base, compréhension de base de HTML, CSS et JavaScript, et compréhension de <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> + <th scope="row">Objectif :</th> + <td>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.</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> +<h2 id="CSS_et_JavaScript_des_technologies_accessibles">CSS et JavaScript, des technologies accessibles ?</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> +<p>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. 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.</p> <h2 id="CSS">CSS</h2> -<p><span class="tlid-translation translation"><span title="">Commençons par regarder le CSS.</span></span></p> +<p>Commençons par regarder le CSS.</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> +<h3 id="Sémantique_correcte_et_attentes_de_lutilisateur">Sémantique correcte et attentes de l'utilisateur</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>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. Comme nous l’avons souvent mentionné dans notre article <a href="/fr/docs/Apprendre/a11y/HTML"> HTML : une bonne base pour l'accessibilité</a>, vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié. 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. L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs — 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.</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>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. 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.</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> +<p>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. Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte.</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> +<h4 id="Structure_du_contenu_du_texte_standard">Structure du contenu du texte "standard"</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> +<p>Titres, paragraphes, listes — le contenu de texte de base de votre page :</p> -<pre class="brush: html"><h1><span class="tlid-translation translation"><span title="">En-têtes</span></span></h1> +<pre class="brush: html"><h1>En-têtes</h1> -<p><span class="tlid-translation translation"><span title="">paragraphes</span></span></p> +<p>paragraphes</p> <ul> - <li><span class="tlid-translation translation"><span title="">Ma liste</span></span></li> - <li><span class="tlid-translation translation"><span title="">a deux éléments</span></span>.</li> + <li>Ma liste</li> + <li>a deux éléments.</li> </ul></pre> -<p><span class="tlid-translation translation"><span title="">Quelques styles CSS typiques pourraient ressembler à ceci :</span></span></p> +<p>Quelques styles CSS typiques pourraient ressembler à ceci :</p> <pre class="brush: css">h1 { font-size: 5rem; @@ -74,56 +74,54 @@ p, li { font-size: 1.6rem; }</pre> -<p><span class="tlid-translation translation"><span title="">Vous devriez </span></span>:</p> +<p>Vous devriez :</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>Sélectionnez une taille de police, une hauteur de ligne, un espacement interlettres, etc. raisonnables pour que votre texte soit logique, lisible et agréable à lire.</li> + <li>Le style par défaut pour les titres, dans une taille plus grande et en gras les distingue du texte principal.</li> + <li>Vos listes devraient ressembler à des listes.</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> +<p>Voir <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> pour plus d'informations.</p> -<h4 id="Texte_mis_en_emphase"><span class="tlid-translation translation"><span title="">Texte mis en emphase</span></span></h4> +<h4 id="Texte_mis_en_emphase">Texte mis en emphase</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><em></code> :</span></span></p> +<p>On met en avant une portion de texte grâce au balises <em>inline</em> <code><em></code> :</p> -<pre class="brush: html"><p> <span class="tlid-translation translation"><span title="">L'eau est</span></span> <em> <span class="tlid-translation translation"><span title="">très chaud</span></span>e </em>.</p> +<pre class="brush: html"><p> L'eau est <em> très chaude </em>.</p> -<p> <span class="tlid-translation translation"><span title="">Les gouttelettes d’eau accumulées sur les surfaces s’appellent</span></span> <strong>condensation</strong>.</p></pre> +<p> Les gouttelettes d’eau accumulées sur les surfaces s’appellent <strong>condensation</strong>.</p></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> +<p>Vous voudrez peut-être ajouter quelques couleurs simples à votre texte mis en importance :</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> +<p>Cependant, vous aurez rarement besoin de styliser des éléments d’emphase de manière significative. 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. Pour mettre des contenus en avant de manière efficace, voir <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> +<h4 id="Les_abréviations">Les abréviations</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> +<p>Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée :</p> -<pre class="brush: html"><p> <span class="tlid-translation translation"><span title="">Le contenu web est marqué à l'aide de</span></span> <abbr title="Hypertext Markup Language">HTML</abbr>.</p></pre> +<pre class="brush: html"><p> Le contenu web est marqué à l'aide de <abbr title="Hypertext Markup Language">HTML</abbr>.</p></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> +<p>Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments :</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> +<p>Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue. Pour plus d'informations sur les abréviations, voir <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> +<h4 id="Liens">Liens</h4> -<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> +<p>Hyperliens la façon dont vous accédez à de nouveaux endroits sur le Web :</p> -<pre class="brush: html"><p> <span class="tlid-translation translation"><span title="">Visiter la</span></span> <a href="https://www.mozilla.org"> <span class="tlid-translation translation"><span title="">Page d'accueil de Mozilla</span></span> </a>.</p></pre> +<pre class="brush: html"><p> Visiter la <a href="https://www.mozilla.org"> Page d'accueil de Mozilla </a>.</p></pre> -<p><span class="tlid-translation translation"><span title="">Un style de lien très simple est présenté ci-dessous :</span></span></p> +<p>Un style de lien très simple est présenté ci-dessous :</p> <pre class="brush: css">a { color: #ff0000; @@ -139,124 +137,124 @@ a:active { 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>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). 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é. L'image suivante montre la surbrillance dans Firefox (contour en pointillé) et Chrome (contour bleu) :</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="focus-highlight-firefox.png"></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><img alt="" src="focus-highlight-chrome.png"></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> +<p>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. 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 — ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier.</p> -<h4 id="Éléments_form"><span class="tlid-translation translation"><span title="">Éléments form</span></span></h4> +<h4 id="Éléments_form">Éléments form</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> +<p>Éléments permettant aux utilisateurs de saisir des données sur des sites web :</p> <pre class="brush: html"><div> - <label for="name"><span class="tlid-translation translation"><span title="">Entrez votre nom</span></span></label> + <label for="name">Entrez votre nom</label> <input type="text" id="name" name="name"> </div></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>Vous pouvez voir de bons exemples de CSS dans notre exemple <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>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.</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> +<p>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). 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.</p> -<h4 id="Tableaux"><span class="tlid-translation translation"><span title="">Tableaux</span></span></h4> +<h4 id="Tableaux">Tableaux</h4> -<p><span class="tlid-translation translation"><span title="">Tableaux pour la présentation des données tabulées</span></span>.</p> +<p>Tableaux pour la présentation des données tabulées.</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>Vous pouvez voir un bon exemple simple de <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> +<p>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. Il est judicieux de vous assurer que les en-têtes de table se démarquent (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur <code>:nth-child(n) </code>pour faciliter la lecture.</p> -<h3 id="Couleur_et_contraste_de_couleur"><span class="tlid-translation translation"><span title="">Couleur et contraste de couleur</span></span></h3> +<h3 id="Couleur_et_contraste_de_couleur">Couleur et contraste de couleur</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>Lorsque vous choisissez un jeu de couleurs pour votre site web, assurez-vous que la couleur du texte contraste bien avec la couleur de fond. 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.</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> +<p>Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes. 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. Par exemple, le <a href="https://webaim.org/resources/contrastchecker/">vérificateur de contraste de couleur</a> du WebAIM est simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs.</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> +<p><strong>Note :</strong> 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.</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> +<p>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. Au lieu de marquer les champs de formulaire obligatoires en rouge, par exemple, marquez-les d'un astérisque et en rouge.</p> -<h3 id="Cacher_des_choses"><span class="tlid-translation translation"><span title="">Cacher des choses</span></span></h3> +<h3 id="Cacher_des_choses">Cacher des choses</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>Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps. Par exemple, dans notre <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>), nous avons trois panneaux d’informations, mais nous les <a href="/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement">positionnons</a> les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi accessible au clavier – vous pouvez également utiliser <kbd>Tab</kbd> et <kbd>Entrée</kbd> pour les sélectionner).</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><img alt="" src="tabbed-info-box.png"></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>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. 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.</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> +<p>Par contre, vous ne devriez pas utiliser {{cssxref("visibility")}}<code>:hidden</code> ou {{cssxref("display")}}<code>:none</code>, car ils masquent le contenu des lecteurs d'écran sauf si vous souhaitez que ce contenu leur soit masqué.</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> +<p><strong>Note :</strong> <a href="https://webaim.org/techniques/css/invisiblecontent/">Contenu invisible juste pour les utilisateurs de lecteur d'écran</a> contient beaucoup plus de détails utiles concernant ce sujet.</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> +<h3 id="Accepter_que_les_utilisateurs_puissent_remplacer_les_styles">Accepter que les utilisateurs puissent remplacer les styles</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> +<h4 id="Acceptez_que_les_utilisateurs_puissent_remplacer_vos_styles">Acceptez que les utilisateurs puissent remplacer vos styles</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> +<p>Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple :</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> + <li>Voir <a href="/fr/docs/Outils/Éditeur_de_style">Éditeur de Style</a> pour un guide utile expliquant comment le faire manuellement dans Firefox, et <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> par Adrian Gordon pour les instructions IE équivalentes (EN).</li> + <li>Il est probablement plus facile de le faire en utilisant une extension, par exemple l’extension Stylus est disponible pour <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> +<p>Les utilisateurs peuvent le faire pour diverses raisons. 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. 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. 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.</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>JavaScript peut également compromettre l’accessibilité, selon son utilisation.</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>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. 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.</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> +<p>Le contenu et les fonctionnalités simples sont facilement accessibles – texte, images, tableaux, formulaires et bouton-poussoir activant des fonctions. Comme nous l'avons vu dans notre article <a href="/fr/docs/Apprendre/a11y/HTML">HTML : une bonne base pour l'accessibilité</a>, les principales considérations sont les suivantes :</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><form></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> + <li>Bonne sémantique : Utiliser le bon élément pour le bon travail. Par exemple, assurez-vous que vous utilisez les en-têtes et les paragraphes, et les éléments {{htmlelement("button")}} et {{htmlelement("a")}}.</li> + <li>S'assurer que le contenu est disponible sous forme de texte, soit directement sous forme de contenu textuel, soit par un libellé pour des éléments <code><form></code> soit par <a href="/fr/docs/Apprendre/a11y/HTML#Alternatives_textuelles">textes par défaut</a> pour les images.</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>Nous avons également examiné un exemple d'utilisation de JavaScript pour intégrer des fonctionnalités là où il manque – voir <a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">Remettre l'accessibilité au clavier</a>. 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é. 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. Le prochain article couvrira également cela en détail.</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> +<p>Les fonctionnalités complexes telles que les jeux 3D ne sont pas si faciles à rendre accessibles – un jeu 3D complexe créé à l'aide de <a href="/fr/docs/Web/API/WebGL_API">L'API WebGL : graphismes 2D et 3D pour le web</a> sera rendu sur un élément {{htmlelement("canvas")}}, qui n'a pour l'instant aucune possibilité de fournir textes alternatifs ou autres informations à utiliser par les utilisateurs malvoyants. 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 <a href="/fr/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">contrôles clavier</a> faite 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.</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> +<h3 id="Le_problème_avec_trop_de_JavaScript">Le problème avec trop de JavaScript</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>Le problème survient souvent lorsque les utilisateurs se fient trop à JavaScript. 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é.</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> +<p>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 ! 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. Réfléchissez bien pour savoir si vous avez besoin d'un widget de formulaire non standard complexe ou d'une saisie de texte. Et ne générez pas tout votre contenu HTML en utilisant JavaScript si possible.</p> -<h3 id="Le_garder_discret"><span class="tlid-translation translation"><span title="">Le garder discret</span></span></h3> +<h3 id="Le_garder_discret">Le garder discret</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>Lors de la création de votre contenu, gardez à l'esprit l'idée d'un <strong>JavaScript discret, en retrait</strong>. 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. La règle est d'utiliser lorsque cela est possible les fonctionnalités intégrées au navigateur.</p> -<p><span class="tlid-translation translation"><span title="">De bons exemples d'utilisation de JavaScript discret incluent :</span></span></p> +<p>De bons exemples d'utilisation de JavaScript discret incluent :</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><video></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><video></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> + <li>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. S'il n'est pas disponible, le formulaire fonctionnera toujours, mais la validation risque d'être plus lente.</li> + <li>Fournir des commandes personnalisées pour les <code><video></code> 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 <code><video></code> par défaut ne sont pas des touches accessibles dans la plupart des navigateurs).</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>Par exemple, nous avons écrit un exemple de validation de formulaire côté client rapide — voir <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (voir aussi la <a href="https://mdn.github.io/learning-area/accessibility/css/form-validation.html">démonstration en direct</a>). Ici, vous verrez un formulaire simple. 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.</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> +<p>Ce type de validation de formulaire est discret — 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 (en désactivant JavaScript dans le navigateur, par exemple). La validation côté client est toujours très utile pour signaler les erreurs — 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. C'est un avantage certain en termes de convivialité.</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> +<p><strong>Note :</strong> La validation côté serveur n'a pas été implémentée dans cette simple démonstration.</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> +<p>Nous avons également rendu cette validation de formulaire assez accessible. Nous avons utilisé des éléments {{htmlelement("label")}} 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 :</p> -<pre class="brush: html"><label for="name"> <span class="tlid-translation translation"><span title="">Entrez votre nom</span></span> :</label> +<pre class="brush: html"><label for="name"> Entrez votre nom :</label> <input type="text" name="name" id="name"></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> +<p>Nous ne faisons la validation qu'une fois le formulaire soumis — 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) :</p> <pre class="brush: js">form.onsubmit = validate; @@ -276,65 +274,65 @@ function validate(e) { }</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> +<p><strong>Note :</strong> 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.</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>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). Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie (<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>Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs (<code>if(errorList.innerHTML !== '')</code>) nous arrêtons la soumission du formulaire ( à l'aide de<a href="/fr/docs/Web/API/Event/preventDefault"> event.preventDefault()</a>), et affichons tous les messages d'erreur créés (voir ci-dessous). 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.</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> +<p>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 <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); + 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> +<p>Chaque lien a un double objectif — 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.</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> +<p><strong>Note :</strong> La partie <code>focus()</code> de cet exemple est un peu délicate. 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 <code>onclick</code>/<code>focus()</code>. Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc <code>onclick</code>/<code>focus()</code> pour le focaliser. 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). 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 {{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>De plus, le champ <code>errorField</code> 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 en remontant au début de la page</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> +<p>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) :</p> <pre><div class="errors" role="alert" aria-relevant="all"> <ul> </ul> </div></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> +<p>Nous expliquerons ces attributs dans notre prochain article, qui couvre <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> de manière beaucoup plus détaillée.</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> +<p><strong>Note :</strong> 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 <code>required</code>, <code>min</code>/<code>minlength</code>, et <code>max</code>/<code>maxlength</code> (voir {{htmlelement("input")}} référence d'élément pour plus d'informations). 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).</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> +<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> fournit des informations supplémentaires utiles sur la validation de formulaire accessible.</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> +<h3 id="Autres_problèmes_daccessibilité_JavaScript">Autres problèmes d'accessibilité JavaScript</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> +<p>Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité. Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente.</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> +<h4 id="Événements_spécifiques_à_la_souris">Événements spécifiques à la souris</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>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. Certains événements peuvent avoir des problèmes d'accessibilité. L'exemple principal que vous rencontrerez concerne des événements spécifiques à la souris tels que <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>, 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.</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>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) —<a href="/fr/docs/Web/Events/focus">focus</a> et <a href="/fr/docs/Web/Events/blur">blur (event)</a> fourniraient une accessibilité aux utilisateurs de clavier. </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>Regardons un exemple qui illustre cela. 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.</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> +<p>Nous avons créé un exemple très simple, que vous pouvez trouver sur <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> (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">code source</a>). Le code comporte deux fonctions qui affichent et cachent l'image agrandie ; ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements :</p> <pre class="brush: js">imgThumb.onmouseover = showImg; imgThumb.onmouseout = hideImg; @@ -342,28 +340,28 @@ 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>Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement. 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). Cela peut être fait en tapant sur l'image, car nous avons inclus <code>tabindex="0"</code> dessus.</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> +<p>L'événement <a href="/fr/docs/Web/API/Element/click_event">click</a> est intéressant — cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement <a href="/fr/docs/Web/API/GlobalEventHandlers/onclick">element.onclick</a> 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. 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 <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> +<h2 id="Résumé">Résumé</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>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.</p> -<p><span class="tlid-translation translation"><span title="">Ensuite, WAI-ARIA !</span></span></p> +<p>Ensuite, WAI-ARIA !</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> +<h2 id="Dans_ce_module">Dans ce module</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/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/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> |