diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-14 14:23:22 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-11-14 14:23:22 +0100 |
| commit | d596e86a4f13b04981f51d327af257b07e6d21c3 (patch) | |
| tree | 63473f4c84b99e13d900cdab5e5a844a1c359476 /files/fr/learn/accessibility | |
| parent | 55e694eab2e70941e979c2839aaca5c9ef8f3226 (diff) | |
| download | translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.tar.gz translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.tar.bz2 translated-content-d596e86a4f13b04981f51d327af257b07e6d21c3.zip | |
Prepare Learning Area section for Markdown conversion (#2738)
* Remove summary, spans and fonts
* Remove notranslate class
* Remove ids other than headings
* Remove hidden blocks
* fix livesample call with exclamation mark
* fix livesample call with exclamation mark
* fix livesample call with exclamation mark
* fix livesample call with exclamation mark
* Fix notes
* Remove code in pre, sub/sup and some styles
* fix dls
* fix absolute / english links
* fix figures and others
* fix other issues from report
* Fix other one-off issues excl. imgs
* Fix images
* Fixes #2842 for Learning area
Diffstat (limited to 'files/fr/learn/accessibility')
9 files changed, 668 insertions, 695 deletions
diff --git a/files/fr/learn/accessibility/accessibility_troubleshooting/index.html b/files/fr/learn/accessibility/accessibility_troubleshooting/index.html index 54a4415545..4a9aea28fd 100644 --- a/files/fr/learn/accessibility/accessibility_troubleshooting/index.html +++ b/files/fr/learn/accessibility/accessibility_troubleshooting/index.html @@ -14,105 +14,96 @@ original_slug: Apprendre/a11y/Accessibility_troubleshooting <p>{{LearnSidebar}}<br> {{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p> -<p><span class="tlid-translation translation"><span title="">Dans l’évaluation de ce module, nous vous présentons un site simple, qui présente un certain nombre de problèmes d’accessibilité que vous devez diagnostiquer et résoudre.</span></span></p> +<p>Dans l’évaluation de ce module, nous vous présentons un site simple, qui présente un certain nombre de problèmes d’accessibilité que vous devez diagnostiquer et résoudre.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> - <th scope="row"><span class="tlid-translation translation"><span title="">Conditions préalables:</span></span></th> - <td><span class="tlid-translation translation"><span title="">Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de la</span></span>  <a href="/en-US/docs/Learn/Accessibility">previous articles in the course</a>.</td> + <th scope="row">Conditions préalables:</th> + <td>Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de la  <a href="/fr/docs/Learn/Accessibility">previous articles in the course</a>.</td> </tr> <tr> - <th scope="row"><span class="tlid-translation translation">Objectif:</span></th> - <td><span class="tlid-translation translation"><span title="">Tester les connaissances de base sur les principes fondamentaux d'accessibilité.</span></span></td> + <th scope="row">Objectif:</th> + <td>Tester les connaissances de base sur les principes fondamentaux d'accessibilité.</td> </tr> </tbody> </table> -<div class="text-wrap tlid-copy-target"> -<div class="result-shield-container tlid-copy-target"> -<div class="text-wrap tlid-copy-target"> -<h2 class="result-shield-container tlid-copy-target" id="Point_de_départ"><span class="tlid-translation translation"><span title="">Point de départ</span></span></h2> +<h2 id="Point_de_départ">Point de départ</h2> -<div class="result-shield-container tlid-copy-target"> </div> -</div> -</div> -</div> -<p><span class="tlid-translation translation"><span title="">Pour lancer cette évaluation, vous devez aller chercher le </span></span>  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">ZIP containing the files that comprise the example</a>. <span class="tlid-translation translation"><span title="">Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local</span></span></p> +<p>Pour lancer cette évaluation, vous devez aller chercher le  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">ZIP containing the files that comprise the example</a>. Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local</p> -<p><span class="tlid-translation translation"><span title="">Le site d'évaluation terminé devrait ressembler à ceci:</span></span></p> +<p>Le site d'évaluation terminé devrait ressembler à ceci:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p> +<p><img alt="" src="assessment-site-finished.png"></p> -<p><span class="tlid-translation translation"><span title="">Vous verrez quelques différences / problèmes avec l'affichage de l'état de départ de l'évaluation - ceci est principalement dû aux différences dans le balisage, ce qui cause des problèmes de style car le CSS n'est pas appliqué correctement.</span> <span title="">Ne vous inquiétez pas, vous allez résoudre ces problèmes dans les prochaines sections!</span></span></p> +<p>Vous verrez quelques différences / problèmes avec l'affichage de l'état de départ de l'évaluation - ceci est principalement dû aux différences dans le balisage, ce qui cause des problèmes de style car le CSS n'est pas appliqué correctement. Ne vous inquiétez pas, vous allez résoudre ces problèmes dans les prochaines sections!</p> -<h2 id="Résumé_du_projet"><span class="tlid-translation translation"><span title="">Résumé du projet</span></span></h2> +<h2 id="Résumé_du_projet">Résumé du projet</h2> -<p><span class="tlid-translation translation"><span title="">Pour ce projet, vous êtes présenté avec un site naturel fictif affichant un article "factuel" sur les ours.</span> <span title="">Dans l'état actuel des choses, plusieurs problèmes d'accessibilité se posent. Votre tâche consiste à explorer le site existant et à le réparer au mieux de vos capacités, en répondant aux questions ci-dessous.</span></span></p> +<p>Pour ce projet, vous êtes présenté avec un site naturel fictif affichant un article "factuel" sur les ours. Dans l'état actuel des choses, plusieurs problèmes d'accessibilité se posent. Votre tâche consiste à explorer le site existant et à le réparer au mieux de vos capacités, en répondant aux questions ci-dessous.</p> -<div class="text-wrap tlid-copy-target"> -<h3 class="result-shield-container tlid-copy-target" id="Couleur"><span class="tlid-translation translation"><span title="">Couleur</span></span></h3> -</div> +<h3 id="Couleur">Couleur</h3> -<p><span class="tlid-translation translation"><span title="">Le texte est difficile à lire en raison du schéma de couleurs actuel.</span> <span title="">Pouvez-vous tester le contraste de couleurs actuel (texte / arrière-plan), en rapporter les résultats, puis le corriger en modifiant les couleurs attribuées?</span></span></p> +<p>Le texte est difficile à lire en raison du schéma de couleurs actuel. Pouvez-vous tester le contraste de couleurs actuel (texte / arrière-plan), en rapporter les résultats, puis le corriger en modifiant les couleurs attribuées?</p> <h3 id="Semantic_HTML">Semantic HTML</h3> <ol> - <li><span class="tlid-translation translation"><span title="">Le contenu n'est toujours pas très accessible - faites un rapport sur ce qui se passe lorsque vous essayez de naviguer à l'aide d'un lecteur d'écran.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Pouvez-vous mettre à jour le texte de l'article pour faciliter la navigation des utilisateurs de lecteurs d'écran?</span></span></li> - <li><span class="tlid-translation translation"><span title="">La partie du menu de navigation du site </span></span> ( <code><div class="nav"></div></code>) <span class="tlid-translation translation"><span title="">pourrait être rendue plus accessible en la plaçant dans un élément sémantique HTML5 approprié.</span> <span title="">Lequel devrait-il être mis à jour?</span> <span title="">Faites la mise à jour.</span></span></li> + <li>Le contenu n'est toujours pas très accessible - faites un rapport sur ce qui se passe lorsque vous essayez de naviguer à l'aide d'un lecteur d'écran.</li> + <li>Pouvez-vous mettre à jour le texte de l'article pour faciliter la navigation des utilisateurs de lecteurs d'écran?</li> + <li>La partie du menu de navigation du site ( <code><div class="nav"></div></code>) pourrait être rendue plus accessible en la plaçant dans un élément sémantique HTML5 approprié. Lequel devrait-il être mis à jour? Faites la mise à jour.</li> </ol> <div class="note"> -<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Vous devrez mettre à jour les sélecteurs de règles CSS qui attribuent aux balises le même style que les balises sémantiques.</span> <span title="">Une fois que vous avez ajouté des éléments de paragraphe, vous remarquerez que le style est meilleur.</span></span></p> +<p><strong>Note :</strong> Vous devrez mettre à jour les sélecteurs de règles CSS qui attribuent aux balises le même style que les balises sémantiques. Une fois que vous avez ajouté des éléments de paragraphe, vous remarquerez que le style est meilleur.</p> </div> -<h3 id="Les_images"><font>Les images</font></h3> +<h3 id="Les_images">Les images</h3> -<p><span class="tlid-translation translation"><span title="">Les images sont actuellement inaccessibles aux utilisateurs de lecteur d'écran.</span> <span title="">Pouvez-vous réparer ceci?</span></span></p> +<p>Les images sont actuellement inaccessibles aux utilisateurs de lecteur d'écran. Pouvez-vous réparer ceci?</p> <h3 id="Le_lecteur_audio">Le lecteur audio</h3> <ol> - <li><span class="tlid-translation translation"><span title="">Le lecteur </span></span> <font> <code><audio></code> </font> <span class="tlid-translation translation"><span title="">n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)?</span></span></li> - <li><span class="tlid-translation translation"><span title="">Le lecteur</span></span> <font> <code><audio></code> </font> <span class="tlid-translation translation"><span title="">n'est pas accessible aux utilisateurs de navigateurs plus anciens qui ne prennent pas en charge l'audio HTML5.</span> <span title="">Comment pouvez-vous leur permettre d'accéder encore à l'audio?</span></span></li> + <li>Le lecteur  <code><audio></code> n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)?</li> + <li>Le lecteur  <code><audio></code> n'est pas accessible aux utilisateurs de navigateurs plus anciens qui ne prennent pas en charge l'audio HTML5. Comment pouvez-vous leur permettre d'accéder encore à l'audio?</li> </ol> <h3 id="Les_formulaires">Les formulaires</h3> <ol> - <li><span class="tlid-translation translation"><span title="">L'élément</span></span> <font> <code><input></code> </font> <span class="tlid-translation translation"><span title="">dans le formulaire de recherche en haut pourrait être associé à une étiquette, mais nous ne souhaitons pas ajouter une étiquette de texte visible qui risquerait de gâcher la conception et qui n'est pas vraiment utile aux utilisateurs voyants.</span> <span title="">Comment ajouter une étiquette uniquement accessible aux lecteurs d’écran?</span></span> <font>?</font></li> - <li><span class="tlid-translation translation"><span title="">Les deux éléments</span></span> <font> <code><input></code> </font> <span class="tlid-translation translation"><span title="">du formulaire de commentaire ont des étiquettes de texte visibles, mais ils ne sont pas associés sans ambiguïté à leurs étiquettes. Comment y parvenir?</span> <span title="">Notez que vous devrez également mettre à jour certaines règles CSS.</span></span></li> + <li>L'élément  <code><input></code> dans le formulaire de recherche en haut pourrait être associé à une étiquette, mais nous ne souhaitons pas ajouter une étiquette de texte visible qui risquerait de gâcher la conception et qui n'est pas vraiment utile aux utilisateurs voyants. Comment ajouter une étiquette uniquement accessible aux lecteurs d’écran? ?</li> + <li>Les deux éléments  <code><input></code> du formulaire de commentaire ont des étiquettes de texte visibles, mais ils ne sont pas associés sans ambiguïté à leurs étiquettes. Comment y parvenir? Notez que vous devrez également mettre à jour certaines règles CSS.</li> </ol> -<h3 id="Le_contrôle_afficher_masquer_les_commentaires"><span class="tlid-translation translation"><span title="">Le contrôle afficher / masquer les commentaires</span></span></h3> +<h3 id="Le_contrôle_afficher_masquer_les_commentaires">Le contrôle afficher / masquer les commentaires</h3> -<p><span class="tlid-translation translation"><span title="">Le bouton de commande afficher / masquer les commentaires n’est pas actuellement accessible au clavier.</span> <span title="">Pouvez-vous le rendre accessible au clavier, à la fois en termes de focalisation à l'aide de la touche de tabulation et d'activation à l'aide de la touche de retour?</span></span></p> +<p>Le bouton de commande afficher / masquer les commentaires n’est pas actuellement accessible au clavier. Pouvez-vous le rendre accessible au clavier, à la fois en termes de focalisation à l'aide de la touche de tabulation et d'activation à l'aide de la touche de retour?</p> -<h3 id="La_table"><font>La table</font></h3> +<h3 id="La_table">La table</h3> -<p><span class="tlid-translation translation"><span title="">Le tableau de données (data table ) n'est pas très accessible actuellement. Il est difficile pour les utilisateurs de lecteur d'écran d'associer des lignes et des colonnes de données. De plus, le tableau ne contient aucun type de résumé permettant de clarifier ce qu'il montre.</span> <span title="">Pouvez-vous ajouter des fonctionnalités à votre code HTML pour résoudre ce problème?</span></span></p> +<p>Le tableau de données (data table ) n'est pas très accessible actuellement. Il est difficile pour les utilisateurs de lecteur d'écran d'associer des lignes et des colonnes de données. De plus, le tableau ne contient aucun type de résumé permettant de clarifier ce qu'il montre. Pouvez-vous ajouter des fonctionnalités à votre code HTML pour résoudre ce problème?</p> -<h3 id="Autres_considérations"><span class="tlid-translation translation"><span title="">Autres considérations?</span></span></h3> +<h3 id="Autres_considérations">Autres considérations?</h3> -<p><span class="tlid-translation translation"><span title="">Pouvez-vous énumérer deux autres idées d’amélioration qui rendraient le site Web plus accessible?</span></span></p> +<p>Pouvez-vous énumérer deux autres idées d’amélioration qui rendraient le site Web plus accessible?</p> -<h2 id="Évaluation"><span class="tlid-translation translation"><span title="">Évaluation</span></span></h2> +<h2 id="Évaluation">Évaluation</h2> -<p><span class="tlid-translation translation"><span title="">Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige.</span> <span title="">Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en le demandant sur la</span></span><font> </font><a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">discussion thread for this exercise</a><font>, </font> <span class="tlid-translation translation"><span title="">ou sur le canal IRC</span></span> <font> <a href="irc://irc.mozilla.org/mdn">#mdn</a> </font> <span class="tlid-translation translation"><span title="">sur </span></span> <font> <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. </font> <span class="tlid-translation translation"><span title="">Essayez d'abord l'exercice - il n'y a rien à gagner à tricher!</span></span></p> +<p>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en le demandant sur la <a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">discussion thread for this exercise</a>, ou sur le canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Essayez d'abord l'exercice - il n'y a rien à gagner à tricher!</p> -<p><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></p> +<p>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p> -<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="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> + <li><a href="/fr/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/fr/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> </ul> 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> diff --git a/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html b/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html index 392a00d82b..e81880d90d 100644 --- a/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html +++ b/files/fr/learn/accessibility/css_and_javascript/test_your_skills_colon__css_and_javascript_accessibility/index.html @@ -15,10 +15,9 @@ translation-of: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and <p>L'objectif de ce test de connaissances est d'évaluer si vous maîtrisez les <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript">meilleures pratiques d'accessibilité en CSS et en JavaScript</a>.</p> -<div class="notecard note"> - <p><b>Note :</b></p> - <p>Vous pouvez tester les solutions dans les éditeurs interactifs ci-dessous, cependant il peut être plus utile de télécharger le code et d'utiliser un outil en ligne comme <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> ou <a href="https://glitch.com/">Glitch</a> pour travailler sur les exercices suivants.<br><br> - Si vous bloquez, demandez-nous de l'aide — plus d'informations dans la section <a href="#assessment_or_further_help">Évaluation ou aide supplémentaire</a> en bas de la page.</p> +<div class="note"> + <p><strong>Note :</strong> Vous pouvez tester les solutions dans les éditeurs interactifs ci-dessous, cependant il peut être plus utile de télécharger le code et d'utiliser un outil en ligne comme <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> ou <a href="https://glitch.com/">Glitch</a> pour travailler sur les exercices suivants.</p> + <p>Si vous bloquez, demandez-nous de l'aide — plus d'informations dans la section <a href="#assessment_or_further_help">Évaluation ou aide supplémentaire</a> en bas de la page.</p> </div> <h2 id="css_accessibility_1">Accessibilité en CSS - Exercice 1</h2> @@ -31,8 +30,8 @@ translation-of: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and <p>{{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y1.html", '100%', 700)}}</p> -<div class="notecard note"> - <p><a href="https://github.com/mdn/learning-area/blob/master/accessibility/tasks/html-css/css/css-a11y1-download.html">Télécharger le code de départ de cet exercice</a> pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.</p> +<div class="note"> + <p><strong>Note :</strong> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/tasks/html-css/css/css-a11y1-download.html">Télécharger le code de départ de cet exercice</a> pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.</p> </div> <h2 id="css_accessibility_2">Accessibilité en CSS - Exercice 2</h2> @@ -50,8 +49,8 @@ translation-of: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and <p>{{EmbedGHLiveSample("learning-area/accessibility/tasks/html-css/css/css-a11y2.html", '100%', 700)}}</p> -<div class="notecard note"> - <p><a href="https://github.com/mdn/learning-area/blob/master/accessibility/tasks/html-css/css/css-a11y2-download.html">Télécharger le code de départ de cet exercice</a> pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.</p> +<div class="note"> + <p><strong>Note :</strong> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/tasks/html-css/css/css-a11y2-download.html">Télécharger le code de départ de cet exercice</a> pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.</p> </div> <h2 id="javascript_accessibility_1">Accessibilité en JavaScript - Exercice 1</h2> @@ -60,8 +59,8 @@ translation-of: Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and <p>Ce n'est hélas pas très accessible — dans l'état actuel des choses vous pouvez seulement utiliser la souris. Nous aimerions que vous ajoutiez du code HTML et JavaScript de façon à rendre l'application également utilisable avec un clavier.</p> -<div class="notecard note"> - <p><a href="https://github.com/mdn/learning-area/blob/master/accessibility/tasks/js/js/js1-download.html">Télécharger le code de départ de cet exercice</a> pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.</p> +<div class="note"> + <p><strong>Note :</strong> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/tasks/js/js/js1-download.html">Télécharger le code de départ de cet exercice</a> pour travailler dessus dans votre propre éditeur ou avec un éditeur en ligne.</p> </div> <h2 id="assessment_or_further_help">Évaluation ou aide supplémentaire</h2> diff --git a/files/fr/learn/accessibility/html/index.html b/files/fr/learn/accessibility/html/index.html index 70e128d05d..354bf4075f 100644 --- a/files/fr/learn/accessibility/html/index.html +++ b/files/fr/learn/accessibility/html/index.html @@ -21,11 +21,11 @@ original_slug: Apprendre/a11y/HTML <p>Une grande partie des contenus web peut être rendue accessible simplement en s'assurant d'utiliser les éléments HTML appropriés systématiquement. Cet article détaille comment HTML peut être utilisé pour un maximum d'accessibilité.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Compétences informatiques de base, compréhension basique de HTML (voir<a href="/fr/Apprendre/HTML/Introduction_à _HTML"> </a><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">I</a><a href="/fr/Apprendre/HTML/Introduction_à _HTML">ntroduction à HTML</a>), et compréhension de <a href="/fr/docs/Apprendre/a11y/What_is_accessibility"> Qu'est ce que l'accessibilité ?</a></td> + <td>Compétences informatiques de base, compréhension basique de HTML (voir<a href="/fr/Apprendre/HTML/Introduction_à _HTML"> </a><a href="/fr/docs/Learn/HTML/Introduction_to_HTML">I</a><a href="/fr/Apprendre/HTML/Introduction_à _HTML">ntroduction à HTML</a>), 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">Objectif :</th> @@ -40,11 +40,11 @@ original_slug: Apprendre/a11y/HTML <p>Vous pouvez vous demander pourquoi c'est si important. Après tout, vous pouvez utiliser une combinaison de CSS et de JavaScript pour faire fonctionner n'importe quel élément HTML de la manière que vous souhaitez. Par exemple, un bouton de lecture pour une vidéo sur votre site pourrait être codé ainsi :</p> -<pre class="brush: html notranslate"><div>Lire la vidéo</div></pre> +<pre class="brush: html"><div>Lire la vidéo</div></pre> <p>Mais comme vous le verrez en détail plus loin, il est beaucoup plus sensé d'utiliser le bon élément à cet effet :</p> -<pre class="brush: html notranslate"><button>Lire la vidéo</button></pre> +<pre class="brush: html"><button>Lire la vidéo</button></pre> <p>Non seulement  <code><button></code> possède des styles adéquats par défaut (que vous voudrez probablement surcharger), il intègre aussi l'accès au clavier — on peut tabuler dessus, et l'activer avec la touche entrée.</p> @@ -59,7 +59,7 @@ original_slug: Apprendre/a11y/HTML <p>Continuons et jetons un œil au HTML accessible dans le détail.</p> <div class="note"> -<p><strong>Note </strong>: C'est une bonne idée d'avoir un lecteur d'écran configuré, pour tester les exemples ci-dessous. Voir notre guide pour <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Screenreaders">gérer les problèmes courants d'accessibilité</a> pour plus de détails.</p> +<p><strong>Note :</strong> C'est une bonne idée d'avoir un lecteur d'écran configuré, pour tester les exemples ci-dessous. Voir notre guide pour <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Screenreaders">gérer les problèmes courants d'accessibilité</a> pour plus de détails.</p> </div> <h2 id="Une_bonne_sémantique">Une bonne sémantique</h2> @@ -76,7 +76,7 @@ original_slug: Apprendre/a11y/HTML <p>L'une des meilleures aides en accessibilité qu'un utilisateur de lecteur d'écran peut avoir est une bonne structure des titres, paragraphes, listes, etc. Un bon exemple sémantique devrait ressembler au code suivant :</p> -<pre class="brush: html example-good line-numbers language-html notranslate"><h1>Mon titre</h1> +<pre class="brush: html example-good"><h1>Mon titre</h1> <p>Ceci est la premère section de mon document.</p> @@ -107,7 +107,7 @@ original_slug: Apprendre/a11y/HTML <p>Les gens écrivent parfois des titres, des paragraphes, etc. utilisant le HTML de présentation et retours à la ligne, quelque chose comme ce qui suit :</p> -<pre class="brush: html example-bad line-numbers language-html notranslate"><font size="7">Mon titre</font> +<pre class="brush: html example-bad"><font size="7">Mon titre</font> <br><br> Ceci est la première section de mon document. <br><br> @@ -147,7 +147,7 @@ Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intà <p>Essayez notre exemple <a href="http://mdn.github.io/learning-area/accessibility/html/table-layout.html">table-layout.html</a>, qui ressemble à quelque chose comme ça :</p> -<pre class="brush: html notranslate"><table width="1200"> +<pre class="brush: html"><table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> @@ -212,194 +212,194 @@ Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intà </tr> </table></pre> -<p><span class="tlid-translation translation"><span title="">Si vous essayez de naviguer à l'aide d'un lecteur d'écran, cela vous indiquera probablement qu'il existe un tableau à examiner (bien que certains lecteurs d'écran puissent deviner la différence entre les présentations de tableau et les tableaux de données).</span> <span title="">Vous devrez ensuite (en fonction du lecteur d’écran que vous utilisez) devoir accéder à la table en tant qu’objet et en examiner les caractéristiques séparément, puis sortir à nouveau de la table pour continuer à naviguer dans le contenu.</span></span></p> +<p>Si vous essayez de naviguer à l'aide d'un lecteur d'écran, cela vous indiquera probablement qu'il existe un tableau à examiner (bien que certains lecteurs d'écran puissent deviner la différence entre les présentations de tableau et les tableaux de données). Vous devrez ensuite (en fonction du lecteur d’écran que vous utilisez) devoir accéder à la table en tant qu’objet et en examiner les caractéristiques séparément, puis sortir à nouveau de la table pour continuer à naviguer dans le contenu.</p> -<p><span class="tlid-translation translation"><span title="">Les structures de table sont un vestige du passé – elles semblaient logiques lorsque le support CSS n’était pas répandu dans les navigateurs, mais elles semaient la confusion chez les utilisateurs de lecteurs d’écran, tout en étant mauvaises pour de nombreuses autres raisons (utilisation abusive des tableaux, nécessite plus de balisage,</span> <span title="">design manquant de souplesse).</span> <span title="">Ne les utilisez pas !</span></span></p> +<p>Les structures de table sont un vestige du passé – elles semblaient logiques lorsque le support CSS n’était pas répandu dans les navigateurs, mais elles semaient la confusion chez les utilisateurs de lecteurs d’écran, tout en étant mauvaises pour de nombreuses autres raisons (utilisation abusive des tableaux, nécessite plus de balisage, design manquant de souplesse). Ne les utilisez pas !</p> -<p><span class="tlid-translation translation"><span title="">Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un</span></span> <a href="https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">exemple plus moderne de structure de site Web</a>, <span class="tlid-translation translation"><span title="">qui pourrait ressembler à ceci :</span></span></p> +<p>Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un <a href="https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">exemple plus moderne de structure de site Web</a>, qui pourrait ressembler à ceci :</p> -<pre class="brush: html notranslate"><header> - <h1><span class="tlid-translation translation"><span title="">Entête</span></span></h1> +<pre class="brush: html"><header> + <h1>Entête</h1> </header> <nav> - <!-- <span class="tlid-translation translation"><span title="">navigation principale ici</span></span> --> + <!-- navigation principale ici --> </nav> -<!-- <span class="tlid-translation translation"><span title="">Voici le contenu principal de notre page</span></span> --> +<!-- Voici le contenu principal de notre page --> <main> - <!-- <span class="tlid-translation translation"><span title="">Il contient un article</span></span> --> + <!-- Il contient un article --> <article> - <h2><span class="tlid-translation translation"><span title="">Intitulé de l'article</span></span></h2> + <h2>Intitulé de l'article</h2> - <!-- <span class="tlid-translation translation"><span title="">contenu de l'article ici</span></span> --> + <!-- contenu de l'article ici --> </article> <aside> - <h2><span class="tlid-translation translation"><span title="">en relation</span></span></h2> + <h2>en relation</h2> - <!-- <span class="tlid-translation translation"><span title="">à part le contenu ici</span></span> --> + <!-- à part le contenu ici --> </aside> </main> -<!-- <span class="tlid-translation translation"><span title="">Et voici notre pied de page principal utilisé dans toutes les pages de notre site Web.</span></span> --> +<!-- Et voici notre pied de page principal utilisé dans toutes les pages de notre site Web. --> <footer> - <!-- <span class="tlid-translation translation"><span title="">contenu du pied de page ici</span></span> --> + <!-- contenu du pied de page ici --> </footer></pre> -<p><span class="tlid-translation translation"><span title="">Si vous essayez notre exemple plus moderne de structure avec un lecteur d’écran, vous verrez que le balisage de présentation ne gêne plus ni ne rend la lecture du contenu confuse.</span> <span title="">Il est également beaucoup plus léger et plus petit en termes de taille de code, ce qui signifie une maintenance plus facile du code et une sollicitation moindre de la bande passante par l'utilisateur (particulièrement critique en cas de connexions lentes).</span></span></p> +<p>Si vous essayez notre exemple plus moderne de structure avec un lecteur d’écran, vous verrez que le balisage de présentation ne gêne plus ni ne rend la lecture du contenu confuse. Il est également beaucoup plus léger et plus petit en termes de taille de code, ce qui signifie une maintenance plus facile du code et une sollicitation moindre de la bande passante par l'utilisateur (particulièrement critique en cas de connexions lentes).</p> -<p><span class="tlid-translation translation"><span title="">Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir </span></span><a href="/fr/docs/Web/HTML/Element#Content_sectioning">Référence des éléments HTML</a>). <span class="tlid-translation translation"><span title="">Vous pouvez créer une disposition en utilisant uniquement des éléments</span></span> {{htmlelement("div")}} <span class="tlid-translation translation"><span title="">imbriqués, mais il est préférable d'utiliser</span> des <span title="">éléments de sectionnement appropriés pour envelopper votre navigation principale</span></span> ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), <span class="tlid-translation translation"><span title="">en répétant des unités de contenu</span></span> ({{htmlelement("article")}}), <span class="tlid-translation translation"><span title=""> etc. Elles fournissent une sémantique supplémentaire aux lecteurs d’écran (et à d’autres outils) pour donner à l’utilisateur des indices supplémentaires sur le contenu qu’il navigue (voir</span></span> <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5</a> <span class="tlid-translation translation"><span title="">pour une idée de la prise en charge du lecteur d’écran</span></span>).</p> +<p>Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir <a href="/fr/docs/Web/HTML/Element#Content_sectioning">Référence des éléments HTML</a>). Vous pouvez créer une disposition en utilisant uniquement des éléments {{htmlelement("div")}} imbriqués, mais il est préférable d'utiliser des éléments de sectionnement appropriés pour envelopper votre navigation principale ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), en répétant des unités de contenu ({{htmlelement("article")}}), etc. Elles fournissent une sémantique supplémentaire aux lecteurs d’écran (et à d’autres outils) pour donner à l’utilisateur des indices supplémentaires sur le contenu qu’il navigue (voir <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5</a> pour une idée de la prise en charge du lecteur d’écran).</p> <div class="note"> -<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">Outre le fait que votre contenu présente une bonne sémantique et une présentation attrayante, il convient que son ordre source soit logique : vous pouvez toujours le placer où vous le souhaitez à l'aide de CSS par la suite, mais vous devez définir l'ordre exact des sources pour commencer.</span> <span title="">les utilisateurs de lecteur d’écran qui se liront auront du sens.</span></span></p> +<p><strong>Note :</strong> Outre le fait que votre contenu présente une bonne sémantique et une présentation attrayante, il convient que son ordre source soit logique : vous pouvez toujours le placer où vous le souhaitez à l'aide de CSS par la suite, mais vous devez définir l'ordre exact des sources pour commencer. les utilisateurs de lecteur d’écran qui se liront auront du sens.</p> </div> -<h3 id="Contrôles_de_linterface_utilisateur"><span class="tlid-translation translation"><span title="">Contrôles de l'interface utilisateur</span></span></h3> +<h3 id="Contrôles_de_linterface_utilisateur">Contrôles de l'interface utilisateur</h3> -<p><span class="tlid-translation translation"><span title="">Par contrôles d'interface utilisateur, nous entendons les parties principales des documents web avec lesquelles les utilisateurs interagissent – le plus souvent des boutons, des liens et des contrôles de formulaire.</span> <span title="">Dans cette section, nous examinerons les problèmes d’accessibilité de base à prendre en compte lors de la création de tels contrôles.</span> <span title="">Des articles ultérieurs sur WAI-ARIA et le multimédia aborderont d'autres aspects de l'accessibilité de l'interface utilisateur.</span></span></p> +<p>Par contrôles d'interface utilisateur, nous entendons les parties principales des documents web avec lesquelles les utilisateurs interagissent – le plus souvent des boutons, des liens et des contrôles de formulaire. Dans cette section, nous examinerons les problèmes d’accessibilité de base à prendre en compte lors de la création de tels contrôles. Des articles ultérieurs sur WAI-ARIA et le multimédia aborderont d'autres aspects de l'accessibilité de l'interface utilisateur.</p> -<p><span class="tlid-translation translation"><span title="">L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisateur est que, par défaut, les navigateurs leur permettent d'être manipulés par le clavier.</span> <span title="">Vous pouvez essayer ceci en utilisant notre exemple </span></span><a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">accessibilité du clavier natif</a> (<span class="tlid-translation translation"><span title="">voir le</span></span> <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">code source</a>) – <span class="tlid-translation translation"><span title="">ouvrez-le dans un nouvel onglet et essayez d’appuyer sur la touche de tabulation;</span> <span title="">après quelques appuis, vous devriez voir le focus de l'onglet commencer à se déplacer à travers les différents éléments qui peuvent être mis au point ;</span> <span title="">les éléments focalisés se voient attribuer un style par défaut en surbrillance dans chaque navigateur (il diffère légèrement d’un navigateur à l’autre) afin que vous puissiez déterminer quel élément est ciblé.</span></span></p> +<p>L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisateur est que, par défaut, les navigateurs leur permettent d'être manipulés par le clavier. Vous pouvez essayer ceci en utilisant notre exemple <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">accessibilité du clavier natif</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">code source</a>) – ouvrez-le dans un nouvel onglet et essayez d’appuyer sur la touche de tabulation; après quelques appuis, vous devriez voir le focus de l'onglet commencer à se déplacer à travers les différents éléments qui peuvent être mis au point ; les éléments focalisés se voient attribuer un style par défaut en surbrillance dans chaque navigateur (il diffère légèrement d’un navigateur à l’autre) afin que vous puissiez déterminer quel élément est ciblé.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p> +<p><img alt="" src="button-focused-unfocused.png"></p> -<p><span class="tlid-translation translation"><span title="">Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents,</span> <span title="">par exemple, l'élément</span></span>  {{htmlelement("select")}} <span class="tlid-translation translation"><span title="">peut avoir ses options affichées et alterner entre les touches fléchées haut et bas).</span></span> </p> +<p>Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents, par exemple, l'élément  {{htmlelement("select")}} peut avoir ses options affichées et alterner entre les touches fléchées haut et bas). </p> <div class="note"> -<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles.</span> <span title="">Voir</span></span> comment <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility">gérer les problèmes courants d'accessibilité</a> <span class="tlid-translation translation"><span title="">pour plus de détails.</span></span></p> +<p><strong>Note :</strong> Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles. Voir comment <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility">gérer les problèmes courants d'accessibilité</a> pour plus de détails.</p> </div> -<p><span class="tlid-translation translation"><span title="">Vous obtenez essentiellement ce comportement gratuitement, en utilisant simplement les éléments appropriés,</span></span> par exemple :</p> +<p>Vous obtenez essentiellement ce comportement gratuitement, en utilisant simplement les éléments appropriés, par exemple :</p> -<pre class="brush: html example-good notranslate"><h1><span class="tlid-translation translation"><span title="">Liens</span></span></h1> +<pre class="brush: html example-good"><h1>Liens</h1> -<p> <span class="tlid-translation translation"><span title="">Ceci est un lien vers</span></span> <a href="https://www.mozilla.org">Mozilla</a>.</p> +<p> Ceci est un lien vers <a href="https://www.mozilla.org">Mozilla</a>.</p> -<p> <span class="tlid-translation translation"><span title="">Un autre lien, pour</span></span> <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p> +<p> Un autre lien, pour <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p> -<h2><span class="tlid-translation translation"><span title="">Boutons</span></span></h2> +<h2>Boutons</h2> <p> - <button data-message="This is from the first button"><span class="tlid-translation translation"><span title="">Cliquez moi</span></span>!</button> - <button data-message="This is from the second button"> <span class="tlid-translation translation"><span title="">Cliquez moi aussi</span></span> !</button> - <button data-message="This is from the third button"><span class="tlid-translation translation"><span title="">Et moi</span></span>!</button> + <button data-message="This is from the first button">Cliquez moi!</button> + <button data-message="This is from the second button"> Cliquez moi aussi !</button> + <button data-message="This is from the third button">Et moi!</button> </p> <h2>formulaire</h2> <form>  <div> -   <label for="name"> <span class="tlid-translation translation"><span title="">Remplis ton nom</span></span> :</label> +   <label for="name"> Remplis ton nom :</label>   <input type="text" id="name" name="name">  </div>  <div> -   <label for="age"> <span class="tlid-translation translation"><span title="">Entrez votre âge</span></span> :</label> +   <label for="age"> Entrez votre âge :</label>    <input type="text" id="age" name="age">  </div>  <div> -   <label for="mood"> <span class="tlid-translation translation"><span title="">Choisissez votre humeur</span></span> :</label> +   <label for="mood"> Choisissez votre humeur :</label>    <select id="mood" name="mood"> -     <option><span class="tlid-translation translation">Heureux</span></option> - <option> <span class="tlid-translation translation"><span title="">Triste</span></span> </option> - <option> <span class="tlid-translation translation">Fâché</span> </option> -     <option> <span class="tlid-translation translation">Préoccupé</span> </option> +     <option>Heureux</option> + <option> Triste </option> + <option> Fâché </option> +     <option> Préoccupé </option>    </select>  </div> </form></pre> -<p><span class="tlid-translation translation"><span title="">Cela signifie que vous devez utiliser des liens, des boutons, des éléments de formulaire et des étiquettes de manière appropriée (y compris l'élément </span></span> {{htmlelement("label")}} <span class="tlid-translation translation"><span title="">pour les contrôles de formulaire).</span></span></p> +<p>Cela signifie que vous devez utiliser des liens, des boutons, des éléments de formulaire et des étiquettes de manière appropriée (y compris l'élément {{htmlelement("label")}} pour les contrôles de formulaire).</p> -<p><span class="tlid-translation translation"><span title="">Cependant, il est encore une fois que les gens font parfois des choses étranges avec HTML.</span> <span title="">Par exemple, vous voyez parfois des boutons balisés en utilisant</span></span> {{htmlelement("div")}}s, <span class="tlid-translation translation"><span title=""> par exemple :</span></span></p> +<p>Cependant, il est encore une fois que les gens font parfois des choses étranges avec HTML. Par exemple, vous voyez parfois des boutons balisés en utilisant {{htmlelement("div")}}s, par exemple :</p> -<pre class="brush: html example-bad notranslate"><div data-message="This is from the first button"> <span class="tlid-translation translation"><span title="">Cliquez-moi!</span></span></div> -<div data-message="This is from the second button"> <span class="tlid-translation translation"><span title=""> Cliquez moi aussi!</span></span></div> -<div data-message="This is from the third button"> <span class="tlid-translation translation"><span title="">Et moi!</span></span></div></pre> +<pre class="brush: html example-bad"><div data-message="This is from the first button"> Cliquez-moi!</div> +<div data-message="This is from the second button"> Cliquez moi aussi!</div> +<div data-message="This is from the third button"> Et moi!</div></pre> -<p><span class="tlid-translation translation"><span title="">Il est toutefois déconseillé d’utiliser un tel code. Vous perdriez immédiatement l’accessibilité au clavier natif que vous auriez obtenue si vous aviez utilisé des éléments</span></span>  {{htmlelement("button")}}. <span class="tlid-translation translation"><span title="">De plus, vous n’obtenez aucun des styles CSS par défaut</span> que <span title="">les boutons ont.</span></span></p> +<p>Il est toutefois déconseillé d’utiliser un tel code. Vous perdriez immédiatement l’accessibilité au clavier natif que vous auriez obtenue si vous aviez utilisé des éléments  {{htmlelement("button")}}. De plus, vous n’obtenez aucun des styles CSS par défaut que les boutons ont.</p> -<h4 id="Remettre_laccessibilité_au_clavier"><span class="tlid-translation translation"><span title="">Remettre l'accessibilité au clavier</span></span></h4> +<h4 id="Remettre_laccessibilité_au_clavier">Remettre l'accessibilité au clavier</h4> -<p><span class="tlid-translation translation"><span title="">Ajouter de tels avantages en retour demande un peu de travail (vous pouvez utiliser un exemple de code dans notre exemple</span></span> <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> – <span class="tlid-translation translation"><span title=""> voir également le</span></span> <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">source code</a>). <span class="tlid-translation translation"><span title="">Ici, nous avons donné à nos faux boutons <code><div></code> la possibilité</span> <span title="">se focaliser (y compris via la touche Tab) en donnant à chacun l'attribut</span></span> <code>tabindex="0"</code> :</p> +<p>Ajouter de tels avantages en retour demande un peu de travail (vous pouvez utiliser un exemple de code dans notre exemple <a href="https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> – voir également le <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">source code</a>). Ici, nous avons donné à nos faux boutons <code><div></code> la possibilité se focaliser (y compris via la touche Tab) en donnant à chacun l'attribut <code>tabindex="0"</code> :</p> -<pre class="brush: html notranslate"><div data-message="This is from the first button" tabindex="0"> <span class="tlid-translation translation"><span title="">Cliquez-moi!</span></span></div> -<div data-message="This is from the second button" tabindex="0"> <span class="tlid-translation translation"><span title="">Cliquez moi aussi!</span></span></div> -<div data-message="This is from the third button" tabindex="0"> <span class="tlid-translation translation"><span title="">Et moi!</span></span></div></pre> +<pre class="brush: html"><div data-message="This is from the first button" tabindex="0"> Cliquez-moi!</div> +<div data-message="This is from the second button" tabindex="0"> Cliquez moi aussi!</div> +<div data-message="This is from the third button" tabindex="0"> Et moi!</div></pre> -<p><span class="tlid-translation translation"><span title="">Fondamentalement, l'attribut</span></span> {{htmlattrxref("tabindex")}} <span class="tlid-translation translation"><span title="">est principalement destiné à permettre aux éléments que l'on peut cibler avec la touche Tab d'avoir un ordre de tabulation personnalisé (spécifié dans l'ordre numérique positif), au lieu d'être simplement tabulés dans leur ordre source par défaut.</span> <span title="">C'est presque toujours une mauvaise idée, car cela peut causer une confusion majeure.</span> <span title="">Utilisez-le uniquement si vous en avez vraiment besoin, par exemple si la mise en page affiche les éléments dans un ordre visuel très différent de celui du code source et si vous souhaitez que les éléments fonctionnent de manière plus logique.</span> <span title="">Il y a deux autres options pour</span></span> <code>tabindex</code> :</p> +<p>Fondamentalement, l'attribut {{htmlattrxref("tabindex")}} est principalement destiné à permettre aux éléments que l'on peut cibler avec la touche Tab d'avoir un ordre de tabulation personnalisé (spécifié dans l'ordre numérique positif), au lieu d'être simplement tabulés dans leur ordre source par défaut. C'est presque toujours une mauvaise idée, car cela peut causer une confusion majeure. Utilisez-le uniquement si vous en avez vraiment besoin, par exemple si la mise en page affiche les éléments dans un ordre visuel très différent de celui du code source et si vous souhaitez que les éléments fonctionnent de manière plus logique. Il y a deux autres options pour <code>tabindex</code> :</p> <ul> - <li><code>tabindex="0"</code> – <span class="tlid-translation translation"><span title="">comme indiqué ci-dessus, cette valeur permet aux éléments qui ne sont pas normalement tabulables de le devenir.</span> <span title="">C’est la valeur la plus utile de</span></span> <code>tabindex</code>.</li> - <li><code>tabindex="-1"</code> – <span class="tlid-translation translation"><span title="">cela permet aux éléments qui ne sont normalement pas tabulables d'être ciblés par le programme, par ex.</span> <span title="">via JavaScript, ou en tant que cible de liens.</span></span></li> + <li><code>tabindex="0"</code> – comme indiqué ci-dessus, cette valeur permet aux éléments qui ne sont pas normalement tabulables de le devenir. C’est la valeur la plus utile de <code>tabindex</code>.</li> + <li><code>tabindex="-1"</code> – cela permet aux éléments qui ne sont normalement pas tabulables d'être ciblés par le programme, par ex. via JavaScript, ou en tant que cible de liens.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Bien que l’addition ci-dessus nous permette de tabuler les boutons, elle ne nous permet pas de les activer via la touche Entrée/Retour.</span> <span title="">Pour ce faire, nous avons dû ajouter le bout de code JavaScript</span></span> suivant :</p> +<p>Bien que l’addition ci-dessus nous permette de tabuler les boutons, elle ne nous permet pas de les activer via la touche Entrée/Retour. Pour ce faire, nous avons dû ajouter le bout de code JavaScript suivant :</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">document.onkeydown = function(e) { +<pre class="brush: js">document.onkeydown = function(e) { if(e.keyCode === 13) { // The Enter/Return key document.activeElement.onclick(e); } -}</code></pre> +}</pre> -<p><span class="tlid-translation translation"><span title="">Ici, nous ajoutons un écouteur à l’objet</span></span> <code class="language-js">d<code>ocument</code></code> <span class="tlid-translation translation"><span title="">pour détecter le moment où un bouton a été appuyé sur le clavier.</span> <span title="">Nous vérifions quel bouton a été pressé via la propriété</span></span> <code class="language-js"> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code></code> <span class="tlid-translation translation"><span title="">de l'objet événement;</span> <span title="">s'il s'agit du code clé qui correspond</span></span> <code class="language-js"> Return/Enter</code>, <span class="tlid-translation translation"><span title="">nous exécutons la fonction stockée dans le gestionnaire du bouton </span></span> <code class="language-js"> <code>onclick</code></code> <span class="tlid-translation translation"><span title=""> à l'aide de </span></span><code class="language-js"><code>document.activeElement.onclick()</code></code><span class="tlid-translation translation"><span title="">. </span></span><code class="language-js"><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement">activeElement</a></code></code><span class="tlid-translation translation"><span title=""> nous donne l'élément qui est actuellement ciblé sur la page.</span></span></p> +<p>Ici, nous ajoutons un écouteur à l’objet <code>document</code> pour détecter le moment où un bouton a été appuyé sur le clavier. Nous vérifions quel bouton a été pressé via la propriété <code><a href="/fr/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code> de l'objet événement; s'il s'agit du code clé qui correspond Return/Enter, nous exécutons la fonction stockée dans le gestionnaire du bouton <code>onclick</code> à l'aide de <code>document.activeElement.onclick()</code>. <code><a href="/fr/docs/Web/API/Document/activeElement">activeElement</a></code> nous donne l'élément qui est actuellement ciblé sur la page.</p> <div class="note"> -<p><span class="tlid-translation translation"><span title=""><strong>Note :</strong> N'oubliez pas que cette technique ne fonctionnera que si vous définissez vos gestionnaires d'événements d'origine via les propriétés du gestionnaire d'événements (par exemple, onclick), </span></span><code class="language-js"><code>addEventListener</code></code><span class="tlid-translation translation"><span title=""> ne fonctionnera pas.</span></span></p> +<p><strong>Note :</strong> N'oubliez pas que cette technique ne fonctionnera que si vous définissez vos gestionnaires d'événements d'origine via les propriétés du gestionnaire d'événements (par exemple, onclick), <code>addEventListener</code> ne fonctionnera pas.</p> </div> -<p><span class="tlid-translation translation"><span title="">C’est beaucoup de tracas supplémentaire pour reconstruire la fonctionnalité. Et il y aura sûrement d’autres problèmes.</span></span> <span class="tlid-translation translation"><span title=""><strong>Mieux vaut utiliser le bon élément pour le bon travail en premier lieu</strong>.</span></span></p> +<p>C’est beaucoup de tracas supplémentaire pour reconstruire la fonctionnalité. Et il y aura sûrement d’autres problèmes. <strong>Mieux vaut utiliser le bon élément pour le bon travail en premier lieu</strong>.</p> -<h4 id="Étiquettes_de_texte_significatives"><span class="tlid-translation translation"><span title="">Étiquettes de texte significatives</span></span></h4> +<h4 id="Étiquettes_de_texte_significatives">Étiquettes de texte significatives</h4> -<p><span class="tlid-translation translation"><span title="">Les étiquettes de texte de contrôle UI sont très utiles pour tous les utilisateurs, mais leur mise au point est particulièrement importante pour les utilisateurs handicapés.</span></span></p> +<p>Les étiquettes de texte de contrôle UI sont très utiles pour tous les utilisateurs, mais leur mise au point est particulièrement importante pour les utilisateurs handicapés.</p> -<p><span class="tlid-translation translation"><span title="">Vous devez vous assurer que les libellés des boutons et des liens sont compréhensibles et distinctifs.</span> <span title="">Ne vous contentez pas d'utiliser </span></span>« <span class="tlid-translation translation"><span title="">Cliquez ici</span></span> »<span class="tlid-translation translation"><span title=""> pour vos étiquettes, car les utilisateurs et utilisatrices de lecteur d'écran créent parfois une liste de boutons et de contrôles de formulaire.</span> <span title="">La capture d'écran suivante montre nos commandes répertoriées par VoiceOver sur Mac.</span></span></p> +<p>Vous devez vous assurer que les libellés des boutons et des liens sont compréhensibles et distinctifs. Ne vous contentez pas d'utiliser « Cliquez ici » pour vos étiquettes, car les utilisateurs et utilisatrices de lecteur d'écran créent parfois une liste de boutons et de contrôles de formulaire. La capture d'écran suivante montre nos commandes répertoriées par VoiceOver sur Mac.</p> -<p><code class="language-js"><img alt="" src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png" style="display: block; height: 604px; margin: 0px auto; width: 802px;"></code></p> +<p><img alt="" src="voiceover-formcontrols.png"></p> -<p><span class="tlid-translation translation"><span title="">Assurez-vous que vos étiquettes ont une signification hors contexte, qu'elles soient lues séparément ou dans le contexte du paragraphe dans lequel elles se trouvent. Par exemple, voici un exemple de texte de lien de qualité :</span></span></p> +<p>Assurez-vous que vos étiquettes ont une signification hors contexte, qu'elles soient lues séparément ou dans le contexte du paragraphe dans lequel elles se trouvent. Par exemple, voici un exemple de texte de lien de qualité :</p> -<pre class="brush: html example-good notranslate"><code class="language-js"><p></code> <span class="tlid-translation translation"><span title="">Les baleines sont vraiment des créatures géniales</span></span> <code class="language-js">. <a href="whales.html"></code> <span class="tlid-translation translation"><span title="">En savoir plus sur les baleines</span></span> <code class="language-js"></a>.</p></code></pre> +<pre class="brush: html example-good"><p> Les baleines sont vraiment des créatures géniales . <a href="whales.html"> En savoir plus sur les baleines </a>.</p></pre> -<p><span class="tlid-translation translation"><span title="">c'est un mauvais texte du lien :</span></span></p> +<p>c'est un mauvais texte du lien :</p> -<pre class="brush: html example-bad notranslate"><code class="language-js"><p></code> <span class="tlid-translation translation"><span title="">Les baleines sont des créatures vraiment impressionnantes.</span> <span title="">Pour en savoir plus sur les baleines,</span></span> <code class="language-js"> <a href="whales.html"></code><span class="tlid-translation translation"><span title="">cliquez ici</span></span><code class="language-js"></a>.</p></code> +<pre class="brush: html example-bad"><p> Les baleines sont des créatures vraiment impressionnantes. Pour en savoir plus sur les baleines, <a href="whales.html">cliquez ici</a>.</p> </pre> <div class="note"> -<p><code class="language-js"><strong>Note</strong>:</code><span class="tlid-translation translation"><span title="">Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur</span></span> la <code class="language-js"><a href="/fr/docs/Apprendre/HTML/Introduction_à _HTML/Creating_hyperlinks">création d'hyperliens</a></code>. <span class="tlid-translation translation"><span title="">Vous pouvez également voir quelques bons et mauvais exemples dans</span></span> <code class="language-js"><a href="https://mdn.github.io/learning-area/accessibility/html/good-links.html">Bons-liens.html</a> et <a href="https://mdn.github.io/learning-area/accessibility/html/bad-links.html">Mauvais-liens.html</a>.</code></p> +<p><strong>Note :</strong> Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur la <a href="/fr/docs/Apprendre/HTML/Introduction_à _HTML/Creating_hyperlinks">création d'hyperliens</a>. Vous pouvez également voir quelques bons et mauvais exemples dans <a href="https://mdn.github.io/learning-area/accessibility/html/good-links.html">Bons-liens.html</a> et <a href="https://mdn.github.io/learning-area/accessibility/html/bad-links.html">Mauvais-liens.html</a>.</p> </div> -<p><span class="tlid-translation translation"><span title="">Les libellés de formulaire sont également importantes pour vous donner un indice sur ce que vous devez entrer dans chaque entrée de formulaire.</span> <span title="">Ce qui suit semble être un exemple assez raisonnable :</span></span></p> +<p>Les libellés de formulaire sont également importantes pour vous donner un indice sur ce que vous devez entrer dans chaque entrée de formulaire. Ce qui suit semble être un exemple assez raisonnable :</p> -<pre class="brush: html example-bad notranslate"> <span class="tlid-translation translation"><span title="">Remplis ton nom</span></span> <code class="language-js">: <input type="text" id="name" name="name"></code></pre> +<pre class="brush: html example-bad"> Remplis ton nom : <input type="text" id="name" name="name"></pre> -<p><span class="tlid-translation translation"><span title="">Cependant, ce n'est pas très utile pour les utilisateurs handicapés.</span> <span title="">Dans l'exemple ci-dessus, rien n'associe de manière non équivoque l'étiquette à la saisie de formulaire et explique clairement comment la remplir si vous ne la voyez pas.</span> <span title="">Si vous y accédez avec certains lecteurs d’écran, vous ne recevrez peut-être qu’une description du type </span></span>« <span class="tlid-translation translation"><span title="">éditer le texte".</span></span></p> +<p>Cependant, ce n'est pas très utile pour les utilisateurs handicapés. Dans l'exemple ci-dessus, rien n'associe de manière non équivoque l'étiquette à la saisie de formulaire et explique clairement comment la remplir si vous ne la voyez pas. Si vous y accédez avec certains lecteurs d’écran, vous ne recevrez peut-être qu’une description du type « éditer le texte".</p> -<p><span class="tlid-translation translation"><span title="">Ce qui suit est un exemple bien meilleur :</span></span></p> +<p>Ce qui suit est un exemple bien meilleur :</p> -<pre class="brush: html example-good notranslate"><code class="language-js"><div> - <label for="name"></code><span class="tlid-translation translation"><span title="">Entrez votre nom</span></span><code class="language-js">:</label> +<pre class="brush: html example-good"><div> + <label for="name">Entrez votre nom:</label> <input type="text" id="name" name="name"> -</div></code></pre> +</div></pre> -<p><span class="tlid-translation translation"><span title="">Avec le code comme celui-ci, le label sera clairement associée à input;</span> <span title="">la description ressemblera davantage à "Entrez votre nom: éditez le texte".</span></span></p> +<p>Avec le code comme celui-ci, le label sera clairement associée à input; la description ressemblera davantage à "Entrez votre nom: éditez le texte".</p> -<p><code class="language-js"><img alt="" src="https://mdn.mozillademos.org/files/14337/voiceover-good-form-label.png" style="display: block; margin: 0 auto;"></code></p> +<p><img alt="" src="voiceover-good-form-label.png"></p> -<p><span class="tlid-translation translation"><span title="">En prime, dans la plupart des navigateurs, associer a un</span></span> <code class="language-js">label</code><span class="tlid-translation translation"><span title=""> à une</span></span> <code class="language-js"> form input</code> <span class="tlid-translation translation"><span title="">signifie que vous pouvez cliquer sur celle-ci pour sélectionner / activer l'élément</span></span> <code class="language-js"> label</code>. <span class="tlid-translation translation"><span title="">Cela donne à </span></span><code class="language-js">input</code><span class="tlid-translation translation"><span title=""> une zone de résultats plus grande, ce qui facilite la sélection</span></span></p> +<p>En prime, dans la plupart des navigateurs, associer a un label à une form input signifie que vous pouvez cliquer sur celle-ci pour sélectionner / activer l'élément label. Cela donne à input une zone de résultats plus grande, ce qui facilite la sélection</p> <div class="note"> -<p><code class="language-js"><strong>Note</strong>:</code><span class="tlid-translation translation"><span title="">vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans</span></span> <a href="https://mdn.github.io/learning-area/accessibility/html/good-form.html">exemple de bon formulaire</a><span class="tlid-translation translation"><span title=""> et </span></span><a href="https://mdn.github.io/learning-area/accessibility/html/bad-form.html">exemple de mauvais formulaire</a><span class="tlid-translation translation"><span title="">.</span></span></p> +<p><strong>Note :</strong> vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans <a href="https://mdn.github.io/learning-area/accessibility/html/good-form.html">exemple de bon formulaire</a> et <a href="https://mdn.github.io/learning-area/accessibility/html/bad-form.html">exemple de mauvais formulaire</a>.</p> </div> -<h2 id="Tableaux_de_données_accessibles"><span class="tlid-translation translation"><span title="">Tableaux de données accessibles</span></span></h2> +<h2 id="Tableaux_de_données_accessibles">Tableaux de données accessibles</h2> -<p><span class="tlid-translation translation"><span title="">Une table de données de base peut être écrite avec un balisage très simple, par exemple :</span></span></p> +<p>Une table de données de base peut être écrite avec un balisage très simple, par exemple :</p> -<pre class="brush: html notranslate"><code class="language-js"><table> +<pre class="brush: html"><table> <tr> <td>Nom</td> <td>Age</td> @@ -420,112 +420,110 @@ Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intà <td>5</td> <td>Femelle</td> </tr> -</table></code></pre> +</table></pre> -<p><span class="tlid-translation translation"><span title="">Mais cela pose des problèmes : un utilisateur de lecteur d’écran ne peut pas associer des lignes ou des colonnes en tant que groupes de données.</span> <span title="">Pour ce faire, vous devez savoir quelles sont les lignes d'en-tête et si elles sont dirigées vers le haut, des colonnes, etc. Cela ne peut être fait que visuellement pour le tableau ci-dessus (voir bad-table.html et essayez vous-même l'exemple).</span></span></p> +<p>Mais cela pose des problèmes : un utilisateur de lecteur d’écran ne peut pas associer des lignes ou des colonnes en tant que groupes de données. Pour ce faire, vous devez savoir quelles sont les lignes d'en-tête et si elles sont dirigées vers le haut, des colonnes, etc. Cela ne peut être fait que visuellement pour le tableau ci-dessus (voir bad-table.html et essayez vous-même l'exemple).</p> -<p><span class="tlid-translation translation"><span title="">Regardez maintenant notre </span></span> tableau d'exemple sur les groupes punk – <span class="tlid-translation translation"><span title="">vous pouvez voir quelques aides à l'accessibilité au travail ici :</span></span></p> +<p>Regardez maintenant notre tableau d'exemple sur les groupes punk – vous pouvez voir quelques aides à l'accessibilité au travail ici :</p> <ul> - <li><span class="tlid-translation translation"><span title="">Les en-têtes de tableau sont définis à l'aide d'éléments</span></span><code class="language-js"> {{htmlelement("th")}} — </code> <span class="tlid-translation translation"><span title="">vous pouvez également spécifier s'il s'agit d'en-têtes de lignes ou de colonnes à l'aide de l'attribut</span></span> <code class="language-js"> <code>scope</code></code><span class="tlid-translation translation"><span title="">. Cela vous donne des groupes complets de données qui peuvent être consommés par les lecteurs d'écran en tant qu'unités simples</span></span></li> - <li><span class="tlid-translation translation"><span title="">L'élément </span></span><code class="language-js">{{htmlelement("caption")}}</code><span class="tlid-translation translation"><span title=""> et l'attribut summary </span></span> <code class="language-js"> <code><table></code></code> <span class="tlid-translation translation"><span title="">effectuent tous deux des travaux similaires. Ils agissent en tant que texte alternatif pour une table, offrant ainsi à un utilisateur de lecteur d'écran un résumé rapide et utile du contenu de la table.</span> </span> <code class="language-js"> <code><caption></code></code><span class="tlid-translation translation"><span title=""> est généralement préféré car il rend son contenu accessible aux utilisateurs malvoyants, qui pourraient également le trouver utile.</span> <span title="">Vous n'avez pas vraiment besoin des deux.</span></span></li> + <li>Les en-têtes de tableau sont définis à l'aide d'éléments {{htmlelement("th")}} — vous pouvez également spécifier s'il s'agit d'en-têtes de lignes ou de colonnes à l'aide de l'attribut <code>scope</code>. Cela vous donne des groupes complets de données qui peuvent être consommés par les lecteurs d'écran en tant qu'unités simples</li> + <li>L'élément {{htmlelement("caption")}} et l'attribut summary <code><table></code> effectuent tous deux des travaux similaires. Ils agissent en tant que texte alternatif pour une table, offrant ainsi à un utilisateur de lecteur d'écran un résumé rapide et utile du contenu de la table. <code><caption></code> est généralement préféré car il rend son contenu accessible aux utilisateurs malvoyants, qui pourraient également le trouver utile. Vous n'avez pas vraiment besoin des deux.</li> </ul> <div class="note"> -<p><code class="language-js"><strong>Note</strong> :</code> <span class="tlid-translation translation"><span title="">voir notre article</span></span> <code class="language-js"><a href="/fr/docs/Apprendre/HTML/Tableaux/Advanced">Tableaux HTML : dispositions avancées et accessibilité</a> </code> <span class="tlid-translation translation"><span title="">pour plus de détails sur les tables de données accessibles.</span></span></p> +<p><strong>Note :</strong> voir notre article <a href="/fr/docs/Apprendre/HTML/Tableaux/Advanced">Tableaux HTML : dispositions avancées et accessibilité</a> pour plus de détails sur les tables de données accessibles.</p> </div> -<h2 id="Alternatives_textuelles"><span class="tlid-translation translation"><span title="">Alternatives textuelles</span></span></h2> +<h2 id="Alternatives_textuelles">Alternatives textuelles</h2> -<p><span class="tlid-translation translation"><span title="">Alors que le contenu textuel est intrinsèquement accessible, il n'en est pas de même pour le contenu multimédia : le contenu image/vidéo ne peut pas être vu par les personnes malvoyantes et le contenu audio ne peut pas être entendu par les malentendants.</span> <span title="">Nous verrons plus loin le contenu audio et vidéo dans l'article multimédia accessible, mais pour cet article, nous examinerons l'accessibilité pour l'élément humble</span></span> <code class="language-js">{{htmlelement("img")}}</code><span class="tlid-translation translation"><span title="">.</span></span></p> +<p>Alors que le contenu textuel est intrinsèquement accessible, il n'en est pas de même pour le contenu multimédia : le contenu image/vidéo ne peut pas être vu par les personnes malvoyantes et le contenu audio ne peut pas être entendu par les malentendants. Nous verrons plus loin le contenu audio et vidéo dans l'article multimédia accessible, mais pour cet article, nous examinerons l'accessibilité pour l'élément humble {{htmlelement("img")}}.</p> -<p><span class="tlid-translation translation"><span title="">Nous avons un exemple simple écrit, </span></span><code class="language-js"><a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">accessible-image.html</a></code><span class="tlid-translation translation"><span title="">, comporte quatre copies de la même image :</span></span></p> +<p>Nous avons un exemple simple écrit, <a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">accessible-image.html</a>, comporte quatre copies de la même image :</p> -<pre class="notranslate"><code class="language-js"><img src="dinosaur.png"> +<pre><img src="dinosaur.png"> <img src="dinosaur.png" - alt="</code> <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées</span></span><code class="language-js">."> + alt="Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées."> <img src="dinosaur.png" - alt="</code> <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées</span></span><code class="language-js">." - title="</code> <span class="tlid-translation translation"><span title="">Le dinosaure rouge de Mozilla</span></span> <code class="language-js">"> + alt="Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées." + title="Le dinosaure rouge de Mozilla "> <img src="dinosaur.png" aria-labelledby="dino-label"> -<p id="dino-label"></code> <span class="tlid-translation translation"><span title="">Tyrannosaure rouge Rex de Mozilla: Dinosaure à deux jambes, debout comme un être humain, avec des armes légères et une grosse tête avec beaucoup de dents acérées</span></span><code class="language-js">.</p> -</code></pre> +<p id="dino-label"> Tyrannosaure rouge Rex de Mozilla: Dinosaure à deux jambes, debout comme un être humain, avec des armes légères et une grosse tête avec beaucoup de dents acérées.</p> +</pre> -<p><span class="tlid-translation translation"><span title="">La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit </span></span>« <span class="tlid-translation translation"><span title="">/dinosaur.png, image</span></span> »<span class="tlid-translation translation"><span title="">.</span> <span title="">Il lit le nom du fichier pour essayer de fournir de l'aide.</span> <span title="">Dans cet exemple, l'utilisateur ou l’utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image.</span></span></p> +<p>La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit « /dinosaur.png, image ». Il lit le nom du fichier pour essayer de fournir de l'aide. Dans cet exemple, l'utilisateur ou l’utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image.</p> <div class="note"> -<p><code class="language-js"><strong>Note</strong>:</code> <span class="tlid-translation translation"><span title="">c'est pourquoi vous ne devriez jamais inclure de contenu textuel dans une image. Les lecteurs d'écran ne peuvent tout simplement pas y accéder.</span> <span title="">Il y a aussi d'autres inconvénients - vous ne pouvez pas le sélectionner et le copier/coller.</span> <span title="">Juste ne le faite pas !</span></span></p> +<p><strong>Note :</strong> c'est pourquoi vous ne devriez jamais inclure de contenu textuel dans une image. Les lecteurs d'écran ne peuvent tout simplement pas y accéder. Il y a aussi d'autres inconvénients - vous ne pouvez pas le sélectionner et le copier/coller. Juste ne le faite pas !</p> </div> -<p><span class="tlid-translation translation"><span title="">Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt </span></span>– « <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées.</span></span> »</p> +<p>Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt – « Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées. »</p> -<p><span class="tlid-translation translation"><span title="">Cela met en évidence l’importance non seulement d’utiliser des noms de fichiers significatifs au cas où ce qui est appelé</span></span> <code class="language-js"><strong>alt text</strong></code> <span class="tlid-translation translation"><span title="">n’est pas disponible, mais aussi de s’assurer que le texte alternatif est fourni dans les attributs</span></span> <code class="language-js"> <code>alt</code></code> <span class="tlid-translation translation"><span title="">chaque fois que possible.</span> <span title="">Notez que le contenu de l'attribut</span></span> <code class="language-js"> <code>alt</code></code><span class="tlid-translation translation"><span title=""> doit toujours fournir une représentation directe de l'image et de ce qu'elle transmet visuellement.</span> <span title="">Aucune connaissance personnelle ou description supplémentaire ne devrait être incluse ici, car elle n’est pas utile pour les personnes qui n’ont jamais rencontré l’image auparavant.</span></span></p> +<p>Cela met en évidence l’importance non seulement d’utiliser des noms de fichiers significatifs au cas où ce qui est appelé <strong>alt text</strong> n’est pas disponible, mais aussi de s’assurer que le texte alternatif est fourni dans les attributs <code>alt</code> chaque fois que possible. Notez que le contenu de l'attribut <code>alt</code> doit toujours fournir une représentation directe de l'image et de ce qu'elle transmet visuellement. Aucune connaissance personnelle ou description supplémentaire ne devrait être incluse ici, car elle n’est pas utile pour les personnes qui n’ont jamais rencontré l’image auparavant.</p> -<p><span class="tlid-translation translation"><span title="">Une chose à considérer est de savoir si vos images ont une signification dans votre contenu, ou si elles sont purement décoratives, n’ont donc aucune signification.</span> <span title="">S'ils sont décoratifs, il est préférable de les inclure dans la page en tant qu'images d'arrière-plan CSS.</span></span></p> +<p>Une chose à considérer est de savoir si vos images ont une signification dans votre contenu, ou si elles sont purement décoratives, n’ont donc aucune signification. S'ils sont décoratifs, il est préférable de les inclure dans la page en tant qu'images d'arrière-plan CSS.</p> <div class="note"> -<p><code class="language-js"><strong>Note </strong>:</code> <span class="tlid-translation translation"><span title="">Lisez </span></span><code class="language-js"><a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a> et<a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à _une_page_web"> Images adaptatives</a></code> <span class="tlid-translation translation"><span title="">pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques.</span></span></p> +<p><strong>Note :</strong> Lisez <a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML">Les images en HTML</a> et<a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à _une_page_web"> Images adaptatives</a> pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques.</p> </div> -<p><span class="tlid-translation translation"><span title="">Si vous souhaitez fournir des informations contextuelles supplémentaires, vous devez les insérer dans le texte entourant l'image ou dans un attribut title, comme indiqué ci-dessus.</span> <span title="">Dans ce cas, la plupart des lecteurs d’écran liront le texte alternatif, l’attribut title et le nom du fichier.</span> <span title="">En outre, les navigateurs affichent le texte du titre sous forme d’infos lors du survol de la souris.</span></span></p> +<p>Si vous souhaitez fournir des informations contextuelles supplémentaires, vous devez les insérer dans le texte entourant l'image ou dans un attribut title, comme indiqué ci-dessus. Dans ce cas, la plupart des lecteurs d’écran liront le texte alternatif, l’attribut title et le nom du fichier. En outre, les navigateurs affichent le texte du titre sous forme d’infos lors du survol de la souris.</p> -<p><code class="language-js"><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></code></p> +<p><img alt="" src="title-attribute.png"></p> -<p><span class="tlid-translation translation"><span title="">Jetons un autre coup d'oeil à la quatrième méthode :</span></span></p> +<p>Jetons un autre coup d'oeil à la quatrième méthode :</p> -<pre class="brush: html notranslate"><code class="language-js"><img src="dinosaur.png" aria-labelledby="dino-label"> +<pre class="brush: html"><img src="dinosaur.png" aria-labelledby="dino-label"> -<p id="dino-label"></code> <span class="tlid-translation translation"><span title="">Le Tyrannosaure rouge Mozilla</span></span> <code class="language-js"> ... </p></code></pre> +<p id="dino-label"> Le Tyrannosaure rouge Mozilla ... </p></pre> -<p><span class="tlid-translation translation"><span title="">Dans ce cas, nous n'utilisons pas du tout l'attribut </span></span><code class="language-js"><code>alt</code></code> <span class="tlid-translation translation"><span title="">Nous avons plutôt présenté notre description de l'image sous forme de paragraphe de texte normal, en lui attribuant un</span></span> <code class="language-js"> <code>id</code></code><span class="tlid-translation translation"><span title=""> puis nous avons utilisé l'attribut</span></span> <code class="language-js"> <code>aria-labelledby</code></code> <span class="tlid-translation translation"><span title="">pour :</span> <span title="">faire référence à cela</span></span> <code class="language-js"> <code>id</code></code><span class="tlid-translation translation"><span title="">, ce qui amène les lecteurs d’écran à utiliser ce paragraphe comme alt</span></span> <code class="language-js"> text/label</code><span class="tlid-translation translation"><span title=""> pour cette image.</span> <span title="">Ceci est particulièrement utile si vous souhaitez utiliser le même texte comme étiquette pour plusieurs images – quelque chose qui n’est pas possible avec </span></span><code class="language-js"><code>alt</code></code><span class="tlid-translation translation"><span title="">.</span></span></p> +<p>Dans ce cas, nous n'utilisons pas du tout l'attribut <code>alt</code> Nous avons plutôt présenté notre description de l'image sous forme de paragraphe de texte normal, en lui attribuant un <code>id</code> puis nous avons utilisé l'attribut <code>aria-labelledby</code> pour : faire référence à cela <code>id</code>, ce qui amène les lecteurs d’écran à utiliser ce paragraphe comme alt text/label pour cette image. Ceci est particulièrement utile si vous souhaitez utiliser le même texte comme étiquette pour plusieurs images – quelque chose qui n’est pas possible avec <code>alt</code>.</p> <div class="note"> -<p><code class="language-js"><strong>Note</strong>: <code>aria-labelledby</code></code> <span class="tlid-translation translation"><span title="">fait partie de la spécification </span></span><code class="language-js"><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI ARIA</a></code><span class="tlid-translation translation"><span title="">, qui permet aux développeurs d'ajouter une sémantique supplémentaire à leur balisage afin d'améliorer l'accessibilité du lecteur d'écran, le cas échéant.</span> <span title="">Pour en savoir plus sur son fonctionnement, lisez notre article</span></span> <code class="language-js"><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basic</a></code><span class="tlid-translation translation"><span title="">.</span></span></p> +<p><strong>Note :</strong> <code>aria-labelledby</code> fait partie de la spécification <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI ARIA</a>, qui permet aux développeurs d'ajouter une sémantique supplémentaire à leur balisage afin d'améliorer l'accessibilité du lecteur d'écran, le cas échéant. Pour en savoir plus sur son fonctionnement, lisez notre article <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basic</a>.</p> </div> -<h3 id="Autres_mécanismes_alternatifs_de_texte"><span class="tlid-translation translation"><span title="">Autres mécanismes alternatifs de texte</span></span></h3> +<h3 id="Autres_mécanismes_alternatifs_de_texte">Autres mécanismes alternatifs de texte</h3> -<p><span class="tlid-translation translation"><span title="">Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif.</span> <span title="">Par exemple, il existe un attribut </span></span><code class="language-js"><code>longdesc</code></code><span class="tlid-translation translation"><span title=""> destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple :</span></span></p> +<p>Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif. Par exemple, il existe un attribut <code>longdesc</code> destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple :</p> -<pre class="brush: html notranslate"><code class="language-js"> -<img src="dinosaur.png" longdesc="dino-info.html"></code></pre> +<pre class="brush: html"> +<img src="dinosaur.png" longdesc="dino-info.html"></pre> -<p><span class="tlid-translation translation"><span title="">Cela semble être une bonne idée, en particulier pour les infographies telles que les grands graphiques contenant de nombreuses informations, qui pourraient peut-être être représentées sous forme de tableau de données accessible (voir section précédente).</span> <span title="">Cependant, longdesc n’est pas toujours pris en charge par les lecteurs d’écran et le contenu est totalement inaccessible aux utilisateurs autres que les lecteurs d’écran.</span> <span title="">Il est sans doute préférable d’inclure la description longue sur la même page que l’image, ou d’y accéder par un lien régulier.</span></span></p> +<p>Cela semble être une bonne idée, en particulier pour les infographies telles que les grands graphiques contenant de nombreuses informations, qui pourraient peut-être être représentées sous forme de tableau de données accessible (voir section précédente). Cependant, longdesc n’est pas toujours pris en charge par les lecteurs d’écran et le contenu est totalement inaccessible aux utilisateurs autres que les lecteurs d’écran. Il est sans doute préférable d’inclure la description longue sur la même page que l’image, ou d’y accéder par un lien régulier.</p> -<p><span class="tlid-translation translation"><span title="">HTML5 comprend deux nouveaux éléments</span></span> <code class="language-js"> — {{htmlelement("figure")}} et {{htmlelement("figcaption")}} — </code> <span class="tlid-translation translation"><span title="">qui sont supposés associer une figure quelconque (ce peut être n'importe quoi, pas nécessairement une image) à une légende de figure :</span></span></p> +<p>HTML5 comprend deux nouveaux éléments  — {{htmlelement("figure")}} et {{htmlelement("figcaption")}} — qui sont supposés associer une figure quelconque (ce peut être n'importe quoi, pas nécessairement une image) à une légende de figure :</p> -<pre class="brush: html notranslate"><code class="language-js"><figure> - <img src="dinosaur.png" alt="</code> <span class="tlid-translation translation"><span title="">Le Mozilla Tyrannosaurus</span></span> <code class="language-js">"> - <figcaption></code> <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées</span></span> <code class="language-js">.</figcaption> -</figure></code></pre> +<pre class="brush: html"><figure> + <img src="dinosaur.png" alt="Le Mozilla Tyrannosaurus "> + <figcaption> Un Tyrannosaure Rex rouge: Un dinosaure à deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tête avec beaucoup de dents acérées .</figcaption> +</figure></pre> -<p><span class="tlid-translation translation"><span title="">Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore associer de légendes à leurs figures, mais la structure des éléments est utile pour le style CSS. Elle permet également de placer une description de l’image à côté de la source.</span></span></p> +<p>Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore associer de légendes à leurs figures, mais la structure des éléments est utile pour le style CSS. Elle permet également de placer une description de l’image à côté de la source.</p> -<h3 id="Attributs_alt_vides"><span class="tlid-translation translation"><span title="">Attributs alt vides</span></span></h3> +<h3 id="Attributs_alt_vides">Attributs alt vides</h3> -<pre class="brush: html notranslate"><code class="language-js"> +<pre class="brush: html"> <h3> <img src="article-icon.png" alt=""> - </code> <span class="tlid-translation translation"><span title="">Tyrannosaurus Rex: le roi des dinosaures</span></span> <code class="language-js"> -</h3></code></pre> + Tyrannosaurus Rex: le roi des dinosaures +</h3></pre> -<p><span class="tlid-translation translation"><span title="">Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle.</span> <span title="">Vous remarquerez dans l'exemple de code ci-dessus que l'attribut </span></span> <code class="language-js"> <code>alt</code> </code> <span class="tlid-translation translation"><span title="">de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement </span></span>« <span class="tlid-translation translation"><span title="">image</span></span> »<span class="tlid-translation translation"><span title="">, ou similaire)</span> <span title="">.</span></span></p> +<p>Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut  <code>alt </code> de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement « image », ou similaire) .</p> -<p><span class="tlid-translation translation"><span title="">La raison d'utiliser un vide </span></span><code class="language-js"><code>alt</code></code> <span class="tlid-translation translation"><span title="">au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun</span></span> <code class="language-js"> <code>alt</code></code> <span class="tlid-translation translation"><span title="">n'est fourni.</span> <span title="">Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée.</span> <span title="">Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide</span></span> <code class="language-js"> <code>alt</code></code> <span class="tlid-translation translation"><span title="">sur vos images.</span> <span title="">Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif.</span></span></p> +<p>La raison d'utiliser un vide <code>alt</code> au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun <code>alt</code> n'est fourni. Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée. Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide <code>alt</code> sur vos images. Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif.</p> <div class="note"> -<p><code class="language-js"><strong>Note</strong> :</code><span class="tlid-translation translation"><span title=""> si possible, vous devriez utiliser CSS pour afficher des images qui ne sont que des décorations.</span></span></p> +<p><strong>Note :</strong> si possible, vous devriez utiliser CSS pour afficher des images qui ne sont que des décorations.</p> </div> -<div class="text-wrap tlid-copy-target"> -<h2 class="result-shield-container tlid-copy-target" id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2> -</div> +<h2 id="Résumé">Résumé</h2> -<p><span class="tlid-translation translation"><span title="">Vous devriez maintenant bien connaître l'écriture HTML accessible pour la plupart des cas.</span> <span title="">Notre article sur les bases de WAI-ARIA comblera également certaines lacunes dans cette connaissance, mais cet article s’occupe des bases.</span> <span title="">Ensuite, nous allons explorer CSS et JavaScript, et comment l’accessibilité est affectée par leur bon ou mauvais usage.</span></span></p> +<p>Vous devriez maintenant bien connaître l'écriture HTML accessible pour la plupart des cas. Notre article sur les bases de WAI-ARIA comblera également certaines lacunes dans cette connaissance, mais cet article s’occupe des bases. Ensuite, nous allons explorer CSS et JavaScript, et comment l’accessibilité est affectée par leur bon ou mauvais usage.</p> <p>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</p> diff --git a/files/fr/learn/accessibility/index.html b/files/fr/learn/accessibility/index.html index 3a3d54ee77..0b9b6f493f 100644 --- a/files/fr/learn/accessibility/index.html +++ b/files/fr/learn/accessibility/index.html @@ -14,14 +14,14 @@ original_slug: Apprendre/a11y --- <div>{{LearnSidebar}}</div> -<p class="summary">Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du <a href="/fr/Apprendre/HTML">HTML</a>, du <a href="/fr/Apprendre/CSS">CSS</a> et du <a href="/fr/Apprendre/JavaScript">JavaScript</a>), effectuer <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">des tests sur les différents navigateurs</a> et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail.</p> +<p>Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du <a href="/fr/Apprendre/HTML">HTML</a>, du <a href="/fr/Apprendre/CSS">CSS</a> et du <a href="/fr/Apprendre/JavaScript">JavaScript</a>), effectuer <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">des tests sur les différents navigateurs</a> et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail.</p> <h2 id="Prérequis">Prérequis</h2> <p>Pour tirer le meilleur parti de ce module, il serait judicieux de parcourir les sections relatives à <a href="/fr/Apprendre/HTML">HTML</a>, <a href="/fr/Apprendre/CSS">CSS</a> et <a href="/fr/Apprendre/JavaScript">JavaScript</a> en premier (au moins les deux premiers modules de chacune de ces sections) ou, peut-être encore mieux, de travailler les parties pertinentes du module d'accessibilité au fur et à mesure que vous travaillez les sujets technologiques connexes.</p> <div class="note"> -<p><strong>Note</strong> : Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que <a href="https://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +<p><strong>Note :</strong> Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que <a href="https://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> </div> <h2 id="Guides">Guides</h2> diff --git a/files/fr/learn/accessibility/mobile/index.html b/files/fr/learn/accessibility/mobile/index.html index 893693f212..62de168f05 100644 --- a/files/fr/learn/accessibility/mobile/index.html +++ b/files/fr/learn/accessibility/mobile/index.html @@ -16,297 +16,295 @@ original_slug: Apprendre/a11y/Mobile <div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div> -<p class="summary"><span class="tlid-translation translation"><span title="">L'accès Web sur les appareils mobiles étant si populaire et les plates-formes populaires telles qu'IOS et Android disposant d'outils d'aide à l'accessibilité complets, il est important de prendre en compte l'accessibilité de votre contenu Web sur ces plates-formes.</span> <span title="">Cet article examine les considérations relatives à l'accessibilité spécifiques aux mobiles.</span></span></p> +<p>L'accès Web sur les appareils mobiles étant si populaire et les plates-formes populaires telles qu'IOS et Android disposant d'outils d'aide à l'accessibilité complets, il est important de prendre en compte l'accessibilité de votre contenu Web sur ces plates-formes. Cet article examine les considérations relatives à l'accessibilité spécifiques aux mobiles.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prerequisites:</th> - <td><span class="tlid-translation translation"><span title="">Connaissances de base en informatique, compréhension de base de HTML, CSS et JavaScript et compréhension de la</span></span>  <a href="/en-US/docs/Learn/Accessibility">previous articles in the course</a>.</td> + <td>Connaissances de base en informatique, compréhension de base de HTML, CSS et JavaScript et compréhension de la  <a href="/fr/docs/Learn/Accessibility">previous articles in the course</a>.</td> </tr> <tr> <th scope="row">Objective:</th> - <td><span class="tlid-translation translation"><span title="">Comprendre quels problèmes d'accessibilité existent sur les appareils mobiles et comment les résoudre.</span></span></td> + <td>Comprendre quels problèmes d'accessibilité existent sur les appareils mobiles et comment les résoudre.</td> </tr> </tbody> </table> -<h2 id="Accessibilité_sur_les_appareils_mobiles"><span class="tlid-translation translation"><span title="">Accessibilité sur les appareils mobiles</span></span></h2> +<h2 id="Accessibilité_sur_les_appareils_mobiles">Accessibilité sur les appareils mobiles</h2> -<p><span class="tlid-translation translation"><span title="">L’état de l’accessibilité - et la prise en charge des normes Web en général - est bon pour les appareils mobiles modernes.</span> <span title="">Le temps où les appareils mobiles utilisaient des technologies Web complètement différentes des navigateurs de bureau, forçait les développeurs à utiliser le sniffing de navigateur et à leur servir des sites complètement séparés (même si de nombreuses entreprises détectent encore l'utilisation d'appareils mobiles et leur servent un domaine distinct).</span></span></p> +<p>L’état de l’accessibilité - et la prise en charge des normes Web en général - est bon pour les appareils mobiles modernes. Le temps où les appareils mobiles utilisaient des technologies Web complètement différentes des navigateurs de bureau, forçait les développeurs à utiliser le sniffing de navigateur et à leur servir des sites complètement séparés (même si de nombreuses entreprises détectent encore l'utilisation d'appareils mobiles et leur servent un domaine distinct).</p> -<p><span class="tlid-translation translation"><span title="">De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès.</span> <span title="">Les navigateurs mobiles modernes ont tendance à avoir un bon support pour</span></span>  <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>, <span class="tlid-translation translation"><span title="">aussi</span></span></p> +<p>De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès. Les navigateurs mobiles modernes ont tendance à avoir un bon support pour  <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>, aussi</p> -<p><span class="tlid-translation translation"><span title="">Pour rendre un site Web accessible et utilisable sur mobile, il vous suffit de suivre les bonnes pratiques générales en matière de conception de sites Web et d'accessibilité.</span></span></p> +<p>Pour rendre un site Web accessible et utilisable sur mobile, il vous suffit de suivre les bonnes pratiques générales en matière de conception de sites Web et d'accessibilité.</p> -<p><span class="tlid-translation translation"><span title="">Certaines exceptions nécessitent une attention particulière pour le mobile;</span> <span title="">les principaux sont:</span></span></p> +<p>Certaines exceptions nécessitent une attention particulière pour le mobile; les principaux sont:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Mécanismes de contrôle - Assurez-vous que les commandes d'interface, telles que les boutons, sont accessibles sur les téléphones mobiles (c'est-à -dire principalement les écrans tactiles), ainsi que sur les ordinateurs de bureau / portables (principalement les souris et les claviers).</span></span></li> - <li><span class="tlid-translation translation"><span title="">Saisie utilisateur - Rendez les exigences de saisie utilisateur aussi simples que possible sur mobile (par exemple, dans les formulaires, réduisez au minimum la saisie).</span></span></li> - <li><span class="tlid-translation translation"><span title="">Conception réactive - Assurez-vous que les mises en page fonctionnent sur le mobile, conservez la taille des téléchargements d'images et réfléchissez à la fourniture d'images pour les écrans haute résolution.</span></span></li> + <li>Mécanismes de contrôle - Assurez-vous que les commandes d'interface, telles que les boutons, sont accessibles sur les téléphones mobiles (c'est-à -dire principalement les écrans tactiles), ainsi que sur les ordinateurs de bureau / portables (principalement les souris et les claviers).</li> + <li>Saisie utilisateur - Rendez les exigences de saisie utilisateur aussi simples que possible sur mobile (par exemple, dans les formulaires, réduisez au minimum la saisie).</li> + <li>Conception réactive - Assurez-vous que les mises en page fonctionnent sur le mobile, conservez la taille des téléchargements d'images et réfléchissez à la fourniture d'images pour les écrans haute résolution.</li> </ul> -<h2 id="Résumé_des_tests_de_lecteur_d'écran_sur_Android_et_iOS"><span class="tlid-translation translation"><span title="">Résumé des tests de lecteur d'écran sur Android et iOS</span></span></h2> +<h2 id="Résumé_des_tests_de_lecteur_d'écran_sur_Android_et_iOS">Résumé des tests de lecteur d'écran sur Android et iOS</h2> -<p><span class="tlid-translation translation"><span title="">Les plates-formes mobiles les plus courantes disposent de lecteurs d’écran entièrement fonctionnels.</span> <span title="">Celles-ci fonctionnent à peu près de la même manière que les lecteurs d’écran de bureau, sauf qu’elles sont largement utilisées avec des gestes tactiles plutôt que des combinaisons de touches.</span></span></p> +<p>Les plates-formes mobiles les plus courantes disposent de lecteurs d’écran entièrement fonctionnels. Celles-ci fonctionnent à peu près de la même manière que les lecteurs d’écran de bureau, sauf qu’elles sont largement utilisées avec des gestes tactiles plutôt que des combinaisons de touches.</p> -<p><span class="tlid-translation translation"><span title="">Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS.</span></span></p> +<p>Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS.</p> <h3 id="Android_TalkBack">Android TalkBack</h3> -<p><span class="tlid-translation translation"><span title="">Le lecteur d’écran TalkBack est intégré au système d’exploitation Android.</span></span></p> +<p>Le lecteur d’écran TalkBack est intégré au système d’exploitation Android.</p> -<p><span class="tlid-translation translation"><span title="">Pour l'activer, sélectionnez Paramètres> Accessibilité> TalkBack, puis appuyez sur le curseur pour l'activer.</span> <span title="">Suivez toute invite supplémentaire à l'écran qui vous est présentée.</span></span></p> +<p>Pour l'activer, sélectionnez Paramètres> Accessibilité> TalkBack, puis appuyez sur le curseur pour l'activer. Suivez toute invite supplémentaire à l'écran qui vous est présentée.</p> -<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Les anciennes versions de TalkBack sont activées dans</span></span> <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">slightly different ways</a>.</p> +<p><strong>Note:</strong> Les anciennes versions de TalkBack sont activées dans <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">slightly different ways</a>.</p> -<p><span class="tlid-translation translation"><span title="">Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes.</span> <span title="">Par exemple:</span></span></p> +<p>Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes. Par exemple:</p> <ol> - <li><span class="tlid-translation translation"><span title="">Une simple pression sur une application la sélectionne et l'appareil lit en quoi elle consiste.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Glisser vers la gauche ou la droite permet de se déplacer entre les applications, ou les boutons / contrôles si vous êtes dans une barre de contrôle.</span> <span title="">L'appareil lira chaque option.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Double-cliquer n'importe où ouvrira l'application / sélectionner l'option.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Vous pouvez également "explorer par le toucher" - maintenez votre doigt appuyé sur l'écran et faites-le glisser, et votre appareil lira les différentes applications / éléments que vous déplacez.</span></span></li> + <li>Une simple pression sur une application la sélectionne et l'appareil lit en quoi elle consiste.</li> + <li>Glisser vers la gauche ou la droite permet de se déplacer entre les applications, ou les boutons / contrôles si vous êtes dans une barre de contrôle. L'appareil lira chaque option.</li> + <li>Double-cliquer n'importe où ouvrira l'application / sélectionner l'option.</li> + <li>Vous pouvez également "explorer par le toucher" - maintenez votre doigt appuyé sur l'écran et faites-le glisser, et votre appareil lira les différentes applications / éléments que vous déplacez.</li> </ol> -<p><span class="tlid-translation translation"><span title="">Si vous souhaitez désactiver TalkBack:</span></span></p> +<p>Si vous souhaitez désactiver TalkBack:</p> <ol> - <li><span class="tlid-translation translation"><span title="">Accédez à votre application Paramètres en utilisant les gestes ci-dessus.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Accédez à Accessibilité> TalkBack</span></span> .</li> - <li><span class="tlid-translation translation"><span title="">Accédez au commutateur et activez-le pour le désactiver.</span></span> .</li> + <li>Accédez à votre application Paramètres en utilisant les gestes ci-dessus.</li> + <li>Accédez à Accessibilité> TalkBack .</li> + <li>Accédez au commutateur et activez-le pour le désactiver. .</li> </ol> -<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Vous pouvez accéder à votre écran d'accueil à tout moment en glissant vers le haut et à gauche dans un mouvement fluide.</span> <span title="">Si vous avez plus d'un écran d'accueil, vous pouvez passer d'un écran à l'autre en faisant glisser deux doigts vers la gauche et vers la droite.</span></span> .</p> +<p><strong>Note:</strong> Vous pouvez accéder à votre écran d'accueil à tout moment en glissant vers le haut et à gauche dans un mouvement fluide. Si vous avez plus d'un écran d'accueil, vous pouvez passer d'un écran à l'autre en faisant glisser deux doigts vers la gauche et vers la droite. .</p> -<p><span class="tlid-translation translation"><span title="">Pour une liste plus complète des gestes TalkBack, voir</span></span>  <a href="https://support.google.com/accessibility/android/answer/6151827">Use TalkBack gestures</a>.</p> +<p>Pour une liste plus complète des gestes TalkBack, voir  <a href="https://support.google.com/accessibility/android/answer/6151827">Use TalkBack gestures</a>.</p> -<h4 id="Déverrouiller_le_téléphone"><span class="tlid-translation translation"><span title="">Déverrouiller le téléphone</span></span></h4> +<h4 id="Déverrouiller_le_téléphone">Déverrouiller le téléphone</h4> -<p><span class="tlid-translation translation"><span title="">Lorsque TalkBack est activé, le déverrouillage du téléphone est un peu différent.</span></span></p> +<p>Lorsque TalkBack est activé, le déverrouillage du téléphone est un peu différent.</p> -<p><span class="tlid-translation translation"><span title="">Vous pouvez balayer deux doigts à partir du bas de l'écran de verrouillage.</span> <span title="">Si vous avez défini un code d'accès ou un modèle pour déverrouiller votre appareil, vous serez redirigé vers l'écran de saisie approprié pour le saisir.</span></span></p> +<p>Vous pouvez balayer deux doigts à partir du bas de l'écran de verrouillage. Si vous avez défini un code d'accès ou un modèle pour déverrouiller votre appareil, vous serez redirigé vers l'écran de saisie approprié pour le saisir.</p> -<p><span class="tlid-translation translation"><span title="">Vous pouvez également explorer en touchant le bouton <em>Déverrouiller</em> en bas au centre de l'écran, puis en appuyant deux fois.</span></span></p> +<p>Vous pouvez également explorer en touchant le bouton <em>Déverrouiller</em> en bas au centre de l'écran, puis en appuyant deux fois.</p> -<h4 id="Menus_globaux_et_locaux"><span class="tlid-translation translation"><span title="">Menus globaux et locaux</span></span></h4> +<h4 id="Menus_globaux_et_locaux">Menus globaux et locaux</h4> -<p><span class="tlid-translation translation"><span title="">TalkBack vous permet d'accéder aux menus contextuels globaux et locaux, où que vous ayez navigué sur l'appareil.</span> <span title="">Le premier fournit des options globales relatives à l'appareil dans son ensemble, et le second fournit des options relatives uniquement à l'application / à l'écran actuel.</span></span></p> +<p>TalkBack vous permet d'accéder aux menus contextuels globaux et locaux, où que vous ayez navigué sur l'appareil. Le premier fournit des options globales relatives à l'appareil dans son ensemble, et le second fournit des options relatives uniquement à l'application / à l'écran actuel.</p> -<h4 id="Pour_accéder_à _ces_menus"><span class="tlid-translation translation"><span title=""><strong>Pour accéder à ces menus</strong>:</span></span></h4> +<h4 id="Pour_accéder_à _ces_menus"><strong>Pour accéder à ces menus</strong>:</h4> <ol> - <li><span class="tlid-translation translation"><span title="">Accédez au menu global en glissant rapidement vers le bas, puis à droite</span></span> .</li> - <li><span class="tlid-translation translation"><span title="">Accédez au menu local en balayant rapidement vers le haut, puis à droite.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Balayez vers la gauche et la droite pour naviguer entre les différentes options.</span></span> .</li> - <li><span class="tlid-translation translation"><span title="">Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir.</span></span></li> + <li>Accédez au menu global en glissant rapidement vers le bas, puis à droite .</li> + <li>Accédez au menu local en balayant rapidement vers le haut, puis à droite.</li> + <li>Balayez vers la gauche et la droite pour naviguer entre les différentes options. .</li> + <li>Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir.</li> </ol> -<p><span class="tlid-translation translation"><span title="">Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir</span></span>  <a href="https://support.google.com/accessibility/android/answer/6007066">Use global and local context menus</a>.</p> +<p>Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir  <a href="https://support.google.com/accessibility/android/answer/6007066">Use global and local context menus</a>.</p> -<h4 id="Parcourir_des_pages_Web"><span class="tlid-translation translation"><span title="">Parcourir des pages Web</span></span></h4> +<h4 id="Parcourir_des_pages_Web">Parcourir des pages Web</h4> -<p><span class="tlid-translation translation"><span title="">Vous pouvez utiliser le menu contextuel local dans un navigateur Web pour rechercher des options permettant de naviguer dans des pages Web en utilisant uniquement les en-têtes, les contrôles de formulaire ou les liens, ou de naviguer ligne par ligne, etc.</span></span></p> +<p>Vous pouvez utiliser le menu contextuel local dans un navigateur Web pour rechercher des options permettant de naviguer dans des pages Web en utilisant uniquement les en-têtes, les contrôles de formulaire ou les liens, ou de naviguer ligne par ligne, etc.</p> -<p><span class="tlid-translation translation"><span title="">Par exemple, avec TalkBack activé:</span></span></p> +<p>Par exemple, avec TalkBack activé:</p> <ol> - <li><span class="tlid-translation translation"><span title="">Ouvrez votre navigateur web.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Activer la barre d'URL.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk.</span> <span title="">Pour entrer le texte de l'URL:</span></span> + <li>Ouvrez votre navigateur web.</li> + <li>Activer la barre d'URL.</li> + <li>Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL: <ul> - <li><span class="tlid-translation translation"><span title="">Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double tapant</span></span> .</li> - <li><span class="tlid-translation translation"><span title="">Maintenez votre doigt appuyé sur le clavier virtuel jusqu'à obtenir le caractère souhaité, puis relâchez-le pour le saisir.</span> <span title="">Répétez pour chaque </span></span>caractère<span class="tlid-translation translation"><span title="">.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.</span></span></li> + <li>Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double tapant .</li> + <li>Maintenez votre doigt appuyé sur le clavier virtuel jusqu'à obtenir le caractère souhaité, puis relâchez-le pour le saisir. Répétez pour chaque caractère.</li> + <li>Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.</li> </ul> </li> - <li><span class="tlid-translation translation"><span title="">Balayez vers la gauche et la droite pour vous déplacer entre différents éléments de la page.</span></span> .</li> - <li><span class="tlid-translation translation"><span title="">Faites glisser votre doigt vers le haut et vers la droite avec un mouvement fluide pour accéder au menu de contenu local.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Balayez vers la droite jusqu'à ce que vous trouviez l'option "En-têtes et points de repère".</span></span></li> - <li><span class="tlid-translation translation"><span title="">Appuyez deux fois pour le sélectionner.</span> <span title="">Vous pouvez maintenant glisser à gauche et à droite pour vous déplacer entre les rubriques et les points de repère ARIA.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Pour revenir au mode par défaut, entrez de nouveau dans le menu contextuel local en balayant l'écran vers le haut, le curseur à droite, sélectionnez "Par défaut", puis tapez deux fois pour l'activer.</span></span></li> + <li>Balayez vers la gauche et la droite pour vous déplacer entre différents éléments de la page. .</li> + <li>Faites glisser votre doigt vers le haut et vers la droite avec un mouvement fluide pour accéder au menu de contenu local.</li> + <li>Balayez vers la droite jusqu'à ce que vous trouviez l'option "En-têtes et points de repère".</li> + <li>Appuyez deux fois pour le sélectionner. Vous pouvez maintenant glisser à gauche et à droite pour vous déplacer entre les rubriques et les points de repère ARIA.</li> + <li>Pour revenir au mode par défaut, entrez de nouveau dans le menu contextuel local en balayant l'écran vers le haut, le curseur à droite, sélectionnez "Par défaut", puis tapez deux fois pour l'activer.</li> </ol> -<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Voir </span></span> aussi <a href="https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932">Get started on Android with TalkBack</a> <span class="tlid-translation translation"><span title="">pour obtenir une documentation plus complète.</span></span></p> +<p><strong>Note:</strong> Voir aussi <a href="https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932">Get started on Android with TalkBack</a> pour obtenir une documentation plus complète.</p> <h3 id="iOS_VoiceOver">iOS VoiceOver</h3> -<p><span class="tlid-translation translation"><span title="">Une version mobile de VoiceOver est intégrée au système d'exploitation iOS.</span></span></p> +<p>Une version mobile de VoiceOver est intégrée au système d'exploitation iOS.</p> -<p><span class="tlid-translation translation"><span title="">Pour l'activer, accédez à l'application <em>Paramètres</em>, puis sélectionnez <em>Général</em> > <em>Accessibilité</em> > <em>VoiceOver</em>.</span> <span title="">Appuyez sur le curseur <em>VoiceOver</em> pour l'activer (vous verrez également un certain nombre d'autres options liées à <em>VoiceOver</em> sur cette page).</span></span></p> +<p>Pour l'activer, accédez à l'application <em>Paramètres</em>, puis sélectionnez <em>Général</em> > <em>Accessibilité</em> > <em>VoiceOver</em>. Appuyez sur le curseur <em>VoiceOver</em> pour l'activer (vous verrez également un certain nombre d'autres options liées à <em>VoiceOver</em> sur cette page).</p> -<p><span class="tlid-translation translation"><span title="">Une fois que VoiceOver est activé, les gestes de contrôle de base de l'iOS seront un peu différents</span></span> :</p> +<p>Une fois que VoiceOver est activé, les gestes de contrôle de base de l'iOS seront un peu différents :</p> <ol> - <li><span class="tlid-translation translation"><span title="">Un simple tapement entraînera la sélection de l'élément sur lequel vous appuyez;</span> <span title="">votre appareil parlera de l'élément sur lequel vous avez tapé.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Vous pouvez également parcourir les éléments à l’écran en balayant vers la gauche ou vers la droite pour les déplacer, ou en faisant glisser votre doigt sur l’écran pour naviguer entre les différents éléments (lorsque vous trouvez l’élément souhaité, vous pouvez le retirer pour le sélectionner).</span></span></li> - <li><span class="tlid-translation translation"><span title="">Pour activer l'élément sélectionné (par exemple, ouvrir une application sélectionnée), appuyez deux fois n'importe où sur l'écran.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Faites glisser votre doigt avec trois doigts pour faire défiler une page.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Appuyez avec deux doigts pour effectuer une action liée au contexte - par exemple, prendre une photo alors que vous êtes dans l'application Appareil photo.</span></span></li> + <li>Un simple tapement entraînera la sélection de l'élément sur lequel vous appuyez; votre appareil parlera de l'élément sur lequel vous avez tapé.</li> + <li>Vous pouvez également parcourir les éléments à l’écran en balayant vers la gauche ou vers la droite pour les déplacer, ou en faisant glisser votre doigt sur l’écran pour naviguer entre les différents éléments (lorsque vous trouvez l’élément souhaité, vous pouvez le retirer pour le sélectionner).</li> + <li>Pour activer l'élément sélectionné (par exemple, ouvrir une application sélectionnée), appuyez deux fois n'importe où sur l'écran.</li> + <li>Faites glisser votre doigt avec trois doigts pour faire défiler une page.</li> + <li>Appuyez avec deux doigts pour effectuer une action liée au contexte - par exemple, prendre une photo alors que vous êtes dans l'application Appareil photo.</li> </ol> -<p><span class="tlid-translation translation"><span title="">Pour le désactiver à nouveau, revenez à <em>Paramètres</em>> <em>Général</em>> <em>Accessibilité</em>> <em>VoiceOver</em> en utilisant les gestes ci-dessus, puis basculez le curseur <em>VoiceOver</em> sur Désactivé.</span></span></p> +<p>Pour le désactiver à nouveau, revenez à <em>Paramètres</em>> <em>Général</em>> <em>Accessibilité</em>> <em>VoiceOver</em> en utilisant les gestes ci-dessus, puis basculez le curseur <em>VoiceOver</em> sur Désactivé.</p> -<h4 id="Déverrouiller_le_téléphone_2"><span class="tlid-translation translation"><span title="">Déverrouiller le téléphone</span></span></h4> +<h4 id="Déverrouiller_le_téléphone_2">Déverrouiller le téléphone</h4> -<p><span class="tlid-translation translation"><span title="">Pour déverrouiller le téléphone, vous devez appuyer sur le bouton d'accueil (ou balayer) comme d'habitude.</span> <span title="">Si vous avez défini un code d'authentification, vous pouvez sélectionner chaque numéro en balayant / glissant (comme expliqué ci-dessus), puis en appuyant deux fois pour entrer chaque numéro lorsque vous avez trouvé le bon.</span></span></p> +<p>Pour déverrouiller le téléphone, vous devez appuyer sur le bouton d'accueil (ou balayer) comme d'habitude. Si vous avez défini un code d'authentification, vous pouvez sélectionner chaque numéro en balayant / glissant (comme expliqué ci-dessus), puis en appuyant deux fois pour entrer chaque numéro lorsque vous avez trouvé le bon.</p> -<h4 id="Utiliser_le_rotor"><span class="tlid-translation translation"><span title="">Utiliser le rotor</span></span></h4> +<h4 id="Utiliser_le_rotor">Utiliser le rotor</h4> -<p><span class="tlid-translation translation"><span title="">Lorsque VoiceOver est activé, vous disposez d'une fonction de navigation appelée Rotor, qui vous permet de choisir rapidement parmi un certain nombre d'options utiles courantes.</span> <span title="">Pour l'utiliser:</span></span></p> +<p>Lorsque VoiceOver est activé, vous disposez d'une fonction de navigation appelée Rotor, qui vous permet de choisir rapidement parmi un certain nombre d'options utiles courantes. Pour l'utiliser:</p> <ol> - <li><span class="tlid-translation translation"><span title="">Tournez deux doigts sur l’écran comme si vous tourniez un cadran.</span> <span title="">Chaque option sera lue à voix haute au fur et à mesure que vous tournez.</span> <span title="">Vous pouvez aller et venir pour parcourir les options.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Une fois que vous avez trouvé l'option que vous voulez:</span></span> + <li>Tournez deux doigts sur l’écran comme si vous tourniez un cadran. Chaque option sera lue à voix haute au fur et à mesure que vous tournez. Vous pouvez aller et venir pour parcourir les options.</li> + <li>Une fois que vous avez trouvé l'option que vous voulez: <ul> - <li><span class="tlid-translation translation"><span title="">Relâchez vos doigts pour le sélectionner.</span></span></li> - <li><span class="tlid-translation translation"><span title="">S'il s'agit d'une option dont vous pouvez parcourir la valeur (telle que le volume ou la vitesse de parole), vous pouvez effectuer un balayage vers le haut ou le bas pour augmenter ou diminuer la valeur de l'élément sélectionné.</span></span></li> + <li>Relâchez vos doigts pour le sélectionner.</li> + <li>S'il s'agit d'une option dont vous pouvez parcourir la valeur (telle que le volume ou la vitesse de parole), vous pouvez effectuer un balayage vers le haut ou le bas pour augmenter ou diminuer la valeur de l'élément sélectionné.</li> </ul> </li> </ol> -<p><span class="tlid-translation translation"><span title="">Les options disponibles sous Rotor dépendent du contexte. Elles diffèrent en fonction de l'application ou de la vue dans laquelle vous vous trouvez (voir l'exemple ci-dessous).</span></span></p> +<p>Les options disponibles sous Rotor dépendent du contexte. Elles diffèrent en fonction de l'application ou de la vue dans laquelle vous vous trouvez (voir l'exemple ci-dessous).</p> -<h4 id="Parcourir_des_pages_Web_2"><span class="tlid-translation translation"><span title="">Parcourir des pages Web</span></span></h4> +<h4 id="Parcourir_des_pages_Web_2">Parcourir des pages Web</h4> -<p><span class="tlid-translation translation"><span title="">Essayons la navigation Web avec VoiceOver:</span></span></p> +<p>Essayons la navigation Web avec VoiceOver:</p> <ol> - <li><span class="tlid-translation translation"><span title="">Ouvrez votre navigateur web.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Activer la barre d'URL.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk.</span> <span title="">Pour entrer le texte de l'URL:</span></span> + <li>Ouvrez votre navigateur web.</li> + <li>Activer la barre d'URL.</li> + <li>Entrez une page Web comportant de nombreux en-têtes, telle que la page de couverture de bbc.co.uk. Pour entrer le texte de l'URL: <ul> - <li><span class="tlid-translation translation"><span title="">Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double-tapant.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Pour chaque caractère, maintenez votre doigt appuyé sur le clavier virtuel jusqu'à ce que vous obteniez le caractère souhaité, puis relâchez votre doigt pour le sélectionner.</span> <span title="">Appuyez deux fois pour le taper.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.</span></span></li> + <li>Sélectionnez la barre d’URL en glissant gauche / droite jusqu’à ce que vous y arriviez, puis en double-tapant.</li> + <li>Pour chaque caractère, maintenez votre doigt appuyé sur le clavier virtuel jusqu'à ce que vous obteniez le caractère souhaité, puis relâchez votre doigt pour le sélectionner. Appuyez deux fois pour le taper.</li> + <li>Une fois que vous avez terminé, trouvez la touche Entrée et appuyez dessus.</li> </ul> </li> - <li><span class="tlid-translation translation"><span title="">Balayez vers la gauche et la droite pour vous déplacer entre les éléments de la page.</span> <span title="">Vous pouvez appuyer deux fois sur un élément pour le sélectionner (par exemple, suivre un lien).</span></span></li> - <li><span class="tlid-translation translation"><span title="">Par défaut, l’option de rotor sélectionnée sera Speaking Rate;</span> <span title="">vous pouvez actuellement balayer de haut en bas pour augmenter ou diminuer le débit.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Maintenant, tournez deux doigts autour de l'écran comme un cadran pour afficher le rotor et passez d'une option à l'autre.</span> <span title="">Voici quelques exemples d'options disponibles:</span></span> + <li>Balayez vers la gauche et la droite pour vous déplacer entre les éléments de la page. Vous pouvez appuyer deux fois sur un élément pour le sélectionner (par exemple, suivre un lien).</li> + <li>Par défaut, l’option de rotor sélectionnée sera Speaking Rate; vous pouvez actuellement balayer de haut en bas pour augmenter ou diminuer le débit.</li> + <li>Maintenant, tournez deux doigts autour de l'écran comme un cadran pour afficher le rotor et passez d'une option à l'autre. Voici quelques exemples d'options disponibles: <ul> - <li><span class="tlid-translation translation"><span title=""><em>Taux de parole</em> : Modifiez le taux de parole.</span></span></li> - <li><span class="tlid-translation translation"><span title=""><em>Conteneurs </em>: déplacez-vous entre différents conteneurs sémantiques de la page.</span></span></li> - <li><span class="tlid-translation translation"><span title=""><em>En-têtes </em>: déplacez-vous entre les en-têtes de la page.</span></span></li> - <li><span class="tlid-translation translation"><span title=""><em>Liens</em> : permet de se déplacer entre les liens de la page.</span></span></li> - <li><span class="tlid-translation translation"><span title=""><em>Contrôles de formulaire </em>: déplacez-vous entre les contrôles de formulaire de la page.</span></span></li> - <li><span class="tlid-translation translation"><span title=""><em>Langue</em> : déplacez-vous entre différentes traductions, si elles sont disponibles.</span></span></li> + <li><em>Taux de parole</em> : Modifiez le taux de parole.</li> + <li><em>Conteneurs </em>: déplacez-vous entre différents conteneurs sémantiques de la page.</li> + <li><em>En-têtes </em>: déplacez-vous entre les en-têtes de la page.</li> + <li><em>Liens</em> : permet de se déplacer entre les liens de la page.</li> + <li><em>Contrôles de formulaire </em>: déplacez-vous entre les contrôles de formulaire de la page.</li> + <li><em>Langue</em> : déplacez-vous entre différentes traductions, si elles sont disponibles.</li> </ul> </li> - <li><span class="tlid-translation translation"><span title="">S<em>électionnez les en-têtes</em>.</span> <span title="">Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page.</span></span></li> + <li>S<em>électionnez les en-têtes</em>. Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page.</li> </ol> -<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir </span></span> aussi <a href="https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3">Test Accessibility on Your Device with VoiceOver</a>.</p> +<p><strong>Note:</strong> Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir aussi <a href="https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3">Test Accessibility on Your Device with VoiceOver</a>.</p> -<h2 id="Mécanismes_de_contrôle"><span class="tlid-translation translation"><span title="">Mécanismes de contrôle</span></span></h2> +<h2 id="Mécanismes_de_contrôle">Mécanismes de contrôle</h2> -<p><span class="tlid-translation translation"><span title="">Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle</span></span>  (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events">Mouse-specific events</a>). <span class="tlid-translation translation"><span title="">En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée.</span></span></p> +<p>Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle  (see <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events">Mouse-specific events</a>). En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée.</p> -<p><span class="tlid-translation translation"><span title="">Par exemple, l'événement </span></span>  <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick">click</a> <span class="tlid-translation translation"><span title="">est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile.</span> <span title="">Essayez notre</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html">simple-button-example.html</a> exemple (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html">see it running live</a>) <span class="tlid-translation translation"><span title="">pour voir ce que nous entendons.</span></span> .</p> +<p>Par exemple, l'événement  <a href="/fr/docs/Web/API/GlobalEventHandlers/onclick">click</a> est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile. Essayez notre <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html">simple-button-example.html</a> exemple (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html">see it running live</a>) pour voir ce que nous entendons. .</p> -<p><span class="tlid-translation translation"><span title="">Sinon, des événements spécifiques à la souris, tels que </span></span>  <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousedown">mousedown</a> et <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmouseup">mouseup</a> <span class="tlid-translation translation"><span title="">créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris.</span></span></p> +<p>Sinon, des événements spécifiques à la souris, tels que  <a href="/fr/docs/Web/API/GlobalEventHandlers/onmousedown">mousedown</a> et <a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseup">mouseup</a> créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris.</p> -<p><span class="tlid-translation translation"><span title="">Si vous essayez de contrôler notre exemple</span></span>  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html">simple-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html">see example live</a>) <span class="tlid-translation translation"><span title="">avec un clavier ou une touche, vous verrez le problème.</span> <span title="">Cela se produit car nous utilisons un code tel que:</span></span></p> +<p>Si vous essayez de contrôler notre exemple  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html">simple-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html">see example live</a>) avec un clavier ou une touche, vous verrez le problème. Cela se produit car nous utilisons un code tel que:</p> -<pre><code>div.onmousedown = function() { +<pre class="brush: js">div.onmousedown = function() { initialBoxX = div.offsetLeft; initialBoxY = div.offsetTop; movePanel(); } -document.onmouseup = stopMove;</code></pre> +document.onmouseup = stopMove;</pre> -<p><span class="tlid-translation translation"><span title="">Pour activer d'autres formes de contrôle, vous devez utiliser des événements différents mais équivalents. Par exemple, les événements tactiles fonctionnent sur les périphériques à écran tactile:</span></span></p> +<p>Pour activer d'autres formes de contrôle, vous devez utiliser des événements différents mais équivalents. Par exemple, les événements tactiles fonctionnent sur les périphériques à écran tactile:</p> -<pre><code>div.ontouchstart = function(e) { +<pre class="brush: js">div.ontouchstart = function(e) { initialBoxX = div.offsetLeft; initialBoxY = div.offsetTop; positionHandler(e); movePanel(); } -panel.ontouchend = stopMove;</code></pre> +panel.ontouchend = stopMove;</pre> -<p><span class="tlid-translation translation"><span title="">Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles</span></span> — voir <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html">multi-control-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html">see the example live</a> aussi).</p> +<p>Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles — voir <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html">multi-control-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html">see the example live</a> aussi).</p> -<p><strong>Note:</strong> <span class="tlid-translation translation"><span title="">Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à </span></span>  <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms">Implementing game control mechanisms</a>.</p> +<p><strong>Note:</strong> Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à  <a href="/fr/docs/Games/Techniques/Control_mechanisms">Implementing game control mechanisms</a>.</p> <h2 id="Responsive_design">Responsive design</h2> -<p><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Responsive">Responsive design</a> <span class="tlid-translation translation"><span title="">a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils.</span></span> .</p> +<p><a href="/fr/docs/Web/Apps/Progressive/Responsive">Responsive design</a> a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils. .</p> -<p><span class="tlid-translation translation"><span title="">En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants:</span></span></p> +<p>En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Adéquation des mises en page pour les appareils mobiles.</span> <span title="">Une mise en page à plusieurs colonnes ne fonctionnera pas aussi bien sur un écran étroit, par exemple, et il faudra peut-être augmenter la taille du texte pour le rendre lisible.</span> <span title="">Ces problèmes peuvent être résolus en créant une mise en page réactive utilisant des technologies telles que</span></span>  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">media queries</a>, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, et <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>.</li> - <li><span class="tlid-translation translation"><span title="">Conserver les tailles d’image téléchargées.</span> <span title="">En général, les appareils de petite taille n’auront pas besoin d’images aussi volumineuses que leurs homologues de bureau, et ils risquent davantage d’être sur des connexions réseau lentes.</span> <span title="">Par conséquent, il est sage de servir des images plus petites sur des dispositifs à écran étroit, le cas échéant.</span> <span title="">Vous pouvez gérer cela en utilisant</span></span>  <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</li> - <li><span class="tlid-translation translation"><span title="">Penser aux hautes résolutions.</span> <span title="">De nombreux appareils mobiles ont des écrans haute résolution et ont donc besoin d'images de résolution supérieure pour que l'affichage puisse continuer à être net et net.</span> <span title="">Encore une fois, vous pouvez servir des images selon vos besoins en utilisant des techniques d’image réactives.</span> <span title="">De plus, de nombreuses exigences en matière d'images peuvent être satisfaites grâce au format d'images vectorielles SVG, bien pris en charge par les navigateurs actuels.</span> <span title="">SVG a une petite taille de fichier et restera net quelle que soit la taille affichée</span></span>  (voir <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the web</a> <span class="tlid-translation translation"><span title="">pour plus de détails</span></span> ).</li> + <li>Adéquation des mises en page pour les appareils mobiles. Une mise en page à plusieurs colonnes ne fonctionnera pas aussi bien sur un écran étroit, par exemple, et il faudra peut-être augmenter la taille du texte pour le rendre lisible. Ces problèmes peuvent être résolus en créant une mise en page réactive utilisant des technologies telles que  <a href="/fr/docs/Web/CSS/Media_Queries">media queries</a>, <a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, et <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>.</li> + <li>Conserver les tailles d’image téléchargées. En général, les appareils de petite taille n’auront pas besoin d’images aussi volumineuses que leurs homologues de bureau, et ils risquent davantage d’être sur des connexions réseau lentes. Par conséquent, il est sage de servir des images plus petites sur des dispositifs à écran étroit, le cas échéant. Vous pouvez gérer cela en utilisant  <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</li> + <li>Penser aux hautes résolutions. De nombreux appareils mobiles ont des écrans haute résolution et ont donc besoin d'images de résolution supérieure pour que l'affichage puisse continuer à être net et net. Encore une fois, vous pouvez servir des images selon vos besoins en utilisant des techniques d’image réactives. De plus, de nombreuses exigences en matière d'images peuvent être satisfaites grâce au format d'images vectorielles SVG, bien pris en charge par les navigateurs actuels. SVG a une petite taille de fichier et restera net quelle que soit la taille affichée  (voir <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the web</a> pour plus de détails ).</li> </ul> -<p><strong>Note: </strong> <span class="tlid-translation translation"><span title="">Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus).</span></span></p> +<p><strong>Note: </strong> Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus).</p> -<h3 id="Considérations_mobiles_spécifiques"><span class="tlid-translation translation"><span title="">Considérations mobiles spécifiques</span></span></h3> +<h3 id="Considérations_mobiles_spécifiques">Considérations mobiles spécifiques</h3> -<p><span class="tlid-translation translation"><span title="">Il existe d'autres problèmes importants à prendre en compte lors de la création de sites plus accessibles sur mobile.</span> <span title="">Nous en avons énuméré quelques-uns ici, mais nous en ajouterons davantage lorsque nous y penserons.</span></span></p> +<p>Il existe d'autres problèmes importants à prendre en compte lors de la création de sites plus accessibles sur mobile. Nous en avons énuméré quelques-uns ici, mais nous en ajouterons davantage lorsque nous y penserons.</p> -<h4 id="Ne_pas_désactiver_le_zoom"><span class="tlid-translation translation"><span title="">Ne pas désactiver le zoom</span></span></h4> +<h4 id="Ne_pas_désactiver_le_zoom">Ne pas désactiver le zoom</h4> -<p><span class="tlid-translation translation"><span title="">En utilisant</span></span>  <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, <span class="tlid-translation translation"><span title="">il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre</span></span> {{htmlelement("head")}}:</p> +<p>En utilisant  <a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre {{htmlelement("head")}}:</p> -<pre><code><meta name="viewport" content="user-scalable=no"></code></pre> +<pre class="brush: html"><meta name="viewport" content="user-scalable=no"></pre> -<p><span class="tlid-translation translation"><span title="">Vous ne devriez jamais faire cela autant que possible - beaucoup de gens comptent sur le zoom pour voir le contenu de votre site web, aussi, enlever cette fonctionnalité est une très mauvaise idée.</span> <span title="">Il y a certaines situations où le zoom peut casser l'interface utilisateur;</span> <span title="">Dans de tels cas, si vous estimez que vous devez absolument désactiver le zoom, vous devez fournir un autre type d’équivalent, tel qu’une commande permettant d’augmenter la taille du texte de manière à ne pas endommager votre interface utilisateur.</span></span></p> +<p>Vous ne devriez jamais faire cela autant que possible - beaucoup de gens comptent sur le zoom pour voir le contenu de votre site web, aussi, enlever cette fonctionnalité est une très mauvaise idée. Il y a certaines situations où le zoom peut casser l'interface utilisateur; Dans de tels cas, si vous estimez que vous devez absolument désactiver le zoom, vous devez fournir un autre type d’équivalent, tel qu’une commande permettant d’augmenter la taille du texte de manière à ne pas endommager votre interface utilisateur.</p> -<h4 id="Garder_les_menus_accessibles"><span class="tlid-translation translation"><span title="">Garder les menus accessibles</span></span></h4> +<h4 id="Garder_les_menus_accessibles">Garder les menus accessibles</h4> -<p><span class="tlid-translation translation"><span title="">Étant donné que l'écran est beaucoup plus étroit sur les appareils mobiles, il est très courant d'utiliser des requêtes multimédia et d'autres technologies pour réduire le menu de navigation à une minuscule icône en haut de l'écran, sur laquelle vous pouvez appuyer pour afficher le menu uniquement si</span> <span title="">c'est nécessaire - lorsque le site est visualisé sur mobile.</span> <span title="">Ceci est généralement représenté par une icône "trois lignes horizontales" et le motif de conception est par conséquent appelé "menu hamburger".</span></span></p> +<p>Étant donné que l'écran est beaucoup plus étroit sur les appareils mobiles, il est très courant d'utiliser des requêtes multimédia et d'autres technologies pour réduire le menu de navigation à une minuscule icône en haut de l'écran, sur laquelle vous pouvez appuyer pour afficher le menu uniquement si c'est nécessaire - lorsque le site est visualisé sur mobile. Ceci est généralement représenté par une icône "trois lignes horizontales" et le motif de conception est par conséquent appelé "menu hamburger".</p> -<p><span class="tlid-translation translation"><span title="">Lorsque vous implémentez un tel menu, vous devez vous assurer que le contrôle qui le révèle est accessible par les mécanismes de contrôle appropriés (normalement tactile pour mobile), comme indiqué dans</span></span> {{anch("Control mechanisms")}} <span class="tlid-translation translation"><span title="">ci-dessus, et que</span> <span title="">le reste de la page est déplacé ou caché d'une manière ou d'une autre pendant l'accès au menu, afin d'éviter toute confusion lors de la navigation.</span></span> .</p> +<p>Lorsque vous implémentez un tel menu, vous devez vous assurer que le contrôle qui le révèle est accessible par les mécanismes de contrôle appropriés (normalement tactile pour mobile), comme indiqué dans {{anch("Control mechanisms")}} ci-dessus, et que le reste de la page est déplacé ou caché d'une manière ou d'une autre pendant l'accès au menu, afin d'éviter toute confusion lors de la navigation. .</p> -<p><span class="tlid-translation translation"><span title="">Cliquez ici pour un</span></span>  <a href="http://fritz-weisshart.de/meg_men/">good hamburger menu example</a>.</p> +<p>Cliquez ici pour un  <a href="http://fritz-weisshart.de/meg_men/">good hamburger menu example</a>.</p> -<h2 id="Entrée_utilisateur"><span class="tlid-translation translation"><span title="">Entrée utilisateur</span></span></h2> +<h2 id="Entrée_utilisateur">Entrée utilisateur</h2> -<p><span class="tlid-translation translation"><span title="">Sur les appareils mobiles, la saisie de données a tendance à être plus agaçante pour les utilisateurs que l'expérience équivalente sur les ordinateurs de bureau.</span> <span title="">Il est plus pratique de taper du texte dans les entrées de formulaire à l'aide d'un clavier d'ordinateur de bureau ou d'ordinateur portable que d'un clavier virtuel à écran tactile ou d'un petit clavier physique mobile.</span></span></p> +<p>Sur les appareils mobiles, la saisie de données a tendance à être plus agaçante pour les utilisateurs que l'expérience équivalente sur les ordinateurs de bureau. Il est plus pratique de taper du texte dans les entrées de formulaire à l'aide d'un clavier d'ordinateur de bureau ou d'ordinateur portable que d'un clavier virtuel à écran tactile ou d'un petit clavier physique mobile.</p> -<p><span class="tlid-translation translation"><span title="">Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire.</span> <span title="">Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu</span></span>  {{htmlelement("select")}} <span class="tlid-translation translation"><span title="">contenant les options les plus courantes (ce qui aide également à </span> <span title="">cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes.</span> <span title="">Vous pouvez voir un exemple simple de cette idée en action dans</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html">common-job-types.html</a> ( <span class="tlid-translation translation"><span title="">voir le</span></span> <a href="http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html">common jobs example live</a>).</p> +<p>Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire. Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu  {{htmlelement("select")}} contenant les options les plus courantes (ce qui aide également à cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes. Vous pouvez voir un exemple simple de cette idée en action dans <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html">common-job-types.html</a> ( voir le <a href="http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html">common jobs example live</a>).</p> -<p><span class="tlid-translation translation"><span title="">Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil.</span> <span title="">Voir</span></span>  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html">html5-form-examples.html</a> <span class="tlid-translation translation"><span title=""> pour quelques exemples</span></span> (voir <a href="http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html">HTML5 form examples live</a>) — <span class="tlid-translation translation"><span title="">essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple:</span></span></p> +<p>Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil. Voir  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html">html5-form-examples.html</a> pour quelques exemples (voir <a href="http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html">HTML5 form examples live</a>) — essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Les types</span></span>  <code>number</code>, <code>tel</code>, et <code>email</code> <span class="tlid-translation translation"><span title="">affichent des claviers virtuels appropriés pour la saisie de numéros / numéros de téléphone.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Les types</span></span> <code>time</code> et <code>date</code> <span class="tlid-translation translation"><span title="">affichent des sélecteurs appropriés pour la sélection des heures et des dates.</span></span> .</li> + <li>Les types  <code>number</code>, <code>tel</code>, et <code>email</code> affichent des claviers virtuels appropriés pour la saisie de numéros / numéros de téléphone.</li> + <li>Les types <code>time</code> et <code>date</code> affichent des sélecteurs appropriés pour la sélection des heures et des dates. .</li> </ul> -<p><span class="tlid-translation translation"><span title="">Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités.</span> <span title="">Reportez-vous à </span></span>  <a href="http://diveinto.html5doctor.com/detect.html#input-types">input types</a> <span class="tlid-translation translation"><span title="">pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article </span></span> <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">feature detection article</a> <span class="tlid-translation translation"><span title="">pour en savoir plus.</span></span> .</p> +<p>Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités. Reportez-vous à  <a href="http://diveinto.html5doctor.com/detect.html#input-types">input types</a> pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">feature detection article</a> pour en savoir plus. .</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="">Dans cet article, nous vous avons fourni des détails sur les problèmes courants spécifiques à l'accessibilité mobile et sur la façon de les résoudre.</span> <span title="">Nous vous avons également montré comment utiliser les lecteurs d'écran les plus courants pour vous aider à effectuer des tests d'accessibilité.</span></span></p> +<p>Dans cet article, nous vous avons fourni des détails sur les problèmes courants spécifiques à l'accessibilité mobile et sur la façon de les résoudre. Nous vous avons également montré comment utiliser les lecteurs d'écran les plus courants pour vous aider à effectuer des tests d'accessibilité.</p> -<div class="text-wrap tlid-copy-target"> -<h4 class="result-shield-container tlid-copy-target" id="Voir_également"><span class="tlid-translation translation"><span title="">Voir également</span></span></h4> -</div> +<h3 id="Voir_également">Voir également</h3> <ul> - <li><a href="https://www.smashingmagazine.com/guidelines-for-mobile-web-development/">Guidelines For Mobile Web Development</a> — <span class="tlid-translation translation"><span title="">Une liste d'articles dans Smashing Magazine couvrant différentes techniques de conception de sites Web mobiles.</span></span></li> - <li><a href="http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644">Make your site work on touch devices</a> — <span class="tlid-translation translation"><span title="">Article utile sur l'utilisation d'événements tactiles pour que les interactions fonctionnent sur les appareils mobiles.</span></span></li> + <li><a href="https://www.smashingmagazine.com/guidelines-for-mobile-web-development/">Guidelines For Mobile Web Development</a> — Une liste d'articles dans Smashing Magazine couvrant différentes techniques de conception de sites Web mobiles.</li> + <li><a href="http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644">Make your site work on touch devices</a> — Article utile sur l'utilisation d'événements tactiles pour que les interactions fonctionnent sur les appareils mobiles.</li> </ul> <div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "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="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> + <li><a href="/fr/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/fr/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> </ul> </div> </div> diff --git a/files/fr/learn/accessibility/multimedia/index.html b/files/fr/learn/accessibility/multimedia/index.html index d16e2a3bc0..e957ae2002 100644 --- a/files/fr/learn/accessibility/multimedia/index.html +++ b/files/fr/learn/accessibility/multimedia/index.html @@ -18,55 +18,51 @@ original_slug: Apprendre/a11y/Multimedia <div>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div> -<p class="summary"><span class="tlid-translation translation"><span title="">Le multimédia est une autre catégorie de contenu susceptible de créer des problèmes d'accessibilité: les contenus vidéo, audio et images doivent disposer de solutions de remplacement textuelles appropriées pour être compris par les technologies d'assistance et leurs utilisateurs.</span> <span title="">Cet article montre comment.</span></span></p> +<p>Le multimédia est une autre catégorie de contenu susceptible de créer des problèmes d'accessibilité: les contenus vidéo, audio et images doivent disposer de solutions de remplacement textuelles appropriées pour être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> - <th scope="row"><span class="tlid-translation translation"><span title="">Conditions</span></span> requise:</th> - <td><span class="tlid-translation translation"><span title="">Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension de</span></span> <a href="/fr/docs/Apprendre/a11y/What_is_accessibility"> Qu'est ce que l'accessibilité?</a></td> + <th scope="row">Conditions requise:</th> + <td>Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une 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">Objectif:</th> - <td><span class="tlid-translation translation"><span title="">Comprendre les problèmes d'accessibilité derrière le multimédia et comment les résoudre</span></span> .</td> + <td>Comprendre les problèmes d'accessibilité derrière le multimédia et comment les résoudre .</td> </tr> </tbody> </table> -<h2 id="Multimédia_et_accessibilité"><span class="tlid-translation translation"><span title="">Multimédia et accessibilité</span></span></h2> +<h2 id="Multimédia_et_accessibilité">Multimédia et accessibilité</h2> -<p><span class="tlid-translation translation"><span title="">Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes.</span> <span title="">(avec</span></span>  <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> l'attribut).</p> +<p>Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes. (avec  <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> l'attribut).</p> -<p><span class="tlid-translation translation"><span title="">Cet article, par contre, examine une autre catégorie générale de contenu pour laquelle il est difficile d’assurer l’accessibilité au multimédia.</span> <span title="">Les images, les vidéos, les éléments {{htmlelement ("canvas")}} les animations Flash, etc. ne sont pas aussi faciles à comprendre par les lecteurs d'écran ou à naviguer au clavier, et nous devons leur donner un coup de main.</span></span></p> +<p>Cet article, par contre, examine une autre catégorie générale de contenu pour laquelle il est difficile d’assurer l’accessibilité au multimédia. Les images, les vidéos, les éléments {{htmlelement ("canvas")}} les animations Flash, etc. ne sont pas aussi faciles à comprendre par les lecteurs d'écran ou à naviguer au clavier, et nous devons leur donner un coup de main.</p> -<p><span class="tlid-translation translation"><span title="">Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniques disponibles pour rendre le multimédia plus accessible.</span></span></p> +<p>Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniques disponibles pour rendre le multimédia plus accessible.</p> <h2 id="Simple_images">Simple images</h2> -<p><span class="tlid-translation translation"><span title="">Nous avons déjà couvert des alternatives textuelles simples pour les images HTML 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 pouvez vous y référer pour plus de détails.</span> <span title="">En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.</span></span></p> +<p>Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article  <a href="/fr/docs/Apprendre/a11y/HTML"> HTML : une bonne base pour l'accessibilité</a> — vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.</p> -<p> </p> - -<div class="text-wrap tlid-copy-target"> -<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation"><span title="">Par exemple</span></span>:</div> -</div> +<p>Par exemple:</p> <pre class="brush: html"><img src="dinosaur.png" - alt=" <span class="tlid-translation translation"><span title="">Un Tyrannosaure Rex rouge: Un dinosaure a deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tete avec beaucoup de dents acerees</span></span> ."> + alt=" Un Tyrannosaure Rex rouge: Un dinosaure a deux pattes se tenant droit comme un humain, avec de petits bras et une grosse tete avec beaucoup de dents acerees ."> </pre> -<h2 id="Commandes_audio_et_vidéo_accessibles"><span class="tlid-translation translation"><span title="">Commandes audio et vidéo accessibles</span></span></h2> +<h2 id="Commandes_audio_et_vidéo_accessibles">Commandes audio et vidéo accessibles</h2> -<p><span class="tlid-translation translation"><span title="">La mise en œuvre de contrôles audio / vidéo sur le Web ne devrait pas poser de problème, n'est-ce pas?</span> <span title="">Enquêtons</span></span> .</p> +<p>La mise en œuvre de contrôles audio / vidéo sur le Web ne devrait pas poser de problème, n'est-ce pas? Enquêtons .</p> -<h3 id="Le_problème_avec_les_contrôles_HTML5_natifs"><span class="tlid-translation translation"><span title="">Le problème avec les contrôles HTML5 natifs</span></span></h3> +<h3 id="Le_problème_avec_les_contrôles_HTML5_natifs">Le problème avec les contrôles HTML5 natifs</h3> -<p><span class="tlid-translation translation"><span title="">Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement.</span> <span title="">Par exemple (voir</span></span>  <code>native-controls.html</code> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html">code source</a> et <a href="https://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html">en direct</a>):</p> +<p>Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement. Par exemple (voir  <code>native-controls.html</code> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html">code source</a> et <a href="https://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html">en direct</a>):</p> <pre class="brush: html"><audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> - <p> <span class="tlid-translation translation"><span title="">Votre navigateur ne supporte pas l\'audio HTML5.</span> <span title="">Voici un</span></span> <a href="viper.mp3"> <span class="tlid-translation translation"><span title="">lien vers l\'audio</span></span> </a> <span class="tlid-translation translation"><span title="">au lieu</span></span> .</p> + <p> Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="viper.mp3"> lien vers l\'audio </a> au lieu .</p> </audio> <br> @@ -74,43 +70,43 @@ original_slug: Apprendre/a11y/Multimedia <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> - <p><span class="tlid-translation translation"><span title="">Votre navigateur ne supporte pas l\'audio HTML5.</span> <span title="">Voici un</span></span> <a href="rabbit320.mp4"><span class="tlid-translation translation"><span title="">lien vers la</span></span> video</a> instead.</p> + <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p> </video></pre> -<p><span class="tlid-translation translation"><span title="">L'attribut controls comporte des boutons de lecture / pause, une barre de recherche, etc. - les commandes de base que vous êtes en droit d'attendre d'un lecteur multimédia.</span> <span title="">Il semble que dans Firefox et Chrome</span></span> :</p> +<p>L'attribut controls comporte des boutons de lecture / pause, une barre de recherche, etc. - les commandes de base que vous êtes en droit d'attendre d'un lecteur multimédia. Il semble que dans Firefox et Chrome :</p> -<p><img alt="Screenshot of Video Controls in Firefox" src="https://mdn.mozillademos.org/files/14440/native-controls-firefox.png" style="display: block; height: 361px; margin: 0px auto; width: 400px;"></p> +<p><img alt="Screenshot of Video Controls in Firefox" src="native-controls-firefox.png"></p> -<p><img alt="Screenshot of Video Controls in Chrome" src="https://mdn.mozillademos.org/files/14438/native-controls-chrome.png" style="display: block; height: 344px; margin: 0px auto; width: 400px;"></p> +<p><img alt="Screenshot of Video Controls in Chrome" src="native-controls-chrome.png"></p> -<p><span class="tlid-translation translation"><span title="">Cependant, il y a des problèmes avec ces contrôles</span></span> :</p> +<p>Cependant, il y a des problèmes avec ces contrôles :</p> <ul> - <li><span class="tlid-translation translation"><span title="">Ils ne sont pas accessibles au clavier, dans aucun navigateur, sauf Opera.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Différents navigateurs donnent aux contrôles natifs un style et des fonctionnalités différents. Ils ne sont pas stylables, ce qui signifie qu'ils ne peuvent pas être facilement conçus pour suivre un guide de style du site.</span></span> .</li> + <li>Ils ne sont pas accessibles au clavier, dans aucun navigateur, sauf Opera.</li> + <li>Différents navigateurs donnent aux contrôles natifs un style et des fonctionnalités différents. Ils ne sont pas stylables, ce qui signifie qu'ils ne peuvent pas être facilement conçus pour suivre un guide de style du site. .</li> </ul> -<p><span class="tlid-translation translation"><span title="">Pour remédier à cela, nous pouvons créer nos propres contrôles personnalisés.</span> <span title="">Regardons comment.</span></span></p> +<p>Pour remédier à cela, nous pouvons créer nos propres contrôles personnalisés. Regardons comment.</p> -<h3 id="Création_de_contrôles_audio_et_vidéo_personnalisés"><span class="tlid-translation translation"><span title="">Création de contrôles audio et vidéo personnalisés</span></span></h3> +<h3 id="Création_de_contrôles_audio_et_vidéo_personnalisés">Création de contrôles audio et vidéo personnalisés</h3> -<p><span class="tlid-translation translation"><span title="">La vidéo et l'audio HTML5 partagent une API - HTML Media Element - qui vous permet de mapper des fonctionnalités personnalisées à des boutons et à d'autres commandes, que vous définissez vous-même.</span></span> .</p> +<p>La vidéo et l'audio HTML5 partagent une API - HTML Media Element - qui vous permet de mapper des fonctionnalités personnalisées à des boutons et à d'autres commandes, que vous définissez vous-même. .</p> -<p><span class="tlid-translation translation"><span title="">Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisés</span></span> .</p> +<p>Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisés .</p> <h4 id="Basic_setup">Basic setup</h4> -<p><span class="tlid-translation translation"><span title="">Tout d'abord, prenez une copie de notre</span></span>  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html">custom-controls-start.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css">custom-controls.css</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4">rabbit320.mp4</a>, et <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm">rabbit320.webm</a> <span class="tlid-translation translation"><span title="">fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur</span></span> .</p> +<p>Tout d'abord, prenez une copie de notre  <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html">custom-controls-start.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css">custom-controls.css</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4">rabbit320.mp4</a>, et <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm">rabbit320.webm</a> fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur .</p> -<p><span class="tlid-translation translation"><span title="">Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire</span></span> .</p> +<p>Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire .</p> -<p><span class="tlid-translation translation"><span title="">Tout d’abord, regardons le code HTML pour le lecteur vidéo, dans le code HTML:</span></span></p> +<p>Tout d’abord, regardons le code HTML pour le lecteur vidéo, dans le code HTML:</p> <pre class="brush: html"><section class="player"> <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> - <p><span class="tlid-translation translation"><span title="">Votre navigateur ne supporte pas l\'audio HTML5.</span> <span title="">Voici un</span></span> <a href="rabbit320.mp4"><span class="tlid-translation translation"><span title="">lien vers la</span></span> video</a> instead.</p> + <p>Votre navigateur ne supporte pas l\'audio HTML5. Voici un <a href="rabbit320.mp4">lien vers la video</a> instead.</p> </video> <div class="controls"> @@ -124,9 +120,9 @@ original_slug: Apprendre/a11y/Multimedia <h4 id="JavaScript_basic_setup">JavaScript basic setup</h4> -<p><span class="tlid-translation translation"><span title="">Nous avons inséré quelques boutons de commande simples sous notre vidéo.</span> <span title="">Bien sûr, ces contrôles ne feront rien par défaut;</span> <span title="">pour ajouter des fonctionnalités, nous allons utiliser JavaScript</span></span> .</p> +<p>Nous avons inséré quelques boutons de commande simples sous notre vidéo. Bien sûr, ces contrôles ne feront rien par défaut; pour ajouter des fonctionnalités, nous allons utiliser JavaScript .</p> -<p><span class="tlid-translation translation"><span title="">Nous devrons d’abord stocker les références à chacun des contrôles - ajoutez ce qui suit en haut de votre fichier JavaScript:</span></span></p> +<p>Nous devrons d’abord stocker les références à chacun des contrôles - ajoutez ce qui suit en haut de votre fichier JavaScript:</p> <pre class="brush: js">var playPauseBtn = document.querySelector('.playpause'); var stopBtn = document.querySelector('.stop'); @@ -134,21 +130,21 @@ var rwdBtn = document.querySelector('.rwd'); var fwdBtn = document.querySelector('.fwd'); var timeLabel = document.querySelector('.time');</pre> -<p><span class="tlid-translation translation"><span title="">Ensuite, nous devons saisir une référence au lecteur vidéo / audio lui-même - ajoutez cette ligne sous les lignes précédentes:</span></span></p> +<p>Ensuite, nous devons saisir une référence au lecteur vidéo / audio lui-même - ajoutez cette ligne sous les lignes précédentes:</p> <pre class="brush: js">var player = document.querySelector('video');</pre> -<p><span class="tlid-translation translation"><span title="">Ceci contient une référence à un objet {{domxref ("HTMLMediaElement")}} qui possède plusieurs propriétés et méthodes utiles disponibles qui peuvent être utilisées pour connecter des fonctionnalités à nos boutons.</span></span></p> +<p>Ceci contient une référence à un objet {{domxref ("HTMLMediaElement")}} qui possède plusieurs propriétés et méthodes utiles disponibles qui peuvent être utilisées pour connecter des fonctionnalités à nos boutons.</p> -<p><span class="tlid-translation translation"><span title="">Avant de passer à la création de notre fonctionnalité de bouton, supprimons les contrôles natifs afin qu'ils ne gênent pas nos contrôles personnalisés.</span> <span title="">Ajoutez ce qui suit, encore une fois au bas de votre JavaScript:</span></span></p> +<p>Avant de passer à la création de notre fonctionnalité de bouton, supprimons les contrôles natifs afin qu'ils ne gênent pas nos contrôles personnalisés. Ajoutez ce qui suit, encore une fois au bas de votre JavaScript:</p> <pre class="brush: js">player.removeAttribute('controls');</pre> -<p><span class="tlid-translation translation"><span title="">Le fait de procéder ainsi plutôt que de ne pas inclure les attributs de contrôle en premier lieu présente l'avantage que si notre JavaScript échoue pour une raison quelconque, l'utilisateur dispose toujours de certains contrôles.</span></span></p> +<p>Le fait de procéder ainsi plutôt que de ne pas inclure les attributs de contrôle en premier lieu présente l'avantage que si notre JavaScript échoue pour une raison quelconque, l'utilisateur dispose toujours de certains contrôles.</p> -<h4 id="Câbler_nos_boutons"><span class="tlid-translation translation"><span title="">Câbler nos boutons</span></span></h4> +<h4 id="Câbler_nos_boutons">Câbler nos boutons</h4> -<p><span class="tlid-translation translation"><span title="">Commençons par configurer le bouton lecture / pause.</span> <span title="">Nous pouvons le faire basculer entre lecture et pause avec une simple fonction conditionnelle, comme ci-dessous.</span> <span title="">Ajoutez-le à votre code, en bas:</span></span></p> +<p>Commençons par configurer le bouton lecture / pause. Nous pouvons le faire basculer entre lecture et pause avec une simple fonction conditionnelle, comme ci-dessous. Ajoutez-le à votre code, en bas:</p> <pre class="brush: js">playPauseBtn.onclick = function() { if(player.paused) { @@ -160,7 +156,7 @@ var timeLabel = document.querySelector('.time');</pre> } };</pre> -<p><span class="tlid-translation translation"><span title="">Ensuite, ajoutez ce code en bas, qui contrôle le bouton d'arrêt:</span></span></p> +<p>Ensuite, ajoutez ce code en bas, qui contrôle le bouton d'arrêt:</p> <pre class="brush: js">stopBtn.onclick = function() { player.pause(); @@ -168,9 +164,9 @@ var timeLabel = document.querySelector('.time');</pre> playPauseBtn.textContent = 'Play'; };</pre> -<p><span class="tlid-translation translation"><span title="">Il n'y a pas de fonction</span></span>  <code>stop()</code> <span class="tlid-translation translation"><span title="">disponible sur</span></span> {{domxref("HTMLMediaElement")}}s, <span class="tlid-translation translation"><span title="">nous le mettons donc en</span></span> <code>pause()</code> <span class="tlid-translation translation"><span title="">et, dans le même temps, définissons la valeur</span></span> <code>currentTime</code> sur 0.</p> +<p>Il n'y a pas de fonction  <code>stop()</code> disponible sur {{domxref("HTMLMediaElement")}}s, nous le mettons donc en <code>pause()</code> et, dans le même temps, définissons la valeur <code>currentTime</code> sur 0.</p> -<p><span class="tlid-translation translation"><span title="">Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre</span></span> code:</p> +<p>Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre code:</p> <pre class="brush: js">rwdBtn.onclick = function() { player.currentTime -= 3; @@ -185,11 +181,11 @@ fwdBtn.onclick = function() { } };</pre> -<p><span class="tlid-translation translation"><span title="">Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à </span></span>  <code>currentTime</code> <span class="tlid-translation translation"><span title="">chaque fois qu’on clique dessus.</span> <span title="">Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire.</span></span></p> +<p>Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à  <code>currentTime</code> chaque fois qu’on clique dessus. Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire.</p> -<p><span class="tlid-translation translation"><span title="">Notez que nous vérifions également si la durée</span></span>  <code>currentTime</code> <span class="tlid-translation translation"><span title="">est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé.</span> <span title="">Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée.</span></span> .</p> +<p>Notez que nous vérifions également si la durée  <code>currentTime</code> est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé. Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée. .</p> -<p><span class="tlid-translation translation"><span title="">Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé:</span></span></p> +<p>Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé:</p> <pre class="brush: js">player.ontimeupdate = function() { var minutes = Math.floor(player.currentTime / 60); @@ -213,105 +209,105 @@ fwdBtn.onclick = function() { timeLabel.textContent = mediaTime; };</pre> -<p><span class="tlid-translation translation"><span title="">Chaque fois que l'heure est mise à jour (une fois par seconde), nous activons cette fonction.</span> <span title="">Il calcule le nombre de minutes et de secondes à partir de la valeur actuelle donnée en secondes, ajoute un 0 au début si la valeur de minute ou de seconde est inférieure à 10, puis crée la lecture d'affichage et l'ajoute à l'étiquette de temps.</span></span></p> +<p>Chaque fois que l'heure est mise à jour (une fois par seconde), nous activons cette fonction. Il calcule le nombre de minutes et de secondes à partir de la valeur actuelle donnée en secondes, ajoute un 0 au début si la valeur de minute ou de seconde est inférieure à 10, puis crée la lecture d'affichage et l'ajoute à l'étiquette de temps.</p> -<h4 id="Lectures_complémentaires"><span class="tlid-translation translation"><span title="">Lectures complémentaires</span></span></h4> +<h4 id="Lectures_complémentaires">Lectures complémentaires</h4> -<p><span class="tlid-translation translation"><span title="">Cela vous donne une idée de base sur la manière d’ajouter des fonctionnalités de lecteur personnalisées aux instances de lecteur vidéo / audio.</span> <span title="">Pour plus d'informations sur l'ajout de fonctionnalités plus complexes aux lecteurs vidéo / audio, y compris les solutions de secours Flash pour les navigateurs plus anciens, voir aussi:</span></span></p> +<p>Cela vous donne une idée de base sur la manière d’ajouter des fonctionnalités de lecteur personnalisées aux instances de lecteur vidéo / audio. Pour plus d'informations sur l'ajout de fonctionnalités plus complexes aux lecteurs vidéo / audio, y compris les solutions de secours Flash pour les navigateurs plus anciens, voir aussi:</p> <ul> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a></li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a></li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li> + <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a></li> + <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a></li> + <li><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li> </ul> -<p><span class="tlid-translation translation"><span title="">Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés.</span> <span title="">Voir</span></span>  <a href="http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/">custom-controls-oojs</a> ( <span class="tlid-translation translation"><span title="">également</span></span> <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS">voir le code source</a>).</p> +<p>Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés. Voir  <a href="http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/">custom-controls-oojs</a> ( également <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS">voir le code source</a>).</p> -<h2 id="Transcriptions_audio"><span class="tlid-translation translation"><span title="">Transcriptions audio</span></span></h2> +<h2 id="Transcriptions_audio">Transcriptions audio</h2> -<p><span class="tlid-translation translation"><span title="">Pour permettre aux sourds d'accéder au contenu audio, vous devez créer des transcriptions de texte.</span> <span title="">Ceux-ci peuvent être soit inclus sur la même page que l'audio d'une manière ou d'une autre, soit inclus sur une page séparée et liés à .</span></span></p> +<p>Pour permettre aux sourds d'accéder au contenu audio, vous devez créer des transcriptions de texte. Ceux-ci peuvent être soit inclus sur la même page que l'audio d'une manière ou d'une autre, soit inclus sur une page séparée et liés à .</p> -<p><span class="tlid-translation translation"><span title="">En termes de création de la transcription, vos options sont les suivantes:</span></span></p> +<p>En termes de création de la transcription, vos options sont les suivantes:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Services commerciaux - Vous pouvez payer un professionnel pour effectuer la transcription, voir par exemple des entreprises telles que</span></span>  <a href="https://scribie.com/">Scribie</a>, <a href="https://castingwords.com/">Casting Words</a>, ou <a href="https://www.rev.com/">Rev</a>. <span class="tlid-translation translation"><span title="">Regardez autour de vous et demandez conseil pour vous assurer de trouver une entreprise fiable avec laquelle vous pourrez travailler efficacement.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Communauté / base / auto-transcription - Si vous faites partie d'une communauté ou d'une équipe active sur votre lieu de travail, vous pouvez leur demander de l'aide pour faire les traductions.</span> <span title="">Vous pouvez même essayer de les faire vous-même.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Services automatisés - Des services d'intelligence artificielle sont disponibles, tels que </span></span>  <a href="https://trint.com">Trint</a>. <span class="tlid-translation translation"><span title="">Téléchargez un fichier vidéo / audio sur le site, qui le transcrivera automatiquement pour vous.</span> <span title="">Sur YouTube, vous pouvez choisir de générer des sous-titres / transcriptions automatisés.</span> <span title="">Selon la clarté de l'audio parlé, la qualité de la transcription résultante variera considérablement.</span></span> . </li> + <li>Services commerciaux - Vous pouvez payer un professionnel pour effectuer la transcription, voir par exemple des entreprises telles que  <a href="https://scribie.com/">Scribie</a>, <a href="https://castingwords.com/">Casting Words</a>, ou <a href="https://www.rev.com/">Rev</a>. Regardez autour de vous et demandez conseil pour vous assurer de trouver une entreprise fiable avec laquelle vous pourrez travailler efficacement.</li> + <li>Communauté / base / auto-transcription - Si vous faites partie d'une communauté ou d'une équipe active sur votre lieu de travail, vous pouvez leur demander de l'aide pour faire les traductions. Vous pouvez même essayer de les faire vous-même.</li> + <li>Services automatisés - Des services d'intelligence artificielle sont disponibles, tels que  <a href="https://trint.com">Trint</a>. Téléchargez un fichier vidéo / audio sur le site, qui le transcrivera automatiquement pour vous. Sur YouTube, vous pouvez choisir de générer des sous-titres / transcriptions automatisés. Selon la clarté de l'audio parlé, la qualité de la transcription résultante variera considérablement. . </li> </ul> -<p><span class="tlid-translation translation"><span title="">Comme dans la plupart des choses de la vie, vous avez tendance à avoir ce que vous payez.</span> <span title="">la précision et le temps requis pour produire la transcription varient selon les services.</span> <span title="">Si vous payez une transcription pour une entreprise digne de confiance ou un service d’AI, vous le ferez probablement rapidement et avec une qualité élevée.</span> <span title="">Si vous ne voulez pas payer pour cela, vous le ferez probablement avec une qualité inférieure et / ou lentement.</span></span></p> +<p>Comme dans la plupart des choses de la vie, vous avez tendance à avoir ce que vous payez. la précision et le temps requis pour produire la transcription varient selon les services. Si vous payez une transcription pour une entreprise digne de confiance ou un service d’AI, vous le ferez probablement rapidement et avec une qualité élevée. Si vous ne voulez pas payer pour cela, vous le ferez probablement avec une qualité inférieure et / ou lentement.</p> -<p><span class="tlid-translation translation"><span title="">Il n’est pas acceptable de publier une ressource audio mais de promettre de publier la transcription ultérieurement. De telles promesses ne sont souvent pas tenues, ce qui érodera la confiance entre vous et vos utilisateurs.</span> <span title="">Si le son que vous présentez ressemble à une réunion en face-à -face ou à une performance parlée en direct, il serait acceptable de prendre des notes pendant la performance, de les publier intégralement avec l'audio, puis de demander de l'aide pour les nettoyer par la suite.</span></span></p> +<p>Il n’est pas acceptable de publier une ressource audio mais de promettre de publier la transcription ultérieurement. De telles promesses ne sont souvent pas tenues, ce qui érodera la confiance entre vous et vos utilisateurs. Si le son que vous présentez ressemble à une réunion en face-à -face ou à une performance parlée en direct, il serait acceptable de prendre des notes pendant la performance, de les publier intégralement avec l'audio, puis de demander de l'aide pour les nettoyer par la suite.</p> -<h3 id="Exemples_de_transcription"><span class="tlid-translation translation"><span title="">Exemples de transcription</span></span></h3> +<h3 id="Exemples_de_transcription">Exemples de transcription</h3> -<p><span class="tlid-translation translation"><span title="">Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil.</span> <span title="">Par exemple, jetez un coup d’œil à </span></span>  <a href="https://www.youtube.com/watch?v=zFFBsj97Od8">Audio Transcription Sample 1</a> <em>et choisissez plus > Transcript</em>.</p> +<p>Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil. Par exemple, jetez un coup d’œil à  <a href="https://www.youtube.com/watch?v=zFFBsj97Od8">Audio Transcription Sample 1</a> <em>et choisissez plus > Transcript</em>.</p> -<p><span class="tlid-translation translation"><span title="">Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué;</span> <span title="">voir notre exemple</span></span>  <a href="https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/">transcription audio-ui</a> exemple (voir aussi le <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui">code source</a>).</p> +<p>Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué; voir notre exemple  <a href="https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/">transcription audio-ui</a> exemple (voir aussi le <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui">code source</a>).</p> -<h3 id="Descriptions_audio"><span class="tlid-translation translation"><span title="">Descriptions audio</span></span></h3> +<h3 id="Descriptions_audio">Descriptions audio</h3> -<p><span class="tlid-translation translation"><span title="">Dans les cas où des éléments visuels accompagnent votre son, vous devez fournir une description de l’audio pour décrire ce contenu supplémentaire.</span></span></p> +<p>Dans les cas où des éléments visuels accompagnent votre son, vous devez fournir une description de l’audio pour décrire ce contenu supplémentaire.</p> -<p><span class="tlid-translation translation"><span title="">Dans de nombreux cas, il s'agira simplement d'une vidéo. Dans ce cas, vous pouvez implémenter des légendes à l'aide des techniques décrites dans la section suivante de l'article.</span></span></p> +<p>Dans de nombreux cas, il s'agira simplement d'une vidéo. Dans ce cas, vous pouvez implémenter des légendes à l'aide des techniques décrites dans la section suivante de l'article.</p> -<p><span class="tlid-translation translation"><span title="">Cependant, il y a des cas extrêmes.</span> <span title="">Vous pouvez par exemple avoir un enregistrement audio d'une réunion qui fait référence à une ressource d'accompagnement telle qu'une feuille de calcul ou un graphique.</span> <span title="">Dans de tels cas, vous devez vous assurer que les ressources sont fournies avec la transcription audio +, et les lier spécifiquement aux endroits où elles sont mentionnées dans la transcription.</span> <span title="">Cela aidera évidemment tous les utilisateurs, pas seulement les sourds.</span></span></p> +<p>Cependant, il y a des cas extrêmes. Vous pouvez par exemple avoir un enregistrement audio d'une réunion qui fait référence à une ressource d'accompagnement telle qu'une feuille de calcul ou un graphique. Dans de tels cas, vous devez vous assurer que les ressources sont fournies avec la transcription audio +, et les lier spécifiquement aux endroits où elles sont mentionnées dans la transcription. Cela aidera évidemment tous les utilisateurs, pas seulement les sourds.</p> <div class="note"> -<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Une transcription audio aidera en général plusieurs groupes d'utilisateurs.</span> <span title="">En plus de permettre aux utilisateurs sourds d'accéder aux informations contenues dans l'audio, pensez à un utilisateur disposant d'une connexion à faible bande passante et qui trouverait que le téléchargement de l'audio est gênant.</span> <span title="">Pensez également à un utilisateur dans un environnement bruyant, comme un pub ou un bar, qui tente d'accéder à l'information mais ne l'entend pas par dessus le bruit.</span></span></p> +<p><strong>Note :</strong> Une transcription audio aidera en général plusieurs groupes d'utilisateurs. En plus de permettre aux utilisateurs sourds d'accéder aux informations contenues dans l'audio, pensez à un utilisateur disposant d'une connexion à faible bande passante et qui trouverait que le téléchargement de l'audio est gênant. Pensez également à un utilisateur dans un environnement bruyant, comme un pub ou un bar, qui tente d'accéder à l'information mais ne l'entend pas par dessus le bruit.</p> </div> -<h2 id="Pistes_de_texte_vidéo"><span class="tlid-translation translation"><span title="">Pistes de texte vidéo</span></span></h2> +<h2 id="Pistes_de_texte_vidéo">Pistes de texte vidéo</h2> -<p><span class="tlid-translation translation"><span title="">Pour rendre la vidéo accessible aux sourds, aux aveugles ou même à d'autres groupes d'utilisateurs (par exemple, ceux dont la bande passante est faible ou qui ne comprennent pas la langue dans laquelle la vidéo est enregistrée), vous devez inclure des pistes de texte avec votre contenu vidéo.</span></span> .</p> +<p>Pour rendre la vidéo accessible aux sourds, aux aveugles ou même à d'autres groupes d'utilisateurs (par exemple, ceux dont la bande passante est faible ou qui ne comprennent pas la langue dans laquelle la vidéo est enregistrée), vous devez inclure des pistes de texte avec votre contenu vidéo. .</p> <div class="note"> -<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Les pistes de texte sont également utiles pour n'importe quel utilisateur, pas seulement pour les personnes handicapées.</span> <span title="">Par exemple, certains utilisateurs peuvent ne pas être en mesure d’entendre le son car ils se trouvent dans des environnements bruyants (comme un bar bondé lorsqu’un match de sport est diffusé) ou peuvent ne pas déranger les autres s’ils sont dans un endroit calme (comme une bibliothèque).</span> <span title="">.)</span></span></p> +<p><strong>Note :</strong> Les pistes de texte sont également utiles pour n'importe quel utilisateur, pas seulement pour les personnes handicapées. Par exemple, certains utilisateurs peuvent ne pas être en mesure d’entendre le son car ils se trouvent dans des environnements bruyants (comme un bar bondé lorsqu’un match de sport est diffusé) ou peuvent ne pas déranger les autres s’ils sont dans un endroit calme (comme une bibliothèque). .)</p> </div> -<p><span class="tlid-translation translation"><span title="">Ce n'est pas un nouveau concept - les sous-titres codés sont disponibles depuis assez longtemps dans les services de télévision:</span></span></p> +<p>Ce n'est pas un nouveau concept - les sous-titres codés sont disponibles depuis assez longtemps dans les services de télévision:</p> -<p><img alt='Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"' src="https://mdn.mozillademos.org/files/14436/closed-captions.png" style="display: block; height: 240px; margin: 0px auto; width: 320px;"></p> +<p><img alt='Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"' src="closed-captions.png"></p> -<p><span class="tlid-translation translation"><span title="">Alors que de nombreux pays proposent des films en anglais avec sous-titres écrits dans leur propre langue maternelle, des sous-titres en différentes langues sont souvent disponibles sur DVD, par exemple</span></span></p> +<p>Alors que de nombreux pays proposent des films en anglais avec sous-titres écrits dans leur propre langue maternelle, des sous-titres en différentes langues sont souvent disponibles sur DVD, par exemple</p> -<p><img alt='An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"' src="https://mdn.mozillademos.org/files/14442/Subtitles_German.jpg" style="display: block; margin: 0 auto;"></p> +<p><img alt='An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"' src="Subtitles_German.jpg"></p> -<p><span class="tlid-translation translation"><span title="">Il existe différents types de pistes de texte avec des objectifs différents.</span> <span title="">Les principaux que vous rencontrerez sont:</span></span></p> +<p>Il existe différents types de pistes de texte avec des objectifs différents. Les principaux que vous rencontrerez sont:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Sous-titres - pour le bénéfice des utilisateurs sourds qui ne peuvent pas entendre la piste audio, y compris les mots prononcés, et des informations contextuelles telles que le nom des personnes qui ont prononcé ces mots, si les personnes étaient en colère ou tristes et quelle ambiance la musique crée actuellement.</span> <span title="">.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Sous-titres - Inclut les traductions de la boîte de dialogue audio, pour les utilisateurs qui ne comprennent pas la langue parlée.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Descriptions - Celles-ci incluent des descriptions pour les personnes aveugles qui ne peuvent pas voir la vidéo, par exemple à quoi ressemble la scène.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Titres de chapitre - Marqueurs de chapitre destinés à aider l'utilisateur à naviguer dans la ressource multimédia.</span></span></li> + <li>Sous-titres - pour le bénéfice des utilisateurs sourds qui ne peuvent pas entendre la piste audio, y compris les mots prononcés, et des informations contextuelles telles que le nom des personnes qui ont prononcé ces mots, si les personnes étaient en colère ou tristes et quelle ambiance la musique crée actuellement. .</li> + <li>Sous-titres - Inclut les traductions de la boîte de dialogue audio, pour les utilisateurs qui ne comprennent pas la langue parlée.</li> + <li>Descriptions - Celles-ci incluent des descriptions pour les personnes aveugles qui ne peuvent pas voir la vidéo, par exemple à quoi ressemble la scène.</li> + <li>Titres de chapitre - Marqueurs de chapitre destinés à aider l'utilisateur à naviguer dans la ressource multimédia.</li> </ul> -<h3 id="Implémentation_de_pistes_de_texte_vidéo_HTML5"><span class="tlid-translation translation"><span title="">Implémentation de pistes de texte vidéo HTML5</span></span></h3> +<h3 id="Implémentation_de_pistes_de_texte_vidéo_HTML5">Implémentation de pistes de texte vidéo HTML5</h3> -<p><span class="tlid-translation translation"><span title="">Les pistes de texte à afficher avec une vidéo HTML5 doivent être écrites au format WebVTT, un format de texte contenant plusieurs chaînes de texte ainsi que des métadonnées, telles que l'heure à laquelle vous souhaitez afficher chaque chaîne de texte et même des informations de style / positionnement limitées.</span> <span title="">Ces chaînes de texte sont appelées cues</span></span> .</p> +<p>Les pistes de texte à afficher avec une vidéo HTML5 doivent être écrites au format WebVTT, un format de texte contenant plusieurs chaînes de texte ainsi que des métadonnées, telles que l'heure à laquelle vous souhaitez afficher chaque chaîne de texte et même des informations de style / positionnement limitées. Ces chaînes de texte sont appelées cues .</p> -<p><span class="tlid-translation translation"><span title="">Un fichier WebVTT typique ressemblera à ceci:</span></span></p> +<p>Un fichier WebVTT typique ressemblera à ceci:</p> <pre>WEBVTT 1 00:00:22.230 --> 00:00:24.606 - <span class="tlid-translation translation"><span title="">Ceci est le premier sous-titre.</span></span> + Ceci est le premier sous-titre. 2 00:00:30.739 --> 00:00:34.074 - <span class="tlid-translation translation"><span title="">C'est le deuxième</span></span> . + C'est le deuxième . ...</pre> -<p><span class="tlid-translation translation"><span title="">Pour que ceci soit affiché avec la lecture du média HTML, vous devez:</span></span></p> +<p>Pour que ceci soit affiché avec la lecture du média HTML, vous devez:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Enregistrez-le en tant que fichier .vtt dans un endroit approprié.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Lien vers le fichier .vtt avec </span></span> <span class="tlid-translation translation"><span title="">l'élément</span></span> {{htmlelement("track")}} . <code><track></code> <span class="tlid-translation translation"><span title="">devrait être placé dans</span></span> <code><audio></code> ou <code><video></code>, <span class="tlid-translation translation"><span title="">mais après tout </span></span> <code><source></code> <span class="tlid-translation translation"><span title="">éléments</span></span> . <span class="tlid-translation translation"><span title="">Utilisez l’attribut {{htmlattrxref ("kind", "track")}} pour indiquer si les signaux sont des sous-titres, des légendes ou des descriptions.</span> <span title="">De plus, utilisez {{htmlattrxref ("srclang", "track")}} pour indiquer au navigateur la langue dans laquelle vous avez écrit les sous-titres.</span></span> .</li> + <li>Enregistrez-le en tant que fichier .vtt dans un endroit approprié.</li> + <li>Lien vers le fichier .vtt avec l'élément {{htmlelement("track")}} . <code><track></code> devrait être placé dans <code><audio></code> ou <code><video></code>, mais après tout <code><source></code> éléments . Utilisez l’attribut {{htmlattrxref ("kind", "track")}} pour indiquer si les signaux sont des sous-titres, des légendes ou des descriptions. De plus, utilisez {{htmlattrxref ("srclang", "track")}} pour indiquer au navigateur la langue dans laquelle vous avez écrit les sous-titres. .</li> </ul> -<p><span class="tlid-translation translation"><span title="">Voici un exemple:</span></span></p> +<p>Voici un exemple:</p> <pre class="brush: html"><video controls> <source src="example.mp4" type="video/mp4"> @@ -319,57 +315,52 @@ fwdBtn.onclick = function() { <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> </video></pre> -<p><span class="tlid-translation translation"><span title="">Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:</span></span></p> +<p>Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:</p> -<p><img alt='Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> +<p><img alt='Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="video-player-with-captions.png"></p> -<p><span class="tlid-translation translation"><span title="">Pour plus de détails, veuillez lire</span></span> <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des légendes et des sous titres à des vidéos HTML 5</a>. <span class="tlid-translation translation"><span title="">Vous trouverez</span></span> <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">un exemple</a> <span class="tlid-translation translation"><span title="">qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi</span></span><span class="tlid-translation translation"><span title=""> le</span></span> <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">code source</a>.) <span class="tlid-translation translation"><span title="">Cet exemple utilise du JavaScript.</span> <span title="">pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.</span></span></p> +<p>Pour plus de détails, veuillez lire <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des légendes et des sous titres à des vidéos HTML 5</a>. Vous trouverez <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">un exemple</a> qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi le <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">code source</a>.) Cet exemple utilise du JavaScript. pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español.</p> <div class="note"> -<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte.</span> <span title="">Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.</span></span></p> +<p><strong>Note :</strong> Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte. Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo.</p> </div> -<h2 id="Autre_contenu_multimédia"><span class="tlid-translation translation"><span title="">Autre contenu multimédia</span></span></h2> +<h2 id="Autre_contenu_multimédia">Autre contenu multimédia</h2> -<p><span class="tlid-translation translation"><span title="">Les sections ci-dessus ne couvrent pas tous les types de contenu multimédia que vous pourriez vouloir placer sur une page Web.</span> <span title="">Vous devrez peut-être également gérer des jeux, des animations, des diaporamas, des vidéos intégrées et du contenu créé à l'aide d'autres technologies disponibles, telles que:</span></span></p> +<p>Les sections ci-dessus ne couvrent pas tous les types de contenu multimédia que vous pourriez vouloir placer sur une page Web. Vous devrez peut-être également gérer des jeux, des animations, des diaporamas, des vidéos intégrées et du contenu créé à l'aide d'autres technologies disponibles, telles que:</p> <ul> - <li><a href="/en-US/docs/Web/API/Canvas_API">HTML5 canvas</a></li> + <li><a href="/fr/docs/Web/API/Canvas_API">HTML5 canvas</a></li> <li>Flash</li> <li>Silverlight</li> </ul> -<p><span class="tlid-translation translation"><span title="">Pour ce type de contenu, vous devez traiter les problèmes d’accessibilité au cas par cas.</span> <span title="">Dans certains cas, ce n'est pas si grave, par exemple:</span></span></p> +<p>Pour ce type de contenu, vous devez traiter les problèmes d’accessibilité au cas par cas. Dans certains cas, ce n'est pas si grave, par exemple:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Si vous intégrez du contenu audio à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez probablement simplement fournir une transcription audio de la même manière que celle décrite ci-dessus dans la section</span></span> {{anch("Transcript examples")}} .</li> - <li><span class="tlid-translation translation"><span title="">Si vous intégrez du contenu vidéo à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez tirer parti des techniques de sous-titrage / sous-titrage disponibles pour ces technologies.</span> <span title="">Par exemple, voir</span></span>  <a href="http://www.adobe.com/accessibility/products/flash/captions.html">Flash captions</a>, <a href="https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning">Using the Flash-Only Player API for Closed Captioning</a>, ou <a href="https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/">Playing Subtitles with Videos in Silverlight</a>.</li> + <li>Si vous intégrez du contenu audio à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez probablement simplement fournir une transcription audio de la même manière que celle décrite ci-dessus dans la section {{anch("Transcript examples")}} .</li> + <li>Si vous intégrez du contenu vidéo à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez tirer parti des techniques de sous-titrage / sous-titrage disponibles pour ces technologies. Par exemple, voir  <a href="http://www.adobe.com/accessibility/products/flash/captions.html">Flash captions</a>, <a href="https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning">Using the Flash-Only Player API for Closed Captioning</a>, ou <a href="https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/">Playing Subtitles with Videos in Silverlight</a>.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Cependant, il est difficile de rendre les autres multimédias accessibles.</span> <span title="">Si, par exemple, vous avez affaire à un jeu immersif en 3D ou à une application de réalité virtuelle, il est vraiment difficile de fournir des alternatives textuelles pour une telle expérience, et vous pouvez soutenir que les utilisateurs non-voyants ne sont pas vraiment dans le groupe-cible de telles applications.</span></span></p> +<p>Cependant, il est difficile de rendre les autres multimédias accessibles. Si, par exemple, vous avez affaire à un jeu immersif en 3D ou à une application de réalité virtuelle, il est vraiment difficile de fournir des alternatives textuelles pour une telle expérience, et vous pouvez soutenir que les utilisateurs non-voyants ne sont pas vraiment dans le groupe-cible de telles applications.</p> -<p><span class="tlid-translation translation"><span title="">Vous pouvez toutefois vous assurer qu'une telle application présente un contraste de couleur suffisant et une présentation claire de sorte qu'elle soit perceptible par les personnes ayant une vision basse / daltonisme, et qu'elle soit également accessible au clavier.</span> <span title="">Rappelez-vous que l'accessibilité consiste à faire tout ce que vous pouvez, plutôt que de chercher à atteindre une accessibilité à 100% tout le temps, ce qui est souvent impossible.</span></span></p> +<p>Vous pouvez toutefois vous assurer qu'une telle application présente un contraste de couleur suffisant et une présentation claire de sorte qu'elle soit perceptible par les personnes ayant une vision basse / daltonisme, et qu'elle soit également accessible au clavier. Rappelez-vous que l'accessibilité consiste à faire tout ce que vous pouvez, plutôt que de chercher à atteindre une accessibilité à 100% tout le temps, ce qui est souvent impossible.</p> -<div class="text-wrap tlid-copy-target"> -<h2 class="result-shield-container tlid-copy-target" id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2> -</div> +<h2 id="Résumé">Résumé</h2> -<p><span class="tlid-translation translation"><span title="">Ce chapitre présente un résumé des problèmes d’accessibilité des contenus multimédias, ainsi que des solutions pratiques.</span></span></p> +<p>Ce chapitre présente un résumé des problèmes d’accessibilité des contenus multimédias, ainsi que des solutions pratiques.</p> <p>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p> -<p> </p> - -<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">HTML : une bonne base pour l'accessibilité</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</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/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</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="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/fr/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> </ul> -<p> </p> diff --git a/files/fr/learn/accessibility/wai-aria_basics/index.html b/files/fr/learn/accessibility/wai-aria_basics/index.html index a9990d7f55..c7821400cf 100644 --- a/files/fr/learn/accessibility/wai-aria_basics/index.html +++ b/files/fr/learn/accessibility/wai-aria_basics/index.html @@ -19,62 +19,62 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <div>{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}</div> -<p class="summary"><span class="tlid-translation translation"><span title="">Après l'article précédent, il peut être difficile de créer des contrôles UI complexes impliquant du code HTML non sémantique et du contenu dynamique mis à jour par JavaScript.</span> <span title="">WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser pour informer les utilisateurs de ce qui se passe.</span> <span title="">Nous montrerons ici comment l'utiliser au niveau de base pour améliorer l'accessibilité.</span></span></p> +<p>Après l'article précédent, il peut être difficile de créer des contrôles UI complexes impliquant du code HTML non sémantique et du contenu dynamique mis à jour par JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser pour informer les utilisateurs de ce qui se passe. Nous montrerons ici comment l'utiliser au niveau de base pour améliorer l'accessibilité.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row"> Prerequis:</th> - <td><span class="tlid-translation translation"><span title="">Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension des </span></span><a href="/fr/docs/Apprendre/a11y">articles précédents du cours</a>.</td> + <td>Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension des <a href="/fr/docs/Apprendre/a11y">articles précédents du cours</a>.</td> </tr> <tr> - <th scope="row"><span class="tlid-translation translation">Objectif</span> :</th> - <td><span class="tlid-translation translation"><span title="">Se familiariser avec WAI-ARIA et savoir comment l'utiliser pour fournir une sémantique supplémentaire utile afin d'améliorer l'accessibilité, le cas échéant</span></span>.</td> + <th scope="row">Objectif :</th> + <td>Se familiariser avec WAI-ARIA et savoir comment l'utiliser pour fournir une sémantique supplémentaire utile afin d'améliorer l'accessibilité, le cas échéant.</td> </tr> </tbody> </table> -<h2 id="Qu'est_WAI-ARIA"><span class="tlid-translation translation"><span title="">Qu'est WAI-ARIA?</span></span></h2> +<h2 id="Qu'est_WAI-ARIA">Qu'est WAI-ARIA?</h2> -<p><span class="tlid-translation translation"><span title="">Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nous.</span></span></p> +<p>Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nous.</p> -<h3 id="Un_nouvel_ensemble_de_problèmes"><span class="tlid-translation translation"><span title="">Un nouvel ensemble de problèmes</span></span></h3> +<h3 id="Un_nouvel_ensemble_de_problèmes">Un nouvel ensemble de problèmes</h3> <p>Car les applications web ont commencé à devenir plus complexes et dynamiques, un nouvel ensemble de fonctionnalités d'accessibilité et de problèmes ont commencé à apparaître.</p> -<p><span class="tlid-translation translation"><span title="">Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes </span></span>  ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.) <span class="tlid-translation translation"><span title="">Avant de les utiliser, les développeurs utilisaient simplement</span></span> {{htmlelement("div")}} <span class="tlid-translation translation"><span title="">s avec des identifiants ou des classes, par exemple</span></span> <code><div class="nav"></code> <span class="tlid-translation translation"><span title="">, mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation.</span></span> .</p> +<p>Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes  ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.) Avant de les utiliser, les développeurs utilisaient simplement {{htmlelement("div")}} s avec des identifiants ou des classes, par exemple <code><div class="nav"></code> , mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation. .</p> -<p><span class="tlid-translation translation"><span title="">La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation</span></span> (<span class="tlid-translation translation"><span title="">ou autre</span></span>), <span class="tlid-translation translation"><span title="">par exemple:</span></span></p> +<p>La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation (ou autre), par exemple:</p> -<pre class="brush: html"><a href="#hidden" class="hidden"><span class="tlid-translation translation"><span title="">Passer à la navigation</span></span></a></pre> +<pre class="brush: html"><a href="#hidden" class="hidden">Passer à la navigation</a></pre> -<p><span class="tlid-translation translation"><span title="">Mais ceci n’est pas encore très précis et ne peut être utilisé que lorsque le lecteur d’écran lit en haut de la page.</span></span></p> +<p>Mais ceci n’est pas encore très précis et ne peut être utilisé que lorsque le lecteur d’écran lit en haut de la page.</p> -<p><span class="tlid-translation translation"><span title="">Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux</span></span>  input <span class="tlid-translation translation"><span title=""> pour rendre de tels contrôles:</span></span></p> +<p>Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux  input pour rendre de tels contrôles:</p> <pre class="brush: html"><input type="date"> <input type="range"></pre> -<p><span class="tlid-translation translation"><span title="">Celles-ci ne sont pas bien prises en charge sur tous les navigateurs et il est également très difficile de les nommer, ce qui les rend peu utiles pour l'intégration aux conceptions de sites Web.</span> <span title="">En conséquence, les développeurs font souvent appel à des bibliothèques JavaScript qui génèrent des contrôles tels qu'une série d'éléments </span></span> {{htmlelement("div")}} <span class="tlid-translation translation"><span title="">s imbriqués ou d'éléments de table avec des noms de classe, qui sont ensuite stylés à l'aide de CSS et contrôlés à l'aide de JavaScript.</span></span></p> +<p>Celles-ci ne sont pas bien prises en charge sur tous les navigateurs et il est également très difficile de les nommer, ce qui les rend peu utiles pour l'intégration aux conceptions de sites Web. En conséquence, les développeurs font souvent appel à des bibliothèques JavaScript qui génèrent des contrôles tels qu'une série d'éléments {{htmlelement("div")}} s imbriqués ou d'éléments de table avec des noms de classe, qui sont ensuite stylés à l'aide de CSS et contrôlés à l'aide de JavaScript.</p> -<p><span class="tlid-translation translation"><span title="">Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs d’écran ne peuvent pas comprendre ce qu’ils sont, et on dit aux utilisateurs qu’ils peuvent voir une multitude d’éléments sans sémantique pour décrire ce qu’ils veulent dire.</span></span></p> +<p>Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs d’écran ne peuvent pas comprendre ce qu’ils sont, et on dit aux utilisateurs qu’ils peuvent voir une multitude d’éléments sans sémantique pour décrire ce qu’ils veulent dire.</p> <h3 id="Entrez_WAI-ARIA">Entrez WAI-ARIA</h3> -<p><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> <span class="tlid-translation translation"><span title="">est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque.</span> <span title="">Trois caractéristiques principales sont définies dans la spécification:</span></span></p> +<p><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque. Trois caractéristiques principales sont définies dans la spécification:</p> <ul> - <li><span class="tlid-translation translation"><span title=""><strong>Rôles</strong> - Ceux-ci définissent ce qu'un élément est ou fait.</span> <span title="">Bon nombre de ces rôles sont des rôles de référence, qui dupliquent en grande partie la valeur sémantique des éléments structurels HTML5, par exemple</span> <span title="">role = "navigation"</span></span> ({{htmlelement("nav")}}) ou <code>role="complementary"</code> ({{htmlelement("aside")}}) <span class="tlid-translation translation"><span title="">, mais il en existe d'autres qui décrivent différentes structures de pages, telles que</span></span> <code>role="banner"</code>, <code>role="search"</code>, <code>role="tabgroup"</code>, <code>role="tab"</code>, <span class="tlid-translation translation"><span title="">etc., que l'on trouve couramment dans les UIs</span></span>.</li> - <li><strong><span class="tlid-translation translation"><span title="">Propriétés</span></span></strong>  — <span class="tlid-translation translation"><span title="">Ceux-ci définissent les propriétés des éléments, qui peuvent être utilisés pour leur donner une signification supplémentaire ou une sémantique.</span> <span title="">Par exemple</span></span><span class="tlid-translation translation"><span title="">,</span></span><span class="tlid-translation translation"><span title=""> </span></span> <code>aria-required="true"</code><span class="tlid-translation translation"><span title=""> spécifie qu'une entrée de formulaire doit être renseignée pour être valide, alors que </span></span> <code>aria-labelledby="label"</code> <span class="tlid-translation translation"><span title="">vous permet de mettre un ID sur un élément, puis de le référencer </span><span title="">en tant qu'étiquette pour tout autre élément de la page, y compris plusieurs éléments, ce qui n'est pas possible avec</span></span> <code><label for="input"></code>. <span class="tlid-translation translation"><span title="">À titre d'exemple, vous pouvez utiliser</span></span> <code>aria-labelledby</code> <span class="tlid-translation translation"><span title="">pour spécifier qu'une description de clé contenue dans un</span></span> {{htmlelement("div")}} <span class="tlid-translation translation"><span title="">est le </span></span> label <span class="tlid-translation translation"><span title="">de plusieurs cellules de tableau, ou vous pouvez l’utiliser comme alternative au texte alternatif d’image</span></span> — <span class="tlid-translation translation"><span title="">spécifiez les informations existantes sur la page en tant que texte alternatif d’image</span></span>, <span class="tlid-translation translation"><span title="">plutôt que de devoir les répéter à l'intérieur de l'attribut</span></span> <code>alt</code>. <span class="tlid-translation translation"><span title="">Vous pouvez voir un exemple de celà à </span></span><a href="/fr/docs/Apprendre/a11y/HTML?document_saved=true#Alternatives_textuelles">Alternatives textuelles</a>.</li> - <li><strong><span class="tlid-translation translation"><span title="">États</span></span></strong>  — <span class="tlid-translation translation"><span title="">Propriétés spéciales qui définissent les conditions actuelles des éléments, telles que</span></span> <code>aria-disabled="true"</code>, <span class="tlid-translation translation"><span title="">qui spécifient à un lecteur d'écran que l'entrée de formulaire est actuellement désactivée.</span> <span title="">Les états diffèrent des propriétés en ce que les propriétés ne changent pas tout au long du cycle de vie d'une application, alors que les états peuvent changer, généralement par programmation via JavaScript.</span></span></li> + <li><strong>Rôles</strong> - Ceux-ci définissent ce qu'un élément est ou fait. Bon nombre de ces rôles sont des rôles de référence, qui dupliquent en grande partie la valeur sémantique des éléments structurels HTML5, par exemple role = "navigation" ({{htmlelement("nav")}}) ou <code>role="complementary"</code> ({{htmlelement("aside")}}) , mais il en existe d'autres qui décrivent différentes structures de pages, telles que <code>role="banner"</code>, <code>role="search"</code>, <code>role="tabgroup"</code>, <code>role="tab"</code>, etc., que l'on trouve couramment dans les UIs.</li> + <li><strong>Propriétés</strong>  — Ceux-ci définissent les propriétés des éléments, qui peuvent être utilisés pour leur donner une signification supplémentaire ou une sémantique. Par exemple, <code>aria-required="true"</code> spécifie qu'une entrée de formulaire doit être renseignée pour être valide, alors que <code>aria-labelledby="label"</code> vous permet de mettre un ID sur un élément, puis de le référencer en tant qu'étiquette pour tout autre élément de la page, y compris plusieurs éléments, ce qui n'est pas possible avec <code><label for="input"></code>. À titre d'exemple, vous pouvez utiliser <code>aria-labelledby</code> pour spécifier qu'une description de clé contenue dans un {{htmlelement("div")}} est le label de plusieurs cellules de tableau, ou vous pouvez l’utiliser comme alternative au texte alternatif d’image — spécifiez les informations existantes sur la page en tant que texte alternatif d’image, plutôt que de devoir les répéter à l'intérieur de l'attribut <code>alt</code>. Vous pouvez voir un exemple de celà à <a href="/fr/docs/Apprendre/a11y/HTML?document_saved=true#Alternatives_textuelles">Alternatives textuelles</a>.</li> + <li><strong>États</strong>  — Propriétés spéciales qui définissent les conditions actuelles des éléments, telles que <code>aria-disabled="true"</code>, qui spécifient à un lecteur d'écran que l'entrée de formulaire est actuellement désactivée. Les états diffèrent des propriétés en ce que les propriétés ne changent pas tout au long du cycle de vie d'une application, alors que les états peuvent changer, généralement par programmation via JavaScript.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations).</span> <span title="">WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS.</span></span></p> +<p>Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations). WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS.</p> <div class="note"> -<p><strong>Note</strong>: <span class="tlid-translation translation"><span title="">Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la</span></span> <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">définition des rôles</a>.</p> +<p><strong>Note :</strong> Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">définition des rôles</a>.</p> -<p><span class="tlid-translation translation"><span title="">La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir</span></span> <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Définitions des états et des propriétés (tous les attributs aria- *)</a>.</p> +<p>La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Définitions des états et des propriétés (tous les attributs aria- *)</a>.</p> </div> <h3 id="Où_WAI-ARIA_est_supporté">Où WAI-ARIA est supporté?</h3> @@ -92,13 +92,13 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <ol> <li>Browser support is generally quite good — at the time of writing, <a href="http://caniuse.com/#feat=wai-aria">caniuse.com</a> stated that global browser support for WAI-ARIA was around 88%.</li> - <li>Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's <a href="http://www.powermapper.com/tests/screen-readers/aria/">WAI-ARIA Screen reader compatibility</a><span> article.</span></li> + <li>Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's <a href="http://www.powermapper.com/tests/screen-readers/aria/">WAI-ARIA Screen reader compatibility</a> article.</li> </ol> <p>In this article, we won't attempt to cover every WAI-ARIA feature, and its exact support details. Instead, we will cover the most critical WAI-ARIA features for you to know about; if we don't mention any support details, you can assume that the feature is well-supported. We will clearly mention any exceptions to this.</p> <div class="note"> -<p><strong>Note</strong>: Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see <a href="https://jqueryui.com/about/#deep-accessibility-support">About jQuery UI: Deep accessibility support</a>), <a href="https://www.sencha.com/products/extjs/">ExtJS</a>, and <a href="https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html">Dojo/Dijit</a>.</p> +<p><strong>Note :</strong> Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see <a href="https://jqueryui.com/about/#deep-accessibility-support">About jQuery UI: Deep accessibility support</a>), <a href="https://www.sencha.com/products/extjs/">ExtJS</a>, and <a href="https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html">Dojo/Dijit</a>.</p> </div> <h3 id="When_should_you_use_WAI-ARIA">When should you use WAI-ARIA?</h3> @@ -107,24 +107,24 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <ol> <li><strong>Signposts/Landmarks</strong>: ARIA's <code>role</code> attribute values can act as landmarks that either replicate the semantics of HTML5 elements (e.g. {{htmlelement("nav")}}), or go beyond HTML5 semantics to provide signposts to different functional areas, e.g <code>search</code>, <code>tabgroup</code>, <code>tab</code>, <code>listbox</code>, etc.</li> - <li><strong>Dynamic content updates</strong>: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use <code>aria-live</code> to inform screenreader users when an area of content is updated, e.g. via <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, or <a href="/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>.</li> + <li><strong>Dynamic content updates</strong>: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use <code>aria-live</code> to inform screenreader users when an area of content is updated, e.g. via <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, or <a href="/fr/docs/Web/API/Document_Object_Model">DOM APIs</a>.</li> <li><strong>Enhancing keyboard accessibility</strong>: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using <code>tabindex</code>).</li> <li><strong>Accessibility of non-semantic controls</strong>: When a series of nested <code><div></code>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like <code>button</code>, <code>listbox</code>, or <code>tabgroup</code>, and properties like <code>aria-required</code> or <code>aria-posinset</code> to provide further clues as to functionality.</li> </ol> -<p>One thing to remember though — <strong>you should only use WAI-ARIA when you need to!</strong> Ideally, you should <em>always</em> use <a href="/en-US/docs/Learn/Accessibility/HTML">native HTML features</a> to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.</p> +<p>One thing to remember though — <strong>you should only use WAI-ARIA when you need to!</strong> Ideally, you should <em>always</em> use <a href="/fr/docs/Learn/Accessibility/HTML">native HTML features</a> to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.</p> <p>But again, only use it when necessary!</p> <div class="note"> -<p><strong>Note</strong>: Also, try to make sure you test your site with a variety of <em>real</em> users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.</p> +<p><strong>Note :</strong> Also, try to make sure you test your site with a variety of <em>real</em> users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.</p> </div> <h2 id="Practical_WAI-ARIA_implementations">Practical WAI-ARIA implementations</h2> <p>In the next section we'll look at the four areas in more detail, along with practical examples. Before you continue, you should get a screenreader testing setup put in place, so you can test some of the examples as you go through.</p> -<p>See our section on <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">testing screenreaders</a> for more information.</p> +<p>See our section on <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">testing screenreaders</a> for more information.</p> <h3 id="SignpostsLandmarks">Signposts/Landmarks</h3> @@ -160,7 +160,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <p>If you go to VoiceOver's landmarks menu (accessed using VoiceOver key + U and then using the cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14420/landmarks-list.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="" src="landmarks-list.png"></p> <p>However, we could do better here. the search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark, beyond the actual input being called out as a search input (<code><input type="search"></code>). In addition, some older browsers (most notably IE8) don't recognise the semantics of the HTML5 elements.</p> @@ -202,7 +202,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <p>Content loaded into the DOM can be easily accessed using a screenreader, from textual content to alternative text attached to images. Traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments.</p> -<p>The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>, or <a href="/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>. These are sometimes referred to as <strong>live regions</strong>.</p> +<p>The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, <a href="/fr/docs/Web/API/Fetch_API">Fetch</a>, or <a href="/fr/docs/Web/API/Document_Object_Model">DOM APIs</a>. These are sometimes referred to as <strong>live regions</strong>.</p> <p>Let's look at a quick example — see <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> (also <a href="http://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html">see it running live</a>). In this example we have a simple random quote box:</p> @@ -213,7 +213,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics </blockquote> </section></pre> -<p>Our JavaScript loads a JSON file via <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> containing a series of random quotes and their authors. Once that is done, we start up a <code><a href="/en-US/docs/Web/API/WindowTimers/setInterval">setInterval()</a></code> loop that loads a new random quote into the quote box every 10 seconds:</p> +<p>Our JavaScript loads a JSON file via <code><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> containing a series of random quotes and their authors. Once that is done, we start up a <code><a href="/fr/docs/Web/API/WindowTimers/setInterval">setInterval()</a></code> loop that loads a new random quote into the quote box every 10 seconds:</p> <pre class="brush: js">var intervalID = window.setInterval(showQuote, 10000);</pre> @@ -234,7 +234,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <p>This will cause a screenreader to read out the content as it is updated.</p> <div class="note"> -<p><strong>Note</strong>: Most browsers will throw a security exception if you try to do an <code>XMLHttpRequest</code> call from a <code>file://</code> URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">using GitHub</a>, or a local web server like <a href="http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/">Python's SimpleHTTPServer</a>.</p> +<p><strong>Note :</strong> Most browsers will throw a security exception if you try to do an <code>XMLHttpRequest</code> call from a <code>file://</code> URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example <a href="/fr/docs/Learn/Common_questions/Using_Github_pages">using GitHub</a>, or a local web server like <a href="http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/">Python's SimpleHTTPServer</a>.</p> </div> <p>There is an additional consideration here — only the bit of text that updates is read out. It might be nice if we always read out the heading too, so the user can remember what is being read out. To do this, we can add the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-atomic">aria-atomic</a></code> property to the section. Update your <code><section></code> tag again, like so:</p> @@ -244,11 +244,11 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <p>The <code>aria-atomic="true"</code> attribute tells screenreaders to read out the entire element contents as one atomic unit, not just the bits that were updated.</p> <div class="note"> -<p><strong>Note</strong>: You can see the finished example at <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html">aria-live.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-live.html">see it running live</a>).</p> +<p><strong>Note :</strong> You can see the finished example at <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html">aria-live.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-live.html">see it running live</a>).</p> </div> <div class="note"> -<p><strong>Note</strong>: The <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.</p> +<p><strong>Note :</strong> The <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.</p> </div> <h3 id="Enhancing_keyboard_accessibility">Enhancing keyboard accessibility</h3> @@ -264,7 +264,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <li><code>tabindex="-1"</code> — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links. </li> </ul> -<p>We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see <a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a>.</p> +<p>We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see <a href="/fr/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a>.</p> <h3 id="Accessibility_of_non-semantic_controls">Accessibility of non-semantic controls</h3> @@ -272,15 +272,15 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <h4 id="Form_validation_and_error_alerts">Form validation and error alerts</h4> -<p>First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive">Keeping it unobtrusive</a> for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:</p> +<p>First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive">Keeping it unobtrusive</a> for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:</p> -<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>errors<span class="punctuation token">"</span></span> <span class="attr-name token">role</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>alert<span class="punctuation token">"</span></span> <span class="attr-name token">aria-relevant</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>all<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>ul</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>ul</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> +<pre class="brush: html"><div class="errors" role="alert" aria-relevant="all"> + <ul> + </ul> +</div></pre> <ul> - <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">role="alert"</a></code> automatically turns the element it is applied to into a live region, so changes to it are read out; it also semantically identifies it as an alert message (important time/context sensitive information), and represents a better, more accessible way of delivering an alert to a user (modal dialogs like <code><a href="/en-US/docs/Web/API/Window/alert">alert()</a></code> calls have a number of accessibility problems; see <a href="http://webaim.org/techniques/javascript/other#popups">Popup Windows</a> by WebAIM).</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">role="alert"</a></code> automatically turns the element it is applied to into a live region, so changes to it are read out; it also semantically identifies it as an alert message (important time/context sensitive information), and represents a better, more accessible way of delivering an alert to a user (modal dialogs like <code><a href="/fr/docs/Web/API/Window/alert">alert()</a></code> calls have a number of accessibility problems; see <a href="http://webaim.org/techniques/javascript/other#popups">Popup Windows</a> by WebAIM).</li> <li>An <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> value of <code>all</code> instructs the screenreader to read out the contents of the error list when any changes are made to it — i.e. when errors are added or removed. This is useful because the user will want to know what errors are left, not just what has been added or removed from the list.</li> </ul> @@ -304,14 +304,14 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics </ol> <div class="note"> -<p><strong>Note</strong>: You can see the finished example live at <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html">form-validation-updated.html</a>.</p> +<p><strong>Note :</strong> You can see the finished example live at <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html">form-validation-updated.html</a>.</p> </div> -<p>WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> property to provide a label where we don't want the label to be visible to sighted users (see the {{anch("Signposts/Landmarks")}} section, above). There are some other labelling techniques that use other properties such as <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></code> if you want to designate a non-<code><label></code> element as a label or label multiple form inputs with the same label, and <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a></code>, if you want to associate other information with a form input and have it read out as well. See <a href="http://webaim.org/techniques/forms/advanced">WebAIM's Advanced Form Labeling article</a><span class="subtitle"> for more details.</span></p> +<p>WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> property to provide a label where we don't want the label to be visible to sighted users (see the {{anch("Signposts/Landmarks")}} section, above). There are some other labelling techniques that use other properties such as <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></code> if you want to designate a non-<code><label></code> element as a label or label multiple form inputs with the same label, and <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a></code>, if you want to associate other information with a form input and have it read out as well. See <a href="http://webaim.org/techniques/forms/advanced">WebAIM's Advanced Form Labeling article</a> for more details.</p> -<p><span class="subtitle">There are many other useful properties and states too, for indicating the status of form elements. For example, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>="true"</code> can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.</span></p> +<p>There are many other useful properties and states too, for indicating the status of form elements. For example, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>="true"</code> can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.</p> -<p><span class="subtitle">If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html">form-validation-checkbox-disabled.html</a> demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:</span></p> +<p>If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html">form-validation-checkbox-disabled.html</a> demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:</p> <pre class="brush: html"><p class="hidden-alert" aria-live="assertive"></p></pre> @@ -335,7 +335,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <h4 id="Describing_non-semantic_buttons_as_buttons">Describing non-semantic buttons as buttons</h4> -<p>A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a> in the HTML accessibility article, and {{anch("Enhancing keyboard accessibility")}}, above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using <code>tabindex</code> and a bit of JavaScript.</p> +<p>A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see <a href="/fr/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a> in the HTML accessibility article, and {{anch("Enhancing keyboard accessibility")}}, above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using <code>tabindex</code> and a bit of JavaScript.</p> <p>But what about screenreaders? They still won't see the elements as buttons. If we test our <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> example in a screenreader, our fake buttons will be reported using phrases like "Click me!, group", which is obviously confusing.</p> @@ -346,14 +346,14 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <p>Now when you try this using a screenreader, you'll have buttons be reported using phrases like "Click me!, button" — much better.</p> <div class="note"> -<p><strong>Note</strong>: Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!</p> +<p><strong>Note :</strong> Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!</p> </div> <h4 id="Guiding_users_through_complex_widgets">Guiding users through complex widgets</h4> <p>There are a whole host of other <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">roles</a> that can identify non-semantic element structures as common UI features that go beyond what's available in standard HTML, for example <code><a href="https://www.w3.org/TR/wai-aria-1.1/#combobox">combobox</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#slider">slider</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tree">tree</a></code>. You can see a number of userful examples in the <a href="https://dequeuniversity.com/library/">Deque university code library</a>, to give you an idea of how such controls can be made accessible.</p> -<p>Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things">Hiding things</a> in our CSS and JavaScript accessibility article), which you can find at <a class="external external-icon" href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Tabbed info box example</a> (see <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>).</p> +<p>Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things">Hiding things</a> in our CSS and JavaScript accessibility article), which you can find at <a class="external external-icon" href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Tabbed info box example</a> (see <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>).</p> <p>This example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents. It is also fairly accessible too — you can scroll through the content and use the headings to navigate , even if you can't see what is happening on screen. It is however not that obvious what the content is — a screenreader currently reports the content as a list of links, and some content with three headings. It doesn't give you any idea of what the relationship is between the content. Giving the user more clues as to the structure of the content is always good.</p> @@ -377,7 +377,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics </div></pre> <div class="note"> -<p><strong>Note</strong>: The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.</p> +<p><strong>Note :</strong> The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.</p> </div> <p>The new features are as follows:</p> @@ -394,7 +394,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <p>In our tests, this new structure did serve to improve things overall. The tabs are now recognised as tabs (e.g. "tab" is spoken by the screenreader), the selected tab is indicated by "selected" being read out with the tab name, and the screenreader also tells you which tab number you are currently on. In addition, because of the <code>aria-hidden</code> settings (only the non-hidden tab ever has <code>aria-hidden="false"</code> set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find.</p> <div class="note"> -<p><strong>Note</strong>: If there is anything you explicitly don't want screen readers to read out, you can give them the <code>aria-hidden="true"</code> attribute.</p> +<p><strong>Note :</strong> If there is anything you explicitly don't want screen readers to read out, you can give them the <code>aria-hidden="true"</code> attribute.</p> </div> <h2 id="Summary">Summary</h2> @@ -419,7 +419,7 @@ original_slug: Apprendre/a11y/WAI-ARIA_basics <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="/fr/docs/Apprendre/a11y/Mobile">Accessibilité mobile</a></li> <li><a href="/fr/docs/Apprendre/a11y/Accessibility_troubleshooting">Évaluation: dépannage d'accessibilité</a></li> diff --git a/files/fr/learn/accessibility/what_is_accessibility/index.html b/files/fr/learn/accessibility/what_is_accessibility/index.html index a101c80ccb..dc7376524e 100644 --- a/files/fr/learn/accessibility/what_is_accessibility/index.html +++ b/files/fr/learn/accessibility/what_is_accessibility/index.html @@ -21,9 +21,9 @@ original_slug: Apprendre/a11y/What_is_accessibility <div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div> -<p class="summary">Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela comprend les groupes de personnes que l'on a besoin de considérer et pourquoi, quels outils ils utilisent afin d'intéragir avec les pages web et comment rendre accessible la partie de notre espace de travail web.</p> +<p>Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela comprend les groupes de personnes que l'on a besoin de considérer et pourquoi, quels outils ils utilisent afin d'intéragir avec les pages web et comment rendre accessible la partie de notre espace de travail web.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> @@ -58,7 +58,7 @@ original_slug: Apprendre/a11y/What_is_accessibility <p>Les personnes ayant un handicap sont aussi variées que les personnes sans handicap, tout comme leurs handicaps. L'important ici est de ne pas penser seulement à votre propre ordinateur et à comment vous utilisez le web, mais de commencer à apprendre comment les autres l'utilisent — <em>vous n'êtes pas vos utilisateurs</em>. Les principaux types de handicap à considérer sont expliqués ci-dessous, avec les outils spéciaux que chacun utilise pour accéder aux contenus du web (connus sous le nom de <strong>technologies d'assistance</strong>).</p> <div class="note"> -<p><strong>Note </strong>: L'aide-mémoire <a href="http://www.who.int/mediacentre/factsheets/fs352/fr/">Handicap et santé</a> de l'Organisation Mondiale de la Santé indique que « Plus d’un milliard de personnes, c’est-à -dire environ 15% de la population mondiale, présentent une forme ou une autre de handicap » , et que « Entre 110 et 190 millions de personnes adultes ont des difficultés importantes sur le plan fonctionnel. »</p> +<p><strong>Note :</strong> L'aide-mémoire <a href="http://www.who.int/mediacentre/factsheets/fs352/fr/">Handicap et santé</a> de l'Organisation Mondiale de la Santé indique que « Plus d’un milliard de personnes, c’est-à -dire environ 15% de la population mondiale, présentent une forme ou une autre de handicap » , et que « Entre 110 et 190 millions de personnes adultes ont des difficultés importantes sur le plan fonctionnel. »</p> </div> <h3 id="Les_personnes_ayant_des_troubles_de_la_vue">Les personnes ayant des troubles de la vue</h3> @@ -71,7 +71,7 @@ original_slug: Apprendre/a11y/What_is_accessibility <li>Certains sont intégrés au système d'exploitation, comme <a class="external external-icon" href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (Mac OS X et iOS), <a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a> (Microsoft Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (sur Chrome OS), et <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li> </ul> -<p>Il est conseillé de se familiariser avec les lecteurs d'écran ; vous devriez installer un lecteur d'écran et expérimenter avec pour comprendre comment il marche. Lisez notre <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Guide pour tester les lecteurs d'écrans sur différents navigateurs (en)</a> pour avoir plus d'information sur leur utilisation. La vidéo ci-dessous (en anglais) vous donne un bref aperçu de l'experience.</p> +<p>Il est conseillé de se familiariser avec les lecteurs d'écran ; vous devriez installer un lecteur d'écran et expérimenter avec pour comprendre comment il marche. Lisez notre <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Guide pour tester les lecteurs d'écrans sur différents navigateurs (en)</a> pour avoir plus d'information sur leur utilisation. La vidéo ci-dessous (en anglais) vous donne un bref aperçu de l'experience.</p> <p>{{EmbedYouTube("IK97XMibEws")}}</p> @@ -91,94 +91,94 @@ original_slug: Apprendre/a11y/What_is_accessibility <p>Ce genre de handicap peut aussi venir avec l'âge, et non d'un accident ou d'une pathologie particulière, ou encore être la conséquence de limitations matérielles — certains utilisateurs peuvent ne pas avoir de souris.</p> -<p>En général, cela se traduit au niveau du développement web par la nécessité de rendre les contrôles accessible au clavier — nous discuterons de l'accessibilité au clavier plus tard dans d'autres articles du module, mais cela peut être une bonne idée d'essayer de naviguer sur certains sites en utilisant seulement le clavier. Par exemple, pouvez vous naviguer entre les différents champs d'un formulaire juste avec la touche <kbd>Tab</kbd> ? Vous trouverez plus de détails à propos de l'utilisation du clavier dans la section <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Test d'accessibilité avec le clavier intégré entre différents navigateurs(en)</a>.</p> +<p>En général, cela se traduit au niveau du développement web par la nécessité de rendre les contrôles accessible au clavier — nous discuterons de l'accessibilité au clavier plus tard dans d'autres articles du module, mais cela peut être une bonne idée d'essayer de naviguer sur certains sites en utilisant seulement le clavier. Par exemple, pouvez vous naviguer entre les différents champs d'un formulaire juste avec la touche <kbd>Tab</kbd> ? Vous trouverez plus de détails à propos de l'utilisation du clavier dans la section <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Test d'accessibilité avec le clavier intégré entre différents navigateurs(en)</a>.</p> -<p class="titre-principal">De nombreuses personnes souffrent de troubles de la mobilité. Par exemple, en France, 4% des personnes vivant en ménage ordinaire déclarent avoir des difficultés à se servir des mains et doigts, d'après la vue d'ensemble <a href="https://www.insee.fr/fr/statistiques/1372411?sommaire=1372421">L'approche du handicap par les limitations fonctionnelles et la restriction globale d'activité chez les adultes de 20 à 59 ans</a> de l'INSEE.</p> +<p>De nombreuses personnes souffrent de troubles de la mobilité. Par exemple, en France, 4% des personnes vivant en ménage ordinaire déclarent avoir des difficultés à se servir des mains et doigts, d'après la vue d'ensemble <a href="https://www.insee.fr/fr/statistiques/1372411?sommaire=1372421">L'approche du handicap par les limitations fonctionnelles et la restriction globale d'activité chez les adultes de 20 à 59 ans</a> de l'INSEE.</p> -<h3 id="Personnes_ayant_des_déficiences_cognitives"><span class="tlid-translation translation"><span title="">Personnes ayant des déficiences cognitives</span></span></h3> +<h3 id="Personnes_ayant_des_déficiences_cognitives">Personnes ayant des déficiences cognitives</h3> -<p><span class="tlid-translation translation"><span title="">La dernière catégorie d'incapacités est probablement la plus large. Les déficiences cognitives désignent généralement des incapacités allant des maladies mentales aux difficultés d'apprentissage, aux difficultés de compréhension et de concentration telles que</span></span> <a href="https://naitreetgrandir.com/fr/mauxenfants/indexmaladiesa_z/fiche.aspx?doc=naitre-grandir-sante-enfant-trouble-deficit-attention-hyperactivite-tdah">TDAH-trouble d'hyperactivité avec déficit de l'attention</a>, <a href="https://cenop.ca/troubles-comportement/tsa-trouble-spectre-autisme.php">TSA-trouble du spectre de l’autisme</a>, <span class="tlid-translation translation"><span title="">aux personnes atteintes de</span></span> <a href="http://www.psycom.org/Espace-Presse/Sante-mentale-de-A-a-Z/Schizophrenie-s">schizophrénie</a>, <span class="tlid-translation translation"><span title="">et à de nombreux autres types de désordres, qui peuvent affecter de nombreux aspects de la vie quotidienne en raison de problèmes de mémoire, de résolution de problèmes, de compréhension, d'attention, etc.</span></span> </p> +<p>La dernière catégorie d'incapacités est probablement la plus large. Les déficiences cognitives désignent généralement des incapacités allant des maladies mentales aux difficultés d'apprentissage, aux difficultés de compréhension et de concentration telles que <a href="https://naitreetgrandir.com/fr/mauxenfants/indexmaladiesa_z/fiche.aspx?doc=naitre-grandir-sante-enfant-trouble-deficit-attention-hyperactivite-tdah">TDAH-trouble d'hyperactivité avec déficit de l'attention</a>, <a href="https://cenop.ca/troubles-comportement/tsa-trouble-spectre-autisme.php">TSA-trouble du spectre de l’autisme</a>, aux personnes atteintes de <a href="http://www.psycom.org/Espace-Presse/Sante-mentale-de-A-a-Z/Schizophrenie-s">schizophrénie</a>, et à de nombreux autres types de désordres, qui peuvent affecter de nombreux aspects de la vie quotidienne en raison de problèmes de mémoire, de résolution de problèmes, de compréhension, d'attention, etc. </p> -<p><span class="tlid-translation translation"><span title="">Le plus souvent, ces incapacités peuvent affecter l'utilisation du site web : difficulté à comprendre comment effectuer une tâche, à se rappeler comment effectuer une tâche déjà accomplie ou à une frustration accrue en cas de confusion dans les flux de travail ou d'incohérences dans la présentation / navigation / autre page</span></span>.</p> +<p>Le plus souvent, ces incapacités peuvent affecter l'utilisation du site web : difficulté à comprendre comment effectuer une tâche, à se rappeler comment effectuer une tâche déjà accomplie ou à une frustration accrue en cas de confusion dans les flux de travail ou d'incohérences dans la présentation / navigation / autre page.</p> -<p><span class="tlid-translation translation"><span title="">Contrairement à d’autres problèmes d’accessibilité web, il est impossible de prescrire des solutions rapides à de nombreux problèmes d’accessibilité web résultant de déficiences cognitives ;</span> l<span title="">a meilleure chance que vous ayez est de concevoir vos sites web de manière à être aussi logiques, cohérents et utilisables que possible. Par exemple, assurez-vous que :</span></span></p> +<p>Contrairement à d’autres problèmes d’accessibilité web, il est impossible de prescrire des solutions rapides à de nombreux problèmes d’accessibilité web résultant de déficiences cognitives ; la meilleure chance que vous ayez est de concevoir vos sites web de manière à être aussi logiques, cohérents et utilisables que possible. Par exemple, assurez-vous que :</p> <ul> - <li><span class="tlid-translation translation"><span title="">les pages sont cohérentes </span></span>— <span class="tlid-translation translation"><span title="">la navigation, l'en-tête, le pied de page et le contenu principal se trouvent toujours aux mêmes endroits.</span></span></li> - <li><span class="tlid-translation translation"><span title="">les outils sont bien conçus et faciles à utiliser</span></span>.</li> - <li><span class="tlid-translation translation"><span title="">Les processus en plusieurs étapes sont divisés en étapes logiques, avec des rappels réguliers de l'état d'avancement du processus et du temps qu'il vous reste pour terminer le processus, le cas échéant.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Les workflows sont logiques, simples et nécessitent le moins d’interactions possible.</span> <span title="">Par exemple, l'inscription et la connexion à un site web sont souvent complexes.</span></span></li> - <li><span class="tlid-translation translation"><span title="">les pages ne sont ni trop longues ni trop denses en termes de quantité d'informations présentées à la fois.</span></span></li> - <li><span class="tlid-translation translation"><span title="">le langage utilisé dans vos pages est aussi simple et clair que possible, et ne contient pas un jargon et un argot inutiles.</span></span></li> - <li><span class="tlid-translation translation"><span title="">les points importants et le contenu sont mis en évidence.</span></span></li> - <li><span class="tlid-translation translation"><span title="">les erreurs des utilisateurs sont clairement mises en évidence, avec des messages d'aide suggérant des solutions</span></span>.</li> + <li>les pages sont cohérentes — la navigation, l'en-tête, le pied de page et le contenu principal se trouvent toujours aux mêmes endroits.</li> + <li>les outils sont bien conçus et faciles à utiliser.</li> + <li>Les processus en plusieurs étapes sont divisés en étapes logiques, avec des rappels réguliers de l'état d'avancement du processus et du temps qu'il vous reste pour terminer le processus, le cas échéant.</li> + <li>Les workflows sont logiques, simples et nécessitent le moins d’interactions possible. Par exemple, l'inscription et la connexion à un site web sont souvent complexes.</li> + <li>les pages ne sont ni trop longues ni trop denses en termes de quantité d'informations présentées à la fois.</li> + <li>le langage utilisé dans vos pages est aussi simple et clair que possible, et ne contient pas un jargon et un argot inutiles.</li> + <li>les points importants et le contenu sont mis en évidence.</li> + <li>les erreurs des utilisateurs sont clairement mises en évidence, avec des messages d'aide suggérant des solutions.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception.</span> Elle<span title="">s profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail.</span></span></p> +<p>Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception. Elles profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail.</p> -<p><span class="tlid-translation translation"><span title="">En termes de statistiques, encore une fois, les chiffres sont importants.</span> Le</span> r<a href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">apport 2014 sur le statut d'invalidité </a> <span class="tlid-translation translation"><span title="">(PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive</span></span> .</p> +<p>En termes de statistiques, encore une fois, les chiffres sont importants. Le r<a href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">apport 2014 sur le statut d'invalidité </a> (PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive .</p> <div class="note"> -<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">La page</span></span> <a href="https://apprendreaeduquer.fr/fonctions-cognitives/">cognitives</a> <span class="tlid-translation translation"><span title="">de </span></span>apprendreaeduquer<span class="tlid-translation translation"><span title=""> fournit une extension utile de ces idées et mérite certainement d'être lue.</span></span> </p> +<p><strong>Note :</strong> La page <a href="https://apprendreaeduquer.fr/fonctions-cognitives/">cognitives</a> de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue. </p> </div> -<h2 id="Implémentation_de_laccessibilité_dans_votre_projet"><span class="tlid-translation translation"><span title="">Implémentation de l'accessibilité dans votre projet</span></span></h2> +<h2 id="Implémentation_de_laccessibilité_dans_votre_projet">Implémentation de l'accessibilité dans votre projet</h2> -<p><span class="tlid-translation translation"><span title="">Un mythe commun en matière d'accessibilité est que l'accessibilité est un "supplément" coûteux à mettre en œuvre sur un projet.</span> <span title="">Ce mythe peut en réalité être vrai si :</span></span></p> +<p>Un mythe commun en matière d'accessibilité est que l'accessibilité est un "supplément" coûteux à mettre en œuvre sur un projet. Ce mythe peut en réalité être vrai si :</p> <ul> - <li><span class="tlid-translation translation"><span title="">Vous essayez de "moderniser" l'accessibilité sur un site Web existant qui présente d'importants problèmes d'accessibilité.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Vous avez seulement commencé à prendre en compte l'accessibilité et à découvrir des problèmes liés aux dernières étapes d'un projet.</span></span></li> + <li>Vous essayez de "moderniser" l'accessibilité sur un site Web existant qui présente d'importants problèmes d'accessibilité.</li> + <li>Vous avez seulement commencé à prendre en compte l'accessibilité et à découvrir des problèmes liés aux dernières étapes d'un projet.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Cependant, si vous envisagez l'accessibilité dès le début d'un projet, le coût de la plupart des contenus accessibles devrait être assez minime.</span></span></p> +<p>Cependant, si vous envisagez l'accessibilité dès le début d'un projet, le coût de la plupart des contenus accessibles devrait être assez minime.</p> -<p><span class="tlid-translation translation"><span title="">Lors de la planification de votre projet, tenez compte des tests d'accessibilité dans votre programme de tests, comme pour tout autre segment d'audience cible important (par exemple, les navigateurs de bureau ou mobiles cibles).</span> <span title="">Testez tôt et souvent, en exécutant idéalement des tests automatisés pour détecter les fonctionnalités manquantes détectables par programme (telles que les images manquantes</span></span>  <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">alternative text</a> <span class="tlid-translation translation"><span title="">ou le texte du lien incorrect </span></span>—<span class="tlid-translation translation"><span title=""> voir</span></span> <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">Element relationships and context</a>), <span class="tlid-translation translation"><span title="">et en effectuant des tests avec des groupes d'utilisateurs désactivés pour voir comment.</span> <span title="">des fonctionnalités de site plus complexes fonctionnent pour eux, par exemple:</span></span></p> +<p>Lors de la planification de votre projet, tenez compte des tests d'accessibilité dans votre programme de tests, comme pour tout autre segment d'audience cible important (par exemple, les navigateurs de bureau ou mobiles cibles). Testez tôt et souvent, en exécutant idéalement des tests automatisés pour détecter les fonctionnalités manquantes détectables par programme (telles que les images manquantes  <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">alternative text</a> ou le texte du lien incorrect — voir <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">Element relationships and context</a>), et en effectuant des tests avec des groupes d'utilisateurs désactivés pour voir comment. des fonctionnalités de site plus complexes fonctionnent pour eux, par exemple:</p> <ul> - <li><span class="tlid-translation translation"><span title="">Mon widget de sélecteur de date est-il utilisable par les personnes utilisant des lecteurs d'écran ?</span></span></li> - <li><span class="tlid-translation translation"><span title="">Si le contenu est mis à jour de manière dynamique, les personnes malvoyantes le savent-elles ?</span></span></li> - <li><span class="tlid-translation translation"><span title="">Les boutons de mon UI sont-ils accessibles via le clavier et les interfaces tactiles ?</span></span></li> + <li>Mon widget de sélecteur de date est-il utilisable par les personnes utilisant des lecteurs d'écran ?</li> + <li>Si le contenu est mis à jour de manière dynamique, les personnes malvoyantes le savent-elles ?</li> + <li>Les boutons de mon UI sont-ils accessibles via le clavier et les interfaces tactiles ?</li> </ul> -<p><span class="tlid-translation translation"><span title="">Vous pouvez et devez garder une note sur les problèmes potentiels de votre contenu qui devront être redessinés pour le rendre accessible, assurez-vous qu'il a été testé minutieusement et réfléchissez aux solutions / alternatives.</span> <span title="">Le contenu textuel (comme vous le verrez dans le prochain article) est simple, mais qu'en est-il de votre contenu multimédia et de vos graphismes 3D fantastiques ?</span> <span title="">Vous devriez examiner le budget de votre projet et réfléchir de manière réaliste aux solutions disponibles pour rendre ce contenu accessible ?</span> <span title="">Vous pourriez avoir à payer pour que tout votre contenu multimédia soit transcrit, ce qui peut être coûteux, mais réalisable.</span></span></p> +<p>Vous pouvez et devez garder une note sur les problèmes potentiels de votre contenu qui devront être redessinés pour le rendre accessible, assurez-vous qu'il a été testé minutieusement et réfléchissez aux solutions / alternatives. Le contenu textuel (comme vous le verrez dans le prochain article) est simple, mais qu'en est-il de votre contenu multimédia et de vos graphismes 3D fantastiques ? Vous devriez examiner le budget de votre projet et réfléchir de manière réaliste aux solutions disponibles pour rendre ce contenu accessible ? Vous pourriez avoir à payer pour que tout votre contenu multimédia soit transcrit, ce qui peut être coûteux, mais réalisable.</p> -<p><span class="tlid-translation translation"><span title="">Aussi, soyez réaliste.</span> <span title="">"100% d'accessibilité" est un idéal impossible à obtenir </span></span>— <span class="tlid-translation translation"><span title="">vous rencontrerez toujours un type de problème qui oblige un utilisateur à trouver certains contenus difficiles à utiliser </span></span>— <span class="tlid-translation translation"><span title="">mais vous devez en faire autant que vous le pouvez.</span> <span title="">Si vous envisagez d'inclure un graphique à secteurs 3D ultra-graphique créé à l'aide de WebGL, vous pouvez inclure un tableau de données en tant que représentation alternative accessible des données.</span> <span title="">Vous pouvez également simplement inclure la table et supprimer le graphique à secteurs 3D : la table est accessible à tous, plus rapide à coder, moins gourmande en temps processeur et plus facile à gérer.</span></span> </p> +<p>Aussi, soyez réaliste. "100% d'accessibilité" est un idéal impossible à obtenir — vous rencontrerez toujours un type de problème qui oblige un utilisateur à trouver certains contenus difficiles à utiliser — mais vous devez en faire autant que vous le pouvez. Si vous envisagez d'inclure un graphique à secteurs 3D ultra-graphique créé à l'aide de WebGL, vous pouvez inclure un tableau de données en tant que représentation alternative accessible des données. Vous pouvez également simplement inclure la table et supprimer le graphique à secteurs 3D : la table est accessible à tous, plus rapide à coder, moins gourmande en temps processeur et plus facile à gérer. </p> -<p><span class="tlid-translation translation"><span title="">D'autre part, si vous travaillez sur un site web de galerie présentant des œuvres d'art 3D intéressantes, il serait déraisonnable de s'attendre à ce que chaque œuvre d'art soit parfaitement accessible aux personnes malvoyantes, étant donné qu'il s'agit d'un support entièrement visuel.</span></span></p> +<p>D'autre part, si vous travaillez sur un site web de galerie présentant des œuvres d'art 3D intéressantes, il serait déraisonnable de s'attendre à ce que chaque œuvre d'art soit parfaitement accessible aux personnes malvoyantes, étant donné qu'il s'agit d'un support entièrement visuel.</p> -<p><span class="tlid-translation translation"><span title="">Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible.</span> <span title="">Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème.</span></span></p> +<p>Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible. Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème.</p> <div class="note"> -<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">Notre article</span></span> <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility"> Gérer les problèmes courants d'accessibilité</a> <span class="tlid-translation translation"><span title="">couvre les spécificités d'accessibilité qui doivent être testées plus en détail.</span></span></p> +<p><strong>Note :</strong> Notre article <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility"> Gérer les problèmes courants d'accessibilité</a> couvre les spécificités d'accessibilité qui doivent être testées plus en détail.</p> </div> -<p><span class="tlid-translation translation"><span title="">Résumer</span></span> :</p> +<p>Résumer :</p> <ul> - <li><span class="tlid-translation translation"><span title="">Pensez à l'accessibilité dès le début d'un projet et testez tôt et souvent.</span> <span title="">Comme tout autre bogue, un problème d'accessibilité devient d'autant plus coûteux à résoudre qu'il est découvert tard</span></span>.</li> - <li><span class="tlid-translation translation"><span title="">N'oubliez pas que de nombreuses pratiques optimales en matière d'accessibilité profitent à tout le monde, pas uniquement aux utilisateurs handicapés.</span> <span title="">Par exemple, le balisage sémantique lean n’est pas seulement bon pour les lecteurs d’écran, il est également rapide à charger et performant, donc meilleur pour tout le monde, en particulier pour les appareils mobiles et/ou les connexions lentes.</span></span></li> - <li><span class="tlid-translation translation"><span title="">Publier une déclaration d'accessibilité sur votre site et interagir avec les personnes ayant des problèmes</span></span>.</li> + <li>Pensez à l'accessibilité dès le début d'un projet et testez tôt et souvent. Comme tout autre bogue, un problème d'accessibilité devient d'autant plus coûteux à résoudre qu'il est découvert tard.</li> + <li>N'oubliez pas que de nombreuses pratiques optimales en matière d'accessibilité profitent à tout le monde, pas uniquement aux utilisateurs handicapés. Par exemple, le balisage sémantique lean n’est pas seulement bon pour les lecteurs d’écran, il est également rapide à charger et performant, donc meilleur pour tout le monde, en particulier pour les appareils mobiles et/ou les connexions lentes.</li> + <li>Publier une déclaration d'accessibilité sur votre site et interagir avec les personnes ayant des problèmes.</li> </ul> -<h2 id="Directives_daccessibilité_et_loi"><span class="tlid-translation translation"><span title="">Directives d'accessibilité et loi</span></span></h2> +<h2 id="Directives_daccessibilité_et_loi">Directives d'accessibilité et loi</h2> -<p><span class="tlid-translation translation"><span title="">Il existe de nombreuses listes de contrôle et ensembles de directives disponibles sur lesquels baser les tests d'accessibilité, ce qui peut sembler fastidieux à première vue.</span> <span title="">Notre conseil est de vous familiariser avec les domaines fondamentaux dans lesquels vous devez prendre soin, ainsi que de comprendre les structures de haut niveau des directives qui vous sont le plus utiles.</span></span></p> +<p>Il existe de nombreuses listes de contrôle et ensembles de directives disponibles sur lesquels baser les tests d'accessibilité, ce qui peut sembler fastidieux à première vue. Notre conseil est de vous familiariser avec les domaines fondamentaux dans lesquels vous devez prendre soin, ainsi que de comprendre les structures de haut niveau des directives qui vous sont le plus utiles.</p> <ul> - <li><span class="tlid-translation translation"><span title="">Pour commencer, le W3C a publié un document volumineux et très détaillé qui inclut des critères très précis, indépendants de la technologie, pour la conformité de l'accessibilité.</span> <span title="">Celles-ci s'appellent le</span></span> <a href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines</a> (WCAG), <span class="tlid-translation translation"><span title="">et ne constituent en aucun cas une lecture brève.</span> <span title="">Les critères sont divisés en quatre catégories principales, qui spécifient comment les implémentations peuvent être rendues perceptibles, exploitables, compréhensibles et robustes.</span> <span title="">Le meilleur endroit pour commencer à apprendre et </span></span> <a href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG at a Glance</a>. <span class="tlid-translation translation"><span title="">Il n'est pas nécessaire d'apprendre le WCAG par cœur </span></span>— <span class="tlid-translation translation"><span title="">soyez conscient des principaux problèmes et utilisez une variété de techniques et d'outils pour mettre en évidence les domaines qui ne sont pas conformes aux critères du WCAG (voir ci-dessous pour plus d'informations).</span></span> </li> - <li><span class="tlid-translation translation"><span title="">Votre pays peut également avoir une législation spécifique régissant la nécessité d’accéder aux sites web desservant leur population </span></span>— <span class="tlid-translation translation"><span title="">par exemple</span></span>  <a href="http://www.section508.gov/content/learn">Section 508 of the Rehabilitation Act</a> en US, <a href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">Federal Ordinance on Barrier-Free Information Technology</a> en Germany, la lois sur <a href="http://www.legislation.gov.uk/ukpga/2010/15/contents">Equality Act</a> <span class="tlid-translation translation"><span title="">Royaume-Uni</span></span>, <a href="http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita">Accessibilità </a> en Italy, le <a href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">Disability Discrimination Act</a> en Australia, etc.</li> + <li>Pour commencer, le W3C a publié un document volumineux et très détaillé qui inclut des critères très précis, indépendants de la technologie, pour la conformité de l'accessibilité. Celles-ci s'appellent le <a href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines</a> (WCAG), et ne constituent en aucun cas une lecture brève. Les critères sont divisés en quatre catégories principales, qui spécifient comment les implémentations peuvent être rendues perceptibles, exploitables, compréhensibles et robustes. Le meilleur endroit pour commencer à apprendre et <a href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG at a Glance</a>. Il n'est pas nécessaire d'apprendre le WCAG par cœur — soyez conscient des principaux problèmes et utilisez une variété de techniques et d'outils pour mettre en évidence les domaines qui ne sont pas conformes aux critères du WCAG (voir ci-dessous pour plus d'informations). </li> + <li>Votre pays peut également avoir une législation spécifique régissant la nécessité d’accéder aux sites web desservant leur population — par exemple  <a href="http://www.section508.gov/content/learn">Section 508 of the Rehabilitation Act</a> en US, <a href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">Federal Ordinance on Barrier-Free Information Technology</a> en Germany, la lois sur <a href="http://www.legislation.gov.uk/ukpga/2010/15/contents">Equality Act</a> Royaume-Uni, <a href="http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita">Accessibilità </a> en Italy, le <a href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">Disability Discrimination Act</a> en Australia, etc.</li> </ul> -<p><span class="tlid-translation translation"><span title="">Ainsi, alors que le WCAG est un ensemble de directives, votre pays aura probablement des lois régissant l’accessibilité du Web, ou du moins l’accessibilité des services accessibles au public (sites web, télévision, espaces physiques, etc.). C’est une bonne idée.</span> <span title="">pour savoir quelles sont vos lois.</span> <span title="">Si vous ne faites aucun effort pour vérifier que votre contenu est accessible, vous pourriez éventuellement avoir des ennuis avec la loi si les personnes handicapées s'en plaignent</span></span>.</p> +<p>Ainsi, alors que le WCAG est un ensemble de directives, votre pays aura probablement des lois régissant l’accessibilité du Web, ou du moins l’accessibilité des services accessibles au public (sites web, télévision, espaces physiques, etc.). C’est une bonne idée. pour savoir quelles sont vos lois. Si vous ne faites aucun effort pour vérifier que votre contenu est accessible, vous pourriez éventuellement avoir des ennuis avec la loi si les personnes handicapées s'en plaignent.</p> -<p><span class="tlid-translation translation"><span title="">Cela semble sérieux, mais vous devez vraiment considérer l'accessibilité comme une priorité principale de vos pratiques de développement web, comme indiqué ci-dessus.</span> <span title="">En cas de doute, demandez conseil à un avocat qualifié.</span> <span title="">Nous n'allons pas donner plus de conseils que cela, car nous ne sommes pas des avocats.</span></span></p> +<p>Cela semble sérieux, mais vous devez vraiment considérer l'accessibilité comme une priorité principale de vos pratiques de développement web, comme indiqué ci-dessus. En cas de doute, demandez conseil à un avocat qualifié. Nous n'allons pas donner plus de conseils que cela, car nous ne sommes pas des avocats.</p> -<h2 id="API_daccessibilité"><span class="tlid-translation translation"><span title="">API d'accessibilité</span></span></h2> +<h2 id="API_daccessibilité">API d'accessibilité</h2> -<p><span class="tlid-translation translation"><span title="">Les navigateurs web utilisent des <strong>API d’accessibilité</strong> spéciales (fournies par le système d’exploitation sous-jacent) qui présentent des informations utiles pour les technologies d’aide (TA) </span></span>— <span class="tlid-translation translation"><span title="">les TA ont généralement tendance à utiliser des informations sémantiques. Ces informations ne comprennent donc pas les informations de style, ou</span> <span title="">JavaScript.</span> <span title="">Ces informations sont structurées dans une arborescence d'informations appelée <strong>arborescence d'accessibilité</strong>.</span></span></p> +<p>Les navigateurs web utilisent des <strong>API d’accessibilité</strong> spéciales (fournies par le système d’exploitation sous-jacent) qui présentent des informations utiles pour les technologies d’aide (TA) — les TA ont généralement tendance à utiliser des informations sémantiques. Ces informations ne comprennent donc pas les informations de style, ou JavaScript. Ces informations sont structurées dans une arborescence d'informations appelée <strong>arborescence d'accessibilité</strong>.</p> -<p><span class="tlid-translation translation"><span title="">Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles</span></span> :</p> +<p>Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles :</p> <ul> <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li> @@ -188,12 +188,10 @@ original_slug: Apprendre/a11y/What_is_accessibility <li>iOS: UIAccessibility</li> </ul> -<p><span class="tlid-translation translation"><span title="">Lorsque les informations sémantiques natives fournies par les éléments HTML dans vos applications Web tombent, vous pouvez les compléter avec des fonctionnalités de la</span></span>  <a href="https://www.w3.org/TR/wai-aria/">WAI-ARIA specification</a>, <span class="tlid-translation translation"><span title="">qui ajoutent des informations sémantiques à l’arbre d’accessibilité pour améliorer l’accessibilité.</span> <span title="">Vous pouvez en apprendre beaucoup plus sur WAI-ARIA dans notre article sur les bases de</span></span> <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a>.</p> +<p>Lorsque les informations sémantiques natives fournies par les éléments HTML dans vos applications Web tombent, vous pouvez les compléter avec des fonctionnalités de la  <a href="https://www.w3.org/TR/wai-aria/">WAI-ARIA specification</a>, qui ajoutent des informations sémantiques à l’arbre d’accessibilité pour améliorer l’accessibilité. Vous pouvez en apprendre beaucoup plus sur WAI-ARIA dans notre article sur les bases de <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a>.</p> -<div class="text-wrap tlid-copy-target"> -<h2 class="result-shield-container tlid-copy-target" id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2> -</div> +<h2 id="Résumé">Résumé</h2> -<p><span class="tlid-translation translation"><span title="">Cet article aurait dû vous donner une vue d'ensemble utile de haut niveau de l'accessibilité, vous expliquer pourquoi c'est important et voir comment vous pouvez l'intégrer à votre flux de travail.</span> <span title="">Vous devriez maintenant aussi avoir soif d'apprendre les détails de la mise en œuvre susceptibles de rendre des sites accessibles. Nous commencerons dans cette question dans la section suivante, en nous demandant pourquoi le HTML constitue une bonne base d'accessibilité.</span></span></p> +<p>Cet article aurait dû vous donner une vue d'ensemble utile de haut niveau de l'accessibilité, vous expliquer pourquoi c'est important et voir comment vous pouvez l'intégrer à votre flux de travail. Vous devriez maintenant aussi avoir soif d'apprendre les détails de la mise en œuvre susceptibles de rendre des sites accessibles. Nous commencerons dans cette question dans la section suivante, en nous demandant pourquoi le HTML constitue une bonne base d'accessibilité.</p> <p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p> |