diff options
Diffstat (limited to 'files/fr/learn/accessibility')
| -rw-r--r-- | files/fr/learn/accessibility/accessibility_troubleshooting/index.html | 117 | ||||
| -rw-r--r-- | files/fr/learn/accessibility/css_and_javascript/index.html | 368 | ||||
| -rw-r--r-- | files/fr/learn/accessibility/html/index.html | 530 | ||||
| -rw-r--r-- | files/fr/learn/accessibility/index.html | 56 | ||||
| -rw-r--r-- | files/fr/learn/accessibility/mobile/index.html | 311 | ||||
| -rw-r--r-- | files/fr/learn/accessibility/multimedia/index.html | 374 | ||||
| -rw-r--r-- | files/fr/learn/accessibility/wai-aria_basics/index.html | 425 | ||||
| -rw-r--r-- | files/fr/learn/accessibility/what_is_accessibility/index.html | 198 |
8 files changed, 2379 insertions, 0 deletions
diff --git a/files/fr/learn/accessibility/accessibility_troubleshooting/index.html b/files/fr/learn/accessibility/accessibility_troubleshooting/index.html new file mode 100644 index 0000000000..27f7489b2e --- /dev/null +++ b/files/fr/learn/accessibility/accessibility_troubleshooting/index.html @@ -0,0 +1,117 @@ +--- +title: 'Évaluation: dépannage d''accessibilité' +slug: Apprendre/a11y/Accessibility_troubleshooting +tags: + - Accessibilité + - Apprendre + - CSS + - Débutant + - HTML + - JavaScript +translation_of: Learn/Accessibility/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> + +<table class="learn-box 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> + </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> + </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> + +<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><span class="tlid-translation translation"><span title="">Le site d'évaluation terminé devrait ressembler à ceci:</span></span></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><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> + +<h2 id="Résumé_du_projet"><span class="tlid-translation translation"><span title="">Résumé du projet</span></span></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> + +<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> + +<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> + +<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> +</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> +</div> + +<h3 id="Les_images"><font>Les images</font></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> + +<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> +</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> +</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> + +<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> + +<h3 id="La_table"><font>La table</font></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> + +<h3 id="Autres_considérations"><span class="tlid-translation translation"><span title="">Autres considérations?</span></span></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> + +<h2 id="Évaluation"><span class="tlid-translation translation"><span title="">Évaluation</span></span></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><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></p> + +<h2 id="Dans_ce_module"><span class="tlid-translation translation"><span title="">Dans ce module</span></span></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> +</ul> diff --git a/files/fr/learn/accessibility/css_and_javascript/index.html b/files/fr/learn/accessibility/css_and_javascript/index.html new file mode 100644 index 0000000000..3f59d3a489 --- /dev/null +++ b/files/fr/learn/accessibility/css_and_javascript/index.html @@ -0,0 +1,368 @@ +--- +title: Meilleures pratiques d'accessibilité CSS et JavaScript +slug: Apprendre/a11y/CSS_and_JavaScript +tags: + - Accessibilité + - Apprendre + - Article + - CSS + - Codage des scripts + - Guide + - JavaScript + - contraste + - couleur + - discret +translation_of: Learn/Accessibility/CSS_and_JavaScript +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> + +<p class="summary"><span class="tlid-translation translation"><span title="">CSS et JavaScript, lorsqu'ils sont utilisés correctement, peuvent également permettre des expériences web accessibles... ou peuvent nuire considérablement à l'accessibilité s'ils sont mal utilisés.</span> <span title="">Cet article décrit certaines des meilleures pratiques CSS et JavaScript à prendre en compte pour garantir que même un contenu complexe soit aussi accessible que possible.</span></span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td><span class="tlid-translation translation"><span title="">Connaissances informatiques de base, compréhension de base de HTML, CSS et JavaScript, et compréhension de</span></span> <a href="/fr/docs/Apprendre/a11y/What_is_accessibility"> Qu'est ce que l'accessibilité ?</a></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation">Objectif</span> :</th> + <td><span class="tlid-translation translation"><span title="">Familiarisez-vous avec l’utilisation appropriée de CSS et de JavaScript dans vos documents Web afin d’optimiser l’accessibilité et de ne pas la compromettre.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="CSS_et_JavaScript_des_technologies_accessibles"><span class="tlid-translation translation"><span title="">CSS et JavaScript, des technologies accessibles ?</span></span></h2> + +<p><span class="tlid-translation translation"><span title="">CSS et JavaScript n’ont pas la même importance immédiate en matière d’accessibilité que le HTML, mais ils peuvent toujours aider ou nuire à l’accessibilité, en fonction de leur utilisation.</span> <span title="">En d'autres termes, il est important que vous preniez en compte certains conseils de meilleures pratiques pour vous assurer que votre utilisation de CSS et de JavaScript ne ruine pas l'accessibilité de vos documents.</span></span></p> + +<h2 id="CSS">CSS</h2> + +<p><span class="tlid-translation translation"><span title="">Commençons par regarder le CSS.</span></span></p> + +<h3 id="Sémantique_correcte_et_attentes_de_lutilisateur"><span class="tlid-translation translation"><span title="">Sémantique correcte et attentes de l'utilisateur</span></span></h3> + +<p><span class="tlid-translation translation"><span title="">Il est possible d’utiliser CSS pour détourner l'apparence d'un élément HTML pour qu'il ressemble à un autre, mais cela ne veut pas dire que vous devriez le faire.</span> <span title="">Comme nous l’avons souvent mentionné dans notre article </span></span> <a href="/fr/docs/Apprendre/a11y/HTML"> HTML : une bonne base pour l'accessibilité</a>, <span class="tlid-translation translation"><span title="">vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié.</span> <span title="">Sinon, cela peut créer de la confusion et des difficultés d'usage pour tout le monde, plus particulièrement pour les utilisateurs handicapés.</span> <span title="">L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs </span></span> — <span class="tlid-translation translation"><span title="">les éléments ont une apparence et un comportement particuliers, en fonction de leurs fonctionnalités, et ces conventions communes sont attendues par les utilisateurs.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Par exemple, un utilisateur de lecteur d'écran ne peut pas naviguer dans une page via des éléments d'en-tête si le développeur n'a pas utilisé les éléments d'en-tête de manière appropriée pour annoter le contenu.</span> <span title="">De la même manière, un en-tête perd son utilité visuelle si vous le stylisez de sorte qu'il ne ressemble pas à un en-tête.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">La règle de base est la suivante : adaptez les styles et les comportements à votre conception sans rompre les habitudes utilisateur qui permettent une expérience intuitive.</span> <span title="">Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte.</span></span></p> + +<h4 id="Structure_du_contenu_du_texte_standard"><span class="tlid-translation translation"><span title="">Structure du contenu du texte "standard"</span></span></h4> + +<p><span class="tlid-translation translation"><span title="">Titres, paragraphes, listes</span></span> — <span class="tlid-translation translation"><span title="">le contenu de texte de base de votre page :</span></span></p> + +<pre class="brush: html"><h1><span class="tlid-translation translation"><span title="">En-têtes</span></span></h1> + +<p><span class="tlid-translation translation"><span title="">paragraphes</span></span></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> +</ul></pre> + +<p><span class="tlid-translation translation"><span title="">Quelques styles CSS typiques pourraient ressembler à ceci :</span></span></p> + +<pre class="brush: css">h1 { + font-size: 5rem; +} + +p, li { + line-height: 1.5; + font-size: 1.6rem; +}</pre> + +<p><span class="tlid-translation translation"><span title="">Vous devriez </span></span>:</p> + +<ul> + <li><span class="tlid-translation translation"><span title="">Sélectionnez une taille de police</span></span>, une hauteur de ligne, un<span class="tlid-translation translation"><span title=""> espacement interlettres, etc. raisonnables pour que votre texte soit logique, lisible et agréable à lire.</span></span></li> + <li><span class="tlid-translation translation"><span title="">Le style par défaut pour les titres, dans une taille plus grande et en gras les distingue du texte</span></span> principal<span class="tlid-translation translation"><span title="">.</span></span></li> + <li><span class="tlid-translation translation"><span title="">Vos listes devraient ressembler à des listes</span></span>.</li> + <li>La couleur du texte doit présenter un contraste suffisant avec la couleur de fond.</li> +</ul> + +<p><span class="tlid-translation translation"><span title="">Voir</span></span> <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a> et <a href="/fr/docs/Learn/CSS/Styling_text"> Introduction au style de texte</a> <span class="tlid-translation translation"><span title="">pour plus d'informations.</span></span></p> + +<h4 id="Texte_mis_en_emphase"><span class="tlid-translation translation"><span title="">Texte mis en emphase</span></span></h4> + +<p><span class="tlid-translation translation"><span title="">On met en avant une portion de texte grâce au balises <em>inline</em> <code><em></code> :</span></span></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> + +<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><span class="tlid-translation translation"><span title="">Vous voudrez peut-être ajouter quelques couleurs simples à votre texte mis en importance :</span></span></p> + +<pre class="brush: css">strong, em { + color: #a60000; +}</pre> + +<p><span class="tlid-translation translation"><span title="">Cependant, vous aurez rarement besoin de styliser des éléments d’emphase de manière significative.</span> <span title="">Les conventions standard de texte en gras () et en italique (emphase) sont très reconnaissables, et le changement de style peut être source de confusion.</span> <span title="">Pour mettre des contenus en avant de manière efficace, voir</span></span> <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals#Emphasis_and_importance">Fondamentaux du texte HTML</a>.</p> + +<h4 id="Les_abréviations"><span class="tlid-translation translation"><span title="">Les abréviations</span></span></h4> + +<p><span class="tlid-translation translation"><span title="">Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée :</span></span></p> + +<pre class="brush: html"><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> + +<p><span class="tlid-translation translation"><span title="">Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments</span></span> :</p> + +<pre class="brush: css">abbr { + color: #a60000; +}</pre> + +<p><span class="tlid-translation translation"><span title="">Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue.</span> <span title="">Pour plus d'informations sur les abréviations, voir </span></span><a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte#Abbreviations">Abréviations</a>.</p> + +<div class="text-wrap tlid-copy-target"> +<h4 class="result-shield-container tlid-copy-target" id="Liens"><span class="tlid-translation translation"><span title="">Liens</span></span></h4> +</div> + +<p><span class="tlid-translation translation"><span title="">Hyperliens la façon dont vous accédez à de nouveaux endroits sur le Web :</span></span></p> + +<pre class="brush: html"><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> + +<p><span class="tlid-translation translation"><span title="">Un style de lien très simple est présenté ci-dessous :</span></span></p> + +<pre class="brush: css">a { + color: #ff0000; +} + +a:hover, a:visited, a:focus { + color: #a60000; + text-decoration: none; +} + +a:active { + color: #000000; + background-color: #a60000; +}</pre> + +<p><span class="tlid-translation translation"><span title="">Les conventions de style sur les liens sont le soulignement et une couleur différente (par défaut : bleu) dans leur état normal (non visité) de celle utilisée lorsque le lien a déjà été visité (par défaut : violet) et de celle utilisée lorsque le lien est activé (par défaut : rouge)</span><span title="">.</span> <span title="">De plus, le pointeur de la souris se change en icône de pointeur lorsque les liens sont déplacés, et le lien reçoit une surbrillance lorsqu'il est ciblé (par exemple, via une tabulation) ou activé.</span> <span title="">L'image suivante montre la surbrillance dans Firefox (contour en pointillé) et Chrome (contour bleu) :</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14371/focus-highlight-firefox.png" style="display: block; height: 173px; margin: 0px auto; width: 319px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14369/focus-highlight-chrome.png" style="display: block; height: 169px; margin: 0px auto; width: 309px;"></p> + +<p><span class="tlid-translation translation"><span title="">Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous continuez à donner aux utilisateurs des informations visuelles en retour lorsqu'ils interagissent avec les liens.</span> <span title="">Quelque chose doit effectivement se produire pour signaler les changements d'états d'un lien, et vous ne devriez pas vous débarrasser du curseur de pointeur ou du contour</span></span> — <span class="tlid-translation translation"><span title="">ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier</span></span>.</p> + +<h4 id="Éléments_form"><span class="tlid-translation translation"><span title="">Éléments form</span></span></h4> + +<p><span class="tlid-translation translation"><span title="">Éléments permettant aux utilisateurs de saisir des données sur des sites web :</span></span></p> + +<pre class="brush: html"><div> + <label for="name"><span class="tlid-translation translation"><span title="">Entrez votre nom</span></span></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><span class="tlid-translation translation"><span title="">La plupart du CSS que vous rédigerez pour les formulaires servira à dimensionner les éléments, à aligner les étiquettes et les entrées, et à leur donner une apparence nette et ordonnée.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Toutefois, vous ne devriez pas trop vous écarter des indications visuelles classiques qui signalent qu'un élément du formulaire est ciblé, c'est fondamentalement la même chose que pour les liens (voir ci-dessus).</span> <span title="">Vous pouvez mettre en forme les états ciblé / survolé du formulaire pour rendre ce comportement plus cohérent sur les navigateurs ou pour obtenir une meilleure intégration au design de votre page, mais ne vous en débarrassez pas complètement. Là encore, les utilisateurs s’appuient sur ces indices pour comprendre ce qui se passe.</span></span></p> + +<h4 id="Tableaux"><span class="tlid-translation translation"><span title="">Tableaux</span></span></h4> + +<p><span class="tlid-translation translation"><span title="">Tableaux pour la présentation des données tabulées</span></span>.</p> + +<p><span class="tlid-translation translation"><span title="">Vous pouvez voir un bon exemple simple de </span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> et (<a href="https://mdn.github.io/learning-area/accessibility/css/table-css.html">en direct</a>).</p> + +<p><span class="tlid-translation translation"><span title="">En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse.</span> <span title="">Il est judicieux de vous assurer que les en-têtes de table se démarquent </span></span> (<span class="tlid-translation translation"><span title="">normalement en gras</span></span>), <span class="tlid-translation translation"><span title="">et de zébrer les lignes via le pseudo-sélecteur <code>:nth-child(n) </code>pour faciliter la lecture.</span></span></p> + +<h3 id="Couleur_et_contraste_de_couleur"><span class="tlid-translation translation"><span title="">Couleur et contraste de couleur</span></span></h3> + +<p><span class="tlid-translation translation"><span title="">Lorsque vous choisissez un jeu de couleurs pour votre site web, assurez-vous que la couleur du texte </span></span><span class="tlid-translation translation"><span title="">contraste bien avec la couleur de fond</span></span>. <span class="tlid-translation translation"><span title="">Votre design peut sembler agréable, mais cela n’est pas bon si les personnes malvoyantes, par exemple atteintes de daltonisme, ne peuvent pas lire votre contenu.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes.</span> <span title="">Il existe un certain nombre d’outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d’arrière-plan afin de les vérifier.</span> <span title="">Par exemple, le</span></span><span class="tlid-translation translation"><span title=""> </span></span><a href="https://webaim.org/resources/contrastchecker/">vérificateur de contraste de couleur</a> du WebAIM est <span class="tlid-translation translation"><span title="">simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs.</span></span></p> + +<div class="note"> +<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">Un taux de contraste élevé permettra également à toute personne utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, tel qu'exposé à la lumière du soleil</span></span>.</p> +</div> + +<p><span class="tlid-translation translation"><span title="">Un autre conseil est de ne pas compter uniquement sur la couleur pour les panneaux / informations, car cela ne sera pas bon pour ceux qui ne peuvent pas voir la couleur.</span> <span title="">Au lieu de marquer les champs de formulaire obligatoires en rouge, par exemple, marquez-les d'un astérisque et en rouge.</span></span></p> + +<h3 id="Cacher_des_choses"><span class="tlid-translation translation"><span title="">Cacher des choses</span></span></h3> + +<p><span class="tlid-translation translation"><span title="">Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps.</span> <span title="">Par exemple, dans notre </span></span><a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Exemple de boîte d'information à onglets</a> (voir notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">code source</a>), <span class="tlid-translation translation"><span title="">nous avons trois panneaux d’informations, mais nous les</span></span> <a href="/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement">positionnons</a> <span class="tlid-translation translation"><span title="">les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi</span> <span title="">accessible au clavier – vous pouvez également utiliser <kbd>Tab</kbd> et <kbd>Entrée</kbd> pour les sélectionner)</span></span>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> + +<p><span class="tlid-translation translation"><span title="">Les utilisateurs de lecteur d’écran ne s’inquiètent de rien. Ils sont satisfaits du contenu tant que l’ordre des sources est logique et ils peuvent tout comprendre.</span> <span title="">Le positionnement absolu (tel qu'utilisé dans cet exemple) est généralement considéré comme l'un des meilleurs mécanismes permettant de masquer un contenu pour obtenir un effet visuel, car il n'empêche pas les lecteurs d'écran d'y accéder.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Par contre, vous ne devriez pas utiliser</span></span> {{cssxref("visibility")}}<code>:hidden</code> ou {{cssxref("display")}}<code>:none</code>, <span class="tlid-translation translation"><span title="">car ils masquent le contenu des lecteurs d'écran s</span><span title="">auf si vous souhaitez que ce contenu leur soit masqué.</span></span></p> + +<div class="note"> +<p><strong>Note </strong>: <span class="subtitle"><a href="https://webaim.org/techniques/css/invisiblecontent/">Contenu invisible juste pour les utilisateurs de lecteur d'écran</a> </span> <span class="tlid-translation translation"><span title="">contient beaucoup plus de détails utiles concernant ce sujet.</span></span></p> +</div> + +<h3 id="Accepter_que_les_utilisateurs_puissent_remplacer_les_styles"><span class="tlid-translation translation"><span title="">Accepter que les utilisateurs puissent remplacer les styles</span></span></h3> + +<h4 id="Acceptez_que_les_utilisateurs_puissent_remplacer_vos_styles"><span class="tlid-translation translation"><span title="">Acceptez que les utilisateurs puissent remplacer vos style</span></span>s</h4> + +<p><span class="tlid-translation translation"><span title="">Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple :</span></span></p> + +<ul> + <li><span class="tlid-translation translation"><span title="">Voir </span></span><a href="/fr/docs/Outils/Éditeur_de_style">Éditeur de Style</a> <span class="tlid-translation translation"><span title="">pour un guide utile expliquant comment le faire manuellement dans Firefox, et </span></span><a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/">Comment utiliser une feuille de style (css) personnalisée avec Internet Explorer</a> <span class="tlid-translation translation"><span title="">par Adrian Gordon pour</span> <span title="">les instructions IE équivalentes (EN).</span></span></li> + <li><span class="tlid-translation translation"><span title="">Il est probablement plus facile de le faire en utilisant une extension, par exemple l’extension Stylus est disponible pour</span></span> <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>, <a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>, <a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a>, et <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>.</li> +</ul> + +<p><span class="tlid-translation translation"><span title="">Les utilisateurs peuvent le faire pour diverses raisons.</span> <span title="">Un utilisateur malvoyant peut vouloir agrandir le texte de tous les sites Web qu’il visite, ou un utilisateur présentant un déficit de couleur grave peut vouloir afficher tous les sites Web dans des couleurs très contrastées, faciles à lire.</span> <span title="">Quel que soit le besoin, vous devriez être à l'aise avec cela et rendre vos conceptions suffisamment flexibles pour que de tels changements fonctionnent dans votre conception.</span> <span title="">Par exemple, vous voudrez peut-être vous assurer que votre zone de contenu principale peut gérer un texte plus volumineux (le défilement commencera peut-être pour permettre à tout le monde de le voir), et ne le cachera pas ou ne sera pas complètement interrompu.</span></span></p> + +<h2 id="JavaScript">JavaScript</h2> + +<p><span class="tlid-translation translation"><span title="">JavaScript peut également compromettre l’accessibilité, selon son utilisation.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Le JavaScript moderne est un langage puissant, et nous pouvons faire beaucoup de choses avec cela de nos jours, du contenu simple et des mises à jour d'interface utilisateur aux jeux 2D et 3D à part entière.</span> <span title="">Aucune règle ne stipule que tout le contenu doit être accessible à 100% à toutes les personnes. Vous devez simplement faire ce que vous pouvez et rendre vos applications aussi accessibles que possible.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Le contenu et les fonctionnalités simples sont facilement accessibles – texte, images, tableaux, formulaires et bouton-poussoir activant des fonctions.</span> <span title="">Comme nous l'avons vu dans notre article</span></span> <a href="/fr/docs/Apprendre/a11y/HTML">HTML : une bonne base pour l'accessibilité</a>, <span class="tlid-translation translation"><span title=""> les principales considérations sont les suivantes :</span></span></p> + +<ul> + <li><span class="tlid-translation translation"><span title="">Bonne sémantique : Utiliser le bon élément pour le bon travail.</span> <span title="">Par exemple, assurez-vous que vous utilisez les en-têtes et les paragraphes, et les éléments</span></span> {{htmlelement("button")}} et {{htmlelement("a")}}.</li> + <li><span class="tlid-translation translation"><span title="">S'assurer que le contenu est disponible sous forme de texte, soit directement sous forme de contenu textuel, soit par un libellé</span></span> <span class="tlid-translation translation"><span title="">pour des éléments</span></span> <code><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> +</ul> + +<p><span class="tlid-translation translation"><span title="">Nous avons également examiné un exemple d'utilisation de JavaScript pour intégrer des fonctionnalités là où il manque – voir </span></span><a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">Remettre l'accessibilité au clavier</a>. <span class="tlid-translation translation"><span title="">Ce n'est pas l'idéal – vous devez utiliser le bon élément pour le bon travail – mais cela montre que c'est possible dans des situations où, pour une raison quelconque, vous ne pouvez pas contrôler le balisage utilisé.</span> <span title="">Un autre moyen d'améliorer l'accessibilité pour les widgets non sémantiques reposant sur JavaScript consiste à utiliser WAI-ARIA pour fournir une sémantique supplémentaire aux utilisateurs de lecteurs d'écran.</span> <span title="">Le prochain article couvrira également cela en détail.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Les fonctionnalités complexes telles que les jeux 3D ne sont pas si faciles à rendre accessibles – un jeu 3D complexe créé à l'aide de </span></span><a href="/fr/docs/Web/API/WebGL_API">L'API WebGL : graphismes 2D et 3D pour le web</a> <span class="tlid-translation translation"><span title="">sera rendu sur un élément</span></span> {{htmlelement("canvas")}}, <span class="tlid-translation translation"><span title="">qui n'a pour l'instant aucune possibilité de fournir</span> <span title="">textes alternatifs ou autres informations à utiliser par les utilisateurs malvoyants.</span> <span title="">On peut soutenir qu’un tel jeu ne compte pas vraiment ce groupe de personnes dans son public cible principal, et il serait déraisonnable de s’attendre à ce que vous le rendiez accessible à 100% aux aveugles, quelle que soit l’implantation des</span></span> <a href="/en-US/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">contrôles clavier</a> faite <span class="tlid-translation translation"><span title="">pour qu'il soit utilisable par les utilisateurs sans souris. De plus, rendez le jeu de couleurs suffisamment contrasté pour pouvoir rendre le jeu vidéo utilisable par ceux qui ont des déficiences de la perception des couleurs.</span></span></p> + +<h3 id="Le_problème_avec_trop_de_JavaScript"><span class="tlid-translation translation"><span title="">Le problème avec trop de JavaScript</span></span></h3> + +<p><span class="tlid-translation translation"><span title="">Le problème survient souvent lorsque les utilisateurs se fient trop à JavaScript.</span> <span title="">Parfois, vous voyez un site Web où tout a été fait avec JavaScript – le code HTML a été généré par JavaScript, le CSS a été généré par JavaScript, etc. Ceci présente toutes sortes de problèmes d'accessibilité et d'autres choses qui y sont associées, donc ce n'est pas conseillé</span><span title="">.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">En plus d'utiliser le bon élément pour le bon travail, vous devez également vous assurer que vous utilisez la bonne technologie pour le bon travail !</span> <span title="">Réfléchissez bien pour savoir si vous avez besoin de cette boîte d’informations 3D brillante reposant sur JavaScript, ou si un texte ordinaire avec du CSS conviendrait.</span> <span title="">Réfléchissez bien pour savoir si vous avez besoin d'un widget de formulaire non standard complexe ou d'une saisie de texte.</span> <span title="">Et ne générez pas tout votre contenu HTML en utilisant JavaScript si possible.</span></span></p> + +<h3 id="Le_garder_discret"><span class="tlid-translation translation"><span title="">Le garder discret</span></span></h3> + +<p><span class="tlid-translation translation"><span title="">Lors de la création de votre contenu, gardez à l'esprit </span></span> <span class="tlid-translation translation"><span title="">l'idée d'un</span></span> <strong><span class="tlid-translation translation"><span title="">JavaScript</span></span> discret, en retrait</strong><span class="tlid-translation translation"><span title="">.</span> <span title="">JavaScript est discret quand il est utilisé pour améliorer des fonctionnalités, il devient gênant quand ces mêmes fonctionnalités sont développées entièrement en JavaScript. Les fonctions de base de votre page devraient idéalement tourner sans JavaScript, même s’il est évident que ce n’est pas toujours possible.</span> La règle est d'utiliser <span title="">lorsque cela est possible les fonctionnalités intégrées au navigateur.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">De bons exemples d'utilisation de JavaScript discret incluent :</span></span></p> + +<ul> + <li><span class="tlid-translation translation"><span title="">Fournir une validation de formulaire côté client, qui alerte les utilisateurs en cas de problèmes liés aux entrées de formulaire, sans avoir à attendre que le serveur vérifie les données.</span> <span title="">S'il n'est pas disponible, le formulaire fonctionnera toujours, mais la validation risque d'être plus lente.</span></span></li> + <li><span class="tlid-translation translation"><span title="">Fournir des commandes personnalisées pour les </span></span> <code><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> +</ul> + +<p id="Client-side_form_validation"><span class="tlid-translation translation"><span title="">Par exemple, nous avons écrit un exemple de validation de formulaire côté client rapide</span></span> — voir <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (<span class="tlid-translation translation"><span title="">voir aussi la </span></span><a href="https://mdn.github.io/learning-area/accessibility/css/form-validation.html">démonstration en direct</a>). <span class="tlid-translation translation"><span title="">Ici, vous verrez un formulaire simple.</span> <span title="">Lorsque vous essayez de soumettre le formulaire avec un ou les deux champs vides, l'envoi échoue et un message d'erreur s'affiche pour vous indiquer ce qui ne va pas.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Ce type de validation de formulaire est discret </span></span>— <span class="tlid-translation translation"><span title="">vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client</span><span title=""> (en désactivant JavaScript dans le navigateur, par exemple).</span> <span title="">La validation côté client est toujours très utile pour signaler les erreurs </span></span>—<span class="tlid-translation translation"><span title=""> les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page.</span> <span title="">C'est un avantage certain en termes de convivialité.</span></span></p> + +<div class="note"> +<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">La validation côté serveur n'a pas été implémentée dans cette simple démonstration</span></span>.</p> +</div> + +<p><span class="tlid-translation translation"><span title="">Nous avons également rendu cette validation de formulaire assez accessible.</span> <span title="">Nous avons utilisé des éléments</span></span> {{htmlelement("label")}} <span class="tlid-translation translation"><span title="">pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure :</span></span></p> + +<pre class="brush: html"><label for="name"> <span class="tlid-translation translation"><span title="">Entrez votre nom</span></span> :</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> + +<pre class="brush: js">form.onsubmit = validate; + +function validate(e) { + errorList.innerHTML = ''; + for(var i = 0; i < formItems.length; i++) { + var testItem = formItems[i]; + if(testItem.input.value === '') { + errorField.style.left = '360px'; + createLink(testItem); + } + } + + if(errorList.innerHTML !== '') { + e.preventDefault(); + } +}</pre> + +<div class="note"> +<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">Dans cet exemple, nous masquons et montrons la boîte de message d'erreur en utilisant le positionnement absolu plutôt qu'une autre méthode telle que la visibilité ou l'affichage, car cela n'empêche pas le lecteur d'écran de pouvoir lire le contenu de celui-ci</span></span>.</p> +</div> + +<p><span class="tlid-translation translation"><span title="">La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres).</span> <span title="">Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie</span></span> (<code>if(testItem.input.value === '')</code>).</p> + +<p><span class="tlid-translation translation"><span title="">Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis.</span> <span title="">S'il y a des erreurs </span></span> (<code>if(errorList.innerHTML !== '')</code>) <span class="tlid-translation translation"><span title="">nous arrêtons la soumission du formulaire</span></span> ( <span class="tlid-translation translation"><span title="">à l'aide de</span></span><a href="/fr/docs/Web/API/Event/preventDefault"> event.preventDefault()</a>), <span class="tlid-translation translation"><span title="">et affichons tous les messages d'erreur créés (voir ci-dessous).</span> <span title="">Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Pour chaque entrée pour laquelle aucune valeur n'a été renseignée lors de la soumission du formulaire, nous créons un élément de liste avec un lien et l'insérons dans la liste</span></span> <code>errorList</code>.</p> + +<pre class="brush: js">function createLink(testItem) { + var listItem = document.createElement('li'); + var anchor = document.createElement('a'); + anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.'; + anchor.href = '#' + testItem.input.name; + anchor.onclick = function() { + testItem.input.focus(); + }; + listItem.appendChild(anchor); + errorList.appendChild(listItem); +}</pre> + +<p><span class="tlid-translation translation"><span title="">Chaque lien a un double objectif </span></span>—<span class="tlid-translation translation"><span title=""> il vous dit quelle est l’erreur, vous pouvez aussi cliquer dessus / l’activer pour passer directement à l’élément d’entrée en question et corriger votre saisie.</span></span></p> + +<div class="note"> +<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">La partie </span></span> <code>focus()</code> <span class="tlid-translation translation"><span title="">de cet exemple est un peu délicate.</span> <span title="">Chrome et Edge (et les versions plus récentes d'IE) focalisent l'élément lorsque l'utilisateur clique sur le lien, sans avoir besoin du bloc </span></span> <code>onclick</code>/<code>focus()</code>. <span class="tlid-translation translation"><span title="">Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc</span></span> <code>onclick</code>/<code>focus()</code> <span class="tlid-translation translation"><span title="">pour le focaliser.</span> <span title="">Firefox ne focalise pas les entrées correctement dans ce contexte, les utilisateurs de Firefox ne peuvent donc pas en profiter pour le moment (bien que tout le reste fonctionne bien).</span> <span title="">Le problème de Firefox devrait bientôt être résolu - des efforts sont en cours pour donner la parité des comportements de Firefox aux autres navigateurs (voir</span></span> {{bug(277178)}}).</p> +</div> + +<p><span class="tlid-translation translation"><span title="">De plus, le champ</span></span> <code>errorField</code> <span class="tlid-translation translation"><span title="">est placé en haut de l'ordre source (bien qu'il soit positionné différemment dans UI à l'aide de CSS), ce qui signifie que les utilisateurs peuvent savoir exactement ce qui ne va pas avec les soumissions de formulaire et accéder aux éléments d'entrée en question</span> <span title="">en remontant au début de la page</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Pour terminer, nous avons utilisé certains attributs de WAI-ARIA dans notre démonstration pour résoudre les problèmes d’accessibilité causés par des zones de contenu constamment mises à jour sans rechargement de page (les lecteurs d’écran ne le détectent pas et n'en avertissent pas les utilisateurs par défaut) :</span></span></p> + +<pre><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> + +<div class="note"> +<p><strong>Note </strong>: <span class="tlid-translation translation"><span title="">Certains d'entre vous penseront probablement au fait que les formulaires HTML5 ont des mécanismes de validation intégrés tels que les attributs</span></span> <code>required</code>, <code>min</code>/<code>minlength</code>, et <code>max</code>/<code>maxlength</code> (voir {{htmlelement("input")}} <span class="tlid-translation translation"><span title="">référence d'élément pour plus d'informations).</span> <span title="">Nous avons fini par ne pas les utiliser dans la démo, car la prise en charge multi-navigateurs est inégale (par exemple, IE10 et versions ultérieures, pas de prise en charge de Safari).</span></span></p> +</div> + +<div class="note"> +<p><strong>Note </strong>: WebAIM's <a href="https://webaim.org/techniques/formvalidation/">Validation de formulaire et récupération d'erreur utilisables et accessibles (EN)</a> <span class="tlid-translation translation"><span title="">fournit des informations supplémentaires utiles sur la validation de formulaire accessible.</span></span></p> +</div> + +<h3 id="Autres_problèmes_daccessibilité_JavaScript"><span class="tlid-translation translation"><span title="">Autres problèmes d'accessibilité JavaScript</span></span></h3> + +<p><span class="tlid-translation translation"><span title="">Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité.</span> Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente<span title="">.</span></span></p> + +<h4 id="Événements_spécifiques_à_la_souris"><span class="tlid-translation translation"><span title="">Événements spécifiques à la souris</span></span></h4> + +<p><span class="tlid-translation translation"><span title="">Comme vous le savez peut-être, la plupart des interactions utilisateur sont implémentées dans JavaScript côté client à l'aide de gestionnaires d'événements, ce qui nous permet d'exécuter des fonctions en réponse à certains événements.</span> <span title="">Certains événements peuvent avoir des problèmes d'accessibilité.</span> <span title="">L'exemple principal que vous rencontrerez concerne des événements spécifiques à la souris tels que </span></span> <a href="/fr/docs/Web/Events/mouseover"> mouseover</a>, <a href="/fr/docs/Web/Events/mouseout"> mouseout</a>, <a href="/fr/docs/Web/Events/dblclick"> dblclick</a>, <span class="tlid-translation translation"><span title="">etc. Les fonctionnalités qui s'exécutent en réponse à ces événements ne seront pas accessibles à l'aide d'autres mécanismes, tels que les contrôles du clavier.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Pour résoudre de tels problèmes, vous devez doubler ces événements avec des événements similaires pouvant être activés par d'autres moyens (appelés gestionnaires d'événements indépendants du périphérique)</span></span> —<a href="/fr/docs/Web/Events/focus">focus</a> et <a href="/fr/docs/Web/Events/blur">blur (event)</a> <span class="tlid-translation translation"><span title="">fourniraient une accessibilité aux utilisateurs de clavier.</span></span> </p> + +<p><span class="tlid-translation translation"><span title="">Regardons un exemple qui illustre cela.</span> <span title="">Considérons une image miniature ; quand elle est survolée ou ciblée (comme sur un catalogue de produits de commerce électronique) une version plus grande de l’image s'affiche.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Nous avons créé un exemple très simple, que vous pouvez trouver sur </span></span><a href="https://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">Exemple d'événements de souris et de clavier</a> (<span class="tlid-translation translation"><span title="">voir aussi le</span></span> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">code source</a>). <span class="tlid-translation translation"><span title="">Le code comporte deux fonctions qui affichent et cachent l'image agrandie ;</span> <span title="">ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements :</span></span></p> + +<pre class="brush: js">imgThumb.onmouseover = showImg; +imgThumb.onmouseout = hideImg; + +imgThumb.onfocus = showImg; +imgThumb.onblur = hideImg;</pre> + +<p><span class="tlid-translation translation"><span title="">Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement.</span> <span title="">Cela ne nous permettra toutefois pas d'accéder à la vue agrandie à l'aide du clavier ; pour cela, nous avons inclus les deux dernières lignes, qui exécutent les fonctions lorsque l'image est nette et floue (lorsque la mise au point s'arrête).</span> <span title="">Cela peut être fait en tapant sur l'image, car nous avons inclus</span></span> <code>tabindex="0"</code> <span class="tlid-translation translation"><span title="">dessus.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">L'événement </span></span><a href="/fr/docs/Web/API/Element/click_event">click</a><span class="tlid-translation translation"><span title=""> est intéressant </span></span>—<span class="tlid-translation translation"><span title=""> cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement </span></span><a href="/fr/docs/Web/API/GlobalEventHandlers/onclick">element.onclick</a> <span class="tlid-translation translation"><span title="">après avoir pressé <kbd>Entrée</kbd> sur un lien ou un élément de formulaire ciblé, ou lorsqu'un tel élément est touché sur un écran tactile</span><span title="">.</span> <span title="">Cependant, cela ne fonctionne pas par défaut lorsque vous autorisez un événement à ne pas être mis au point par défaut à l'aide de tabindex. Dans ce cas, vous devez détecter précisément le moment exact où cette touche est enfoncée (voir</span></span> <a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">Remettre l'accessibilité au clavier</a>).</p> + +<h2 id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></h2> + +<p><span class="tlid-translation translation"><span title="">Nous espérons que cet article vous a fourni beaucoup de détails et de compréhension sur les problèmes d'accessibilité liés à l'utilisation de CSS et de JavaScript sur les pages Web.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Ensuite, WAI-ARIA !</span></span></p> + +<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div> + +<div> +<h2 id="Dans_ce_module"><span class="tlid-translation translation"><span title="">Dans ce module</span></span></h2> + +<ul> + <li><a href="/fr/docs/Apprendre/a11y/What_is_accessibility">Qu'est ce que l'accessibilité?</a></li> + <li><a href="/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in">HTML : une bonne base pour l'accessibilité</a></li> + <li><a href="/fr/docs/Apprendre/a11y/CSS_and_JavaScript">Meilleures pratiques d'accessibilité CSS et JavaScript</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/fr/docs/Apprendre/a11y/Multimedia">Accessible multimedia</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/fr/docs/Apprendre/a11y/Accessibility_troubleshooting">Évaluation: dépannage d'accessibilité</a></li> +</ul> +</div> diff --git a/files/fr/learn/accessibility/html/index.html b/files/fr/learn/accessibility/html/index.html new file mode 100644 index 0000000000..03b80cbb80 --- /dev/null +++ b/files/fr/learn/accessibility/html/index.html @@ -0,0 +1,530 @@ +--- +title: 'HTML : une bonne base pour l''accessibilité' +slug: Apprendre/a11y/HTML +tags: + - Accessibilité + - Article + - Clavier + - Débutant + - Forms + - HTML + - Liens + - a11y + - boutons + - sémantique +translation_of: Learn/Accessibility/HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</div> + +<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"> + <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> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Se familiariser avec les fonctionnalités de HTML qui bénéficient à l'accessibilité, et comment les utiliser de manière appropriée dans vos documents web.</td> + </tr> + </tbody> +</table> + +<h2 id="HTML_et_accessibilité">HTML et accessibilité</h2> + +<p>Plus vous apprenez le HTML — plus vous lisez de ressources, regardez d'exemples — plus vous recontrerez un thème récurrent : l'importance d'utiliser du HTML sémantique, parfois appelé POSH (Plain Old Semantic HTML). C'est l'usage des éléments HTML appropriés autant que possible.</p> + +<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> + +<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> + +<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> + +<p>Le HTML sémantique ne demande pas plus de temps à écrire que du (mauvais) balisage non-sémantique si vous le faites de manière constante dès le début de votre projet, et il a également des bénéfices au delà de l'accessibilité :</p> + +<ol> + <li><strong>Facilite les développements</strong> — comme mentionné ci-dessus, certaines fonctionnalités sont gratuites, et c'est indiscutablement plus compréhensible.</li> + <li><strong>Meilleur pour le mobile</strong> — le HTML sémantique est indiscutablement plus léger en la taille du fichier que le code spaghetti non sémantique, et plus aisé à rendre responsive. </li> + <li><strong>Bon pour le SEO</strong> — les moteurs de recherche donnent plus d'importance aux mots clés contenus dans les titres, liens, etc. que des mots-clés contenus dans des <code><div></code> non sémantiques, et donc vos documents seront plus facilement trouvés par vos clients.</li> +</ol> + +<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> +</div> + +<h2 id="Une_bonne_sémantique">Une bonne sémantique</h2> + +<p>Nous avons déjà parlé de l'importance d'une bonne sémantique, et pourquoi nous devons utiliser le bon élément HTML pour le bon usage. Il ne faut pas l'ignorer car c'est une des principales causes d'importants problèmes d'accessibilité si ce n'est pas fait correctement.</p> + +<p>En vérité sur le Web, les développeurs font d'étranges choses avec HTML. Certains abus en HTML sont hérités de vieilles pratiques obsolètes pas complètement oubliées, d'autre sont juste de l'ignorance. Dans tous les cas, vous devez remplacer ce mauvais code partout où vous le verrez, dès que vous le pourrez.</p> + +<p>Parfois vous ne pourrez pas vous débarrasser du mauvais balisage — vos pages seront générées par quelque framework côté serveur dont vous n'aurez pas le contrôle total, ou vous aurez des contenus tiers (comme des bannières publicitaires) que nous ne contrôlerez pas.</p> + +<p>L'objectif cependant n'est pas « tout ou rien » — toute amélioration que vous pouvez faire aidera la cause de l'accessibilité.</p> + +<h3 id="Contenus_textuels">Contenus textuels</h3> + +<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> + +<p>Ceci est la premère section de mon document.</p> + +<p>Je vais ajouter ici un autre paragraphe.</p> + +<ol> + <li>Voici</li> + <li>une liste pour</li> + <li>toi à lire.</li> +</ol> + +<h2>Mon sous-titre</h2> + +<p>Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu!</p> + +<h2>Mon second sous-titre</h2> + +<p>Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.</p></pre> + +<p>Nous avons préparé pour vous une version avec un texte plus long afin de l'essayer avec lecteur d'écran (voir <a href="https://mdn.github.io/learning-area/accessibility/html/good-semantics.html">la bonne sémantique</a>). Si vous essayez de naviguer dans ce document, vous verrez qu'il est assez simple de s'y retrouver :</p> + +<ol> + <li>Le lecteur d'écran lit à voix haute chaque élément au fur et à mesure que vous progressez dans le contenu, vous notifiant ce qui est un paragraphe, ce qui est un titre, etc.</li> + <li>Il s'arrête après chaque élément, vous laissant aller à n'importe quel endroit vous convenant.</li> + <li>Vous pouvez sauter au précédent ou au prochain titre avec de nombreux lecteurs d'écran.</li> + <li>Vous pouvez aussi dresser une liste de tous les titres avec de nombreux lecteurs d'écrans, vous permettant de les utiliser comme une table des matières pratique pour trouver un contenu spécifique.</li> +</ol> + +<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> +<br><br> +Ceci est la première section de mon document. +<br><br> +Je vais ajouter ici un autre paragraphe. +<br><br> +1. Voici +<br><br> +2. une liste pour +<br><br> +3. toi à lire. +<br><br> +<font size="5">Mon sous-titre</font> +<br><br> +<p>Ceci est la première sous-section de mon document. J'aurais aimé que les gens puissent trouver ce contenu! +<br><br> +<font size="5">My 2nd subheading</font> +<br><br> +Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière.</pre> + +<p>Si vous essayez notre version plus longue avec un lecteur d'écran (voir <a href="https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">la mauvaise sémantique</a>), vous n'aurez pas une très bonne expérience – le lecteur d'écran n'a plus rien à utiliser comme indicateur, il ne peut pas récupérer une table des matières utilisable, et la page entière est vue comme un bloc unique, lu tout d'une traite.</p> + +<p>Il y a aussi d'autres problèmes au-delà de l'accessibilité – le contenu est plus dur à mettre en forme avec le CSS, ou à manipuler avec JavaScript par exemple, car il n'y a pas d'élément à utiliser comme sélecteurs.</p> + +<h4 id="Utiliser_un_langage_clair">Utiliser un langage clair</h4> + +<p>Le langage que vous employez peut aussi affecter l'accessiblité. En général vous ne devriez pas utiliser un langage trop complexe, ni utiliser un jargon ou de l'argot inutiles. Cela ne profite pas qu'aux gens avec des handicaps congnitifs ou autres ; cela profite au lecteur pour qui le texte n'est pas écrit dans sa langue maternelle, pour des gens plus jeunes… à tout un chacun en fait ! Mis à part cela, vous devriez essayer d'éviter d'utiliser un langage et des caractères qui ne sont pas lus clairement à voix haute par le lecteur d'écran. Par exemple :</p> + +<ul> + <li>N'utilisez pas des tirets si vous le pouvez. Au lieu d'écrire 5–7, écrivez 5 à 7.</li> + <li>Explicitez les abréviations — au lieu d'écrire Jan, écrivez Janvier.</li> + <li>Explicitez les acronymes, au moins une ou deux fois. Au lieu d'écrire "HTML" en premier lieu, écrivez Hypertext Markup Language.</li> +</ul> + +<h3 id="Disposition_des_pages">Disposition des pages</h3> + +<p>Dans les âges sombres, les gens avaient pour habitude de créer les dispositions de leurs pages avec des tableaux HTML — en utilisant différentes cellules de ces tableaux pour contenir l'en-tête, le pied de page, une barre latérale, la colonne du contenu principal, etc. Ce n'est pas une bonne idée car un lecteur d'écran va donner des lectures déroutantes, surtout si la disposition est complexe et a de nombreux tableaux imbriqués.</p> + +<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"> + <!-- main heading row --> + <tr id="heading"> + <td colspan="6"> + + <h1 align="center">Header</h1> + + </td> + </tr> + <!-- nav menu row --> + <tr id="nav" bgcolor="#ffffff"> + <td width="200"> + <a href="#" align="center">Home</a> + </td> + <td width="200"> + <a href="#" align="center">Our team</a> + </td> + <td width="200"> + <a href="#" align="center">Projects</a> + </td> + <td width="200"> + <a href="#" align="center">Contact</a> + </td> + <td width="300"> + <form width="300"> + <input type="search" name="q" placeholder="Search query" width="300"> + </form> + </td> + <td width="100"> + <button width="100">Go!</button> + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- main content and aside row --> + <tr id="main"> + <td id="content" colspan="4" bgcolor="#ffffff"> + + <!-- main content goes here --> + </td> + <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> + <h2>Related</h2> + + <!-- aside content goes here --> + + </td> + </tr> + <!-- spacer row --> + <tr id="spacer" height="10"> + <td> + + </td> + </tr> + <!-- footer row --> + <tr id="footer" bgcolor="#ffffff"> + <td colspan="6"> + <p>©Copyright 2050 by nobody. All rights reversed.</p> + </td> + </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><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><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> + +<pre class="brush: html notranslate"><header> + <h1><span class="tlid-translation translation"><span title="">Entête</span></span></h1> +</header> + +<nav> + <!-- <span class="tlid-translation translation"><span title="">navigation principale ici</span></span> --> +</nav> + +<!-- <span class="tlid-translation translation"><span title="">Voici le contenu principal de notre page</span></span> --> +<main> + + <!-- <span class="tlid-translation translation"><span title="">Il contient un article</span></span> --> + <article> + <h2><span class="tlid-translation translation"><span title="">Intitulé de l'article</span></span></h2> + + <!-- <span class="tlid-translation translation"><span title="">contenu de l'article ici</span></span> --> + </article> + + <aside> + <h2><span class="tlid-translation translation"><span title="">en relation</span></span></h2> + + <!-- <span class="tlid-translation translation"><span title="">à part le contenu ici</span></span> --> + </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> --> + +<footer> + <!-- <span class="tlid-translation translation"><span title="">contenu du pied de page ici</span></span> --> +</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><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> + +<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> +</div> + +<h3 id="Contrôles_de_linterface_utilisateur"><span class="tlid-translation translation"><span title="">Contrôles de l'interface utilisateur</span></span></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><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><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><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> + +<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> +</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> + +<pre class="brush: html example-good notranslate"><h1><span class="tlid-translation translation"><span title="">Liens</span></span></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> <span class="tlid-translation translation"><span title="">Un autre lien, pour</span></span> <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p> + +<h2><span class="tlid-translation translation"><span title="">Boutons</span></span></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> +</p> + +<h2>formulaire</h2> + +<form> + <div> + <label for="name"> <span class="tlid-translation translation"><span title="">Remplis ton nom</span></span> :</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> + <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> + <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> + </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><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> + +<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> + +<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> + +<h4 id="Remettre_laccessibilité_au_clavier"><span class="tlid-translation translation"><span title="">Remettre l'accessibilité au clavier</span></span></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> + +<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> + +<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> + +<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> +</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> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">document.onkeydown = function(e) { + if(e.keyCode === 13) { // The Enter/Return key + document.activeElement.onclick(e); + } +}</code></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> + +<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> +</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> + +<h4 id="Étiquettes_de_texte_significatives"><span class="tlid-translation translation"><span title="">Étiquettes de texte significatives</span></span></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><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><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><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> + +<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> + +<p><span class="tlid-translation translation"><span title="">c'est un mauvais texte du lien :</span></span></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> + +<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> +</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> + +<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> + +<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><span class="tlid-translation translation"><span title="">Ce qui suit est un exemple bien meilleur :</span></span></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> + <input type="text" id="name" name="name"> +</div></code></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><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><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> + +<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> +</div> + +<h2 id="Tableaux_de_données_accessibles"><span class="tlid-translation translation"><span title="">Tableaux de données accessibles</span></span></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> + +<pre class="brush: html notranslate"><code class="language-js"><table> + <tr> + <td>Nom</td> + <td>Age</td> + <td>Sexe</td> + </tr> + <tr> + <td>Gabriel</td> + <td>13</td> + <td>Male</td> + </tr> + <tr> + <td>Elva</td> + <td>8</td> + <td>Femelle</td> + </tr> + <tr> + <td>Freida</td> + <td>5</td> + <td>Femelle</td> + </tr> +</table></code></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><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> + +<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> +</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> +</div> + +<h2 id="Alternatives_textuelles"><span class="tlid-translation translation"><span title="">Alternatives textuelles</span></span></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><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> + +<pre class="notranslate"><code class="language-js"><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">."> + +<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">"> + + +<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><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> + +<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> +</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><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><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> + +<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> +</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><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><span class="tlid-translation translation"><span title="">Jetons un autre coup d'oeil à la quatrième méthode :</span></span></p> + +<pre class="brush: html notranslate"><code class="language-js"><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><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> + +<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> +</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> + +<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> + +<pre class="brush: html notranslate"><code class="language-js"> +<img src="dinosaur.png" longdesc="dino-info.html"></code></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><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> + +<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> + +<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> + +<h3 id="Attributs_alt_vides"><span class="tlid-translation translation"><span title="">Attributs alt vides</span></span></h3> + +<pre class="brush: html notranslate"><code class="language-js"> +<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> + +<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><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> + +<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> +</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> + +<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>{{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 new file mode 100644 index 0000000000..23ff90513d --- /dev/null +++ b/files/fr/learn/accessibility/index.html @@ -0,0 +1,56 @@ +--- +title: Accessibilité +slug: Apprendre/a11y +tags: + - ARIA + - Accessibilité + - Apprendre + - CSS + - Débutant + - HTML + - JavaScript +translation_of: Learn/Accessibility +--- +<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> + +<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> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/fr/docs/Learn/Accessibility/What_is_accessibility">Qu'est-ce que l'accessibilité ?</a></dt> + <dd>Cet article amorce le module avec un bon aperçu de ce qu'est réellement l'accessibilité – cela inclut les groupes de personnes que nous devons considérer et pourquoi, quels outils les différentes personnes utilisent pour interagir avec le Web et comment nous pouvons intégrer l'accessibilité dans le processus de développement web.</dd> + <dt><a href="/fr/docs/Learn/Accessibility/HTML">HTML : une bonne base pour l'accessibilité</a></dt> + <dd>Une grande partie du contenu web peut être rendue accessible simplement lorsqu'on utilise les bons éléments HTML dans les bons cas. Cet article examine en détail comment HTML peut être utilisé pour assurer une accessibilité maximale.</dd> + <dt><a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript">Meilleures pratiques d'accessibilité CSS et JavaScript</a></dt> + <dd>Lorsqu'ils sont utilisés correctement, CSS et JavaScript peuvent permettre des expériences web accessibles… mais ils peuvent considérablement nuire à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines pratiques exemplaires pour CSS et JavaScript qui doivent être prises en compte afin de s'assurer que le contenu, même complexe, soit le plus accessible possible.</dd> + <dt><a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">Principes de base du WAI-ARIA</a></dt> + <dd>À la suite de l'article précédent, il est parfois compliqué de créer des contrôles complexes et accessible pour une interface utilisateur qui contient du HTML non sémantique et du contenu dynamique mis à jour grâce à 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 afin de permettre aux utilisateurs de savoir ce qui se passe. Nous allons montrer ici comment l'utiliser, à un niveau basique, pour améliorer l'accessibilité.</dd> + <dt><a href="/fr/docs/Learn/Accessibility/Multimedia">Accessibilité pour les contenus multimédias</a></dt> + <dd>Un autre type de contenu susceptible de créer des problèmes d'accessibilité est le multimédia : les contenus vidéo, audio et les image doivent être dotés de textes alternatifs appropriés afin qu'ils puissent être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.</dd> + <dt><a href="/fr/docs/Learn/Accessibility/Mobile">Accessibilité mobile</a></dt> + <dd>On accède désormais au Web depuis son smartphone. Les plateformes iOS et Android possèdent des outils d'accessibilité à part entière. Il est tout aussi important de prendre en compte l'accessibilité de votre contenu web sur ces plateformes. Cet article examine les considérations d'accessibilité spécifiques au mobile.</dd> +</dl> + +<h2 id="Évaluations">Évaluations</h2> + +<dl> + <dt><a href="/fr/docs/Learn/Accessibility/Accessibility_troubleshooting">Diagnostic et amélioration de l'accessibilité</a></dt> + <dd>Dans ce module d'évaluation, nous vous présentons un site simple comportant un certain nombre de problèmes d'accessibilité que vous devez diagnostiquer et corriger.</dd> +</dl> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today (en anglais)</a> — une excellente série de didacticiels vidéo de Marcy Sutton.</li> + <li><a href="https://dequeuniversity.com/resources/">Deque University resources (en anglais)</a> — comprend des exemples de code, des références pour les lecteurs d'écran et d'autres ressources utiles.</li> + <li><a href="https://www.webaim.org/resources/">Ressources relatives à WebAIM (en anglais)</a> — comprend des guides, des listes de vérification, des outils et bien plus encore.</li> +</ul> diff --git a/files/fr/learn/accessibility/mobile/index.html b/files/fr/learn/accessibility/mobile/index.html new file mode 100644 index 0000000000..6fd7b657d1 --- /dev/null +++ b/files/fr/learn/accessibility/mobile/index.html @@ -0,0 +1,311 @@ +--- +title: Accessibilité mobile +slug: Apprendre/a11y/Mobile +tags: + - Accessibilité + - Article + - Débutant + - Mobile + - responsive + - toucher +translation_of: Learn/Accessibility/Mobile +--- +<div> +<div>{{LearnSidebar}}</div> + +<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> + +<table class="learn-box 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> + </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> + </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> + +<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><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><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><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> + +<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> +</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> + +<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><span class="tlid-translation translation"><span title="">Regardons les deux principaux: TalkBack sur Android et VoiceOver sur iOS.</span></span></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><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><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><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> + +<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> +</ol> + +<p><span class="tlid-translation translation"><span title="">Si vous souhaitez désactiver TalkBack:</span></span></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> +</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><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> + +<h4 id="Déverrouiller_le_téléphone"><span class="tlid-translation translation"><span title="">Déverrouiller le téléphone</span></span></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><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><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> + +<h4 id="Menus_globaux_et_locaux"><span class="tlid-translation translation"><span title="">Menus globaux et locaux</span></span></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> + +<h4 id="Pour_accéder_à_ces_menus"><span class="tlid-translation translation"><span title=""><strong>Pour accéder à ces menus</strong>:</span></span></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> +</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> + +<h4 id="Parcourir_des_pages_Web"><span class="tlid-translation translation"><span title="">Parcourir des pages Web</span></span></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><span class="tlid-translation translation"><span title="">Par exemple, avec TalkBack activé:</span></span></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> + <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> + </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> +</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> + +<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><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><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> + +<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> +</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> + +<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> + +<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> + +<h4 id="Utiliser_le_rotor"><span class="tlid-translation translation"><span title="">Utiliser le rotor</span></span></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> + +<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> + <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> + </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> + +<h4 id="Parcourir_des_pages_Web_2"><span class="tlid-translation translation"><span title="">Parcourir des pages Web</span></span></h4> + +<p><span class="tlid-translation translation"><span title="">Essayons la navigation Web avec VoiceOver:</span></span></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> + <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> + </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> + <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> + </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> +</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> + +<h2 id="Mécanismes_de_contrôle"><span class="tlid-translation translation"><span title="">Mécanismes de contrôle</span></span></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><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><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><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> + +<pre><code>div.onmousedown = function() { + initialBoxX = div.offsetLeft; + initialBoxY = div.offsetTop; + movePanel(); +} + +document.onmouseup = stopMove;</code></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> + +<pre><code>div.ontouchstart = function(e) { + initialBoxX = div.offsetLeft; + initialBoxY = div.offsetTop; + positionHandler(e); + movePanel(); +} + +panel.ontouchend = stopMove;</code></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><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> + +<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><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> + +<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> +</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> + +<h3 id="Considérations_mobiles_spécifiques"><span class="tlid-translation translation"><span title="">Considérations mobiles spécifiques</span></span></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> + +<h4 id="Ne_pas_désactiver_le_zoom"><span class="tlid-translation translation"><span title="">Ne pas désactiver le zoom</span></span></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> + +<pre><code><meta name="viewport" content="user-scalable=no"></code></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> + +<h4 id="Garder_les_menus_accessibles"><span class="tlid-translation translation"><span title="">Garder les menus accessibles</span></span></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><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><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> + +<h2 id="Entrée_utilisateur"><span class="tlid-translation translation"><span title="">Entrée utilisateur</span></span></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><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><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> + +<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> +</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> + +<h2 id="Résumé"><span class="tlid-translation translation"><span title="">Résumé</span></span></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> + +<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> + +<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> +</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> + +<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> +</ul> +</div> +</div> diff --git a/files/fr/learn/accessibility/multimedia/index.html b/files/fr/learn/accessibility/multimedia/index.html new file mode 100644 index 0000000000..e8b03c52b0 --- /dev/null +++ b/files/fr/learn/accessibility/multimedia/index.html @@ -0,0 +1,374 @@ +--- +title: Accessible multimedia +slug: Apprendre/a11y/Multimedia +tags: + - Accessibilité + - Apprendre + - Audio + - Débutant + - HTML + - Images + - JavaScript + - Multimedia + - Video +translation_of: Learn/Accessibility/Multimedia +--- +<div>{{LearnSidebar}}</div> + +<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> + +<table class="learn-box 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> + </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> + </tr> + </tbody> +</table> + +<h2 id="Multimédia_et_accessibilité"><span class="tlid-translation translation"><span title="">Multimédia et accessibilité</span></span></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><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><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> + +<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> </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> + +<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> ."> +</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> + +<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> + +<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> + +<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> + +<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> +</audio> + +<br> + +<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> +</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><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 Chrome" src="https://mdn.mozillademos.org/files/14438/native-controls-chrome.png" style="display: block; height: 344px; margin: 0px auto; width: 400px;"></p> + +<p><span class="tlid-translation translation"><span title="">Cependant, il y a des problèmes avec ces contrôles</span></span> :</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> +</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> + +<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> + +<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><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> + +<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><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><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> + +<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> + </video> + + <div class="controls"> + <button class="playpause">Play</button> + <button class="stop">Stop</button> + <button class="rwd">Rwd</button> + <button class="fwd">Fwd</button> + <div class="time">00:00</div> + </div> +</section></pre> + +<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><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> + +<pre class="brush: js">var playPauseBtn = document.querySelector('.playpause'); +var stopBtn = document.querySelector('.stop'); +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> + +<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><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> + +<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> + +<h4 id="Câbler_nos_boutons"><span class="tlid-translation translation"><span title="">Câbler nos boutons</span></span></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> + +<pre class="brush: js">playPauseBtn.onclick = function() { + if(player.paused) { + player.play(); + playPauseBtn.textContent = 'Pause'; + } else { + player.pause(); + playPauseBtn.textContent = 'Play'; + } +};</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> + +<pre class="brush: js">stopBtn.onclick = function() { + player.pause(); + player.currentTime = 0; + 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><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> + +<pre class="brush: js">rwdBtn.onclick = function() { + player.currentTime -= 3; +}; + +fwdBtn.onclick = function() { + player.currentTime += 3; + if(player.currentTime >= player.duration || player.paused) { + player.pause(); + player.currentTime = 0; + playPauseBtn.textContent = 'Play'; + } +};</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><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><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> + +<pre class="brush: js">player.ontimeupdate = function() { + var minutes = Math.floor(player.currentTime / 60); + var seconds = Math.floor(player.currentTime - minutes * 60); + var minuteValue; + var secondValue; + + if (minutes<10) { + minuteValue = "0" + minutes; + } else { + minuteValue = minutes; + } + + if (seconds<10) { + secondValue = "0" + seconds; + } else { + secondValue = seconds; + } + + mediaTime = minuteValue + ":" + secondValue; + 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> + +<h4 id="Lectures_complémentaires"><span class="tlid-translation translation"><span title="">Lectures complémentaires</span></span></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> + +<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> +</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> + +<h2 id="Transcriptions_audio"><span class="tlid-translation translation"><span title="">Transcriptions audio</span></span></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><span class="tlid-translation translation"><span title="">En termes de création de la transcription, vos options sont les suivantes:</span></span></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> +</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><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> + +<h3 id="Exemples_de_transcription"><span class="tlid-translation translation"><span title="">Exemples de transcription</span></span></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><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> + +<h3 id="Descriptions_audio"><span class="tlid-translation translation"><span title="">Descriptions audio</span></span></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><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><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> + +<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> +</div> + +<h2 id="Pistes_de_texte_vidéo"><span class="tlid-translation translation"><span title="">Pistes de texte vidéo</span></span></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> + +<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> +</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><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><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><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><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> + +<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> +</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> + +<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><span class="tlid-translation translation"><span title="">Un fichier WebVTT typique ressemblera à ceci:</span></span></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> + +2 +00:00:30.739 --> 00:00:34.074 + <span class="tlid-translation translation"><span title="">C'est le deuxième</span></span> . + + ...</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> + +<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> +</ul> + +<p><span class="tlid-translation translation"><span title="">Voici un exemple:</span></span></p> + +<pre class="brush: html"><video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <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><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><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> + +<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> +</div> + +<h2 id="Autre_contenu_multimédia"><span class="tlid-translation translation"><span title="">Autre contenu multimédia</span></span></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> + +<ul> + <li><a href="/en-US/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> + +<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> +</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><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> + +<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> + +<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>{{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> + +<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/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> +</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 new file mode 100644 index 0000000000..6a55cde5cb --- /dev/null +++ b/files/fr/learn/accessibility/wai-aria_basics/index.html @@ -0,0 +1,425 @@ +--- +title: Les bases de WAI-ARIA +slug: Apprendre/a11y/WAI-ARIA_basics +tags: + - ARIA + - Accessibilité + - Apprendre + - Article + - Débutant + - Guide + - HTML + - JavaScript + - WAI-ARIA + - sémantique +translation_of: Learn/Accessibility/WAI-ARIA_basics +--- +<div>{{LearnSidebar}}</div> + +<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> + +<table class="learn-box 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> + </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> + </tr> + </tbody> +</table> + +<h2 id="Qu'est_WAI-ARIA"><span class="tlid-translation translation"><span title="">Qu'est WAI-ARIA?</span></span></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> + +<h3 id="Un_nouvel_ensemble_de_problèmes"><span class="tlid-translation translation"><span title="">Un nouvel ensemble de problèmes</span></span></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><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> + +<pre class="brush: html"><a href="#hidden" class="hidden"><span class="tlid-translation translation"><span title="">Passer à la navigation</span></span></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><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> + +<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><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> + +<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> + +<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> +</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> + +<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><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> +</div> + +<h3 id="Où_WAI-ARIA_est_supporté">Où WAI-ARIA est supporté?</h3> + +<p>Ce n’est pas une question simple. Il est difficile de trouver une ressource concluante qui explicite quelles fonctionnalités de WAI-ARIA sont supportées où, parce que:</p> + +<ol> + <li>Il y a beaucoup de fonctionnalités dans la spécification WAI-ARIA</li> + <li>Il y a beaucoup de combinaisons de systèmes d’exploitation, navigateurs et lecteurs d’écrans à considérer</li> +</ol> + +<p>Ce dernier point est la clé: pour utiliser un lecteur d’écran, votre système d’exploitation a besoin d’un navigateur ayant les APIs d’accessibilité nécessaires, de manière à présenter l’information dont les lecteurs d’écran ont besoin pour faire leur travail. Les systèmes d’exploitation les plus populaires ont un à deux navigateurs avec les quels les lecteurs d’écrans peuvent travailler. Le Paciello Group a un article plutôt à jour fournissant des informations pour ceci — voir <a href="https://www.paciellogroup.com/blog/2014/10/rough-guide-browsers-operating-systems-and-screen-reader-support-updated/">Rough Guide: browsers, operating systems and screen reader support updated</a>.</p> + +<p>Ensuite, vous devez vous demander si les navigateurs en question supportent les fonctionnalités ARIA et les présenter via leurs APIs, mais aussi du fait que les lecteurs d’écrans reconnaissent ou non cette information et la présentent à leurs utilisateurs d’une manière utile.</p> + +<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> +</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> +</div> + +<h3 id="When_should_you_use_WAI-ARIA">When should you use WAI-ARIA?</h3> + +<p>We talked about some of the problems that prompted WAI-ARIA to be created earlier on, but essentially, there are four main areas that WAI-ARIA is useful in:</p> + +<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>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>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> +</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> + +<h3 id="SignpostsLandmarks">Signposts/Landmarks</h3> + +<p>WAI-ARIA adds the <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions"><code>role</code> attribute</a> to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. The first major area in which this is useful is providing information for screenreaders so that their users can find common page elements. Let's look at an example — our <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-no-roles">website-no-roles</a> example (<a href="http://mdn.github.io/learning-area/accessibility/aria/website-no-roles/">see it live</a>) has the following structure:</p> + +<pre class="brush: html"><header> + <h1>...</h1> + <nav> + <ul>...</ul> + <form> + <!-- search form --> + </form> + </nav> +</header> + +<main> + <article>...</article> + <aside>...</aside> +</main> + +<footer>...</footer></pre> + +<p>If you try testing the example with a screenreader in a modern browser, you'll already get some useful information. For example, VoiceOver gives you the following:</p> + +<ul> + <li>On the <code><header></code> element — "banner, 2 items" (it contains a heading and the <code><nav></code>).</li> + <li>On the <code><nav></code> element — "navigation 2 items" (it contains a list and a form).</li> + <li>On the <code><main></code> element — "main 2 items" (it contains an article and an aside).</li> + <li>On the <code><aside></code> element — "complementary 2 items" (it contains a heading and a list).</li> + <li>On the search form input — "Search query, insertion at beginning of text".</li> + <li>On the <code><footer></code> element — "footer 1 item".</li> +</ul> + +<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>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> + +<p>Let's improve it by the use of some ARIA features. first, we'll add some role attributes to our HTML structure. You can try taking a copy of our original files (see <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/index.html">index.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/style.css">style.css</a>), or navigating to our <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> example (<a href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">see it live</a>), which has a structure like this:</p> + +<pre class="brush: html"><header> + <h1>...</h1> + <nav role="navigation"> + <ul>...</ul> + <form role="search"> + <!-- search form --> + </form> + </nav> +</header> + +<main> + <article role="article">...</article> + <aside role="complementary">...</aside> +</main> + +<footer>...</footer></pre> + +<p>We've also given you a bonus feature in this example — the {{htmlelement("input")}} element has been given the attribute <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code>, which gives it a descriptive label to be read out by a screenreader, even though we haven't included a {{htmlelement("label")}} element. In cases like these, this is very useful — a search form like this one is a very common, easily recognised feature, and adding a visual label would spoil the page design.</p> + +<pre class="brush: html"><input type="search" name="q" placeholder="Search query" aria-label="Search through site content"></pre> + +<p>Now if we use VoiceOver to look at this example, we get some improvements:</p> + +<ul> + <li>The search form is called out as a separate item, both when browsing through the page, and in the Landmarks menu.</li> + <li>The label text contained in the <code>aria-label</code> attribute is read out when the form input is highlighted.</li> +</ul> + +<p>Beyond this, the site is more likely to be accessible to users of older browsers such as IE8; it is worth including ARIA roles for that purpose. And if for some reason your site is built using just <code><div></code>s, you should definitely include the ARIA roles to provide these much needed semantics!</p> + +<p>The improved semantics of the search form have shown what is made possible when ARIA goes beyond the semantics available in HTML5. You'll see a lot more about these semantics and the power of ARIA properties/attributes below, especially in the {{anch("Accessibility of non-semantic controls")}} section. For now though, let's look at how ARIA can help with dynamic content updates.</p> + +<h3 id="Dynamic_content_updates">Dynamic content updates</h3> + +<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>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> + +<pre class="brush: html"><section> + <h1>Random quote</h1> + <blockquote> + <p></p> + </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> + +<pre class="brush: js">var intervalID = window.setInterval(showQuote, 10000);</pre> + +<p>This works OK, but it is not good for accessibility — the content update is not detected by screenreaders, so their users would not know what is going on. This is a fairly trivial example, but just imagine if you were creating a complex UI with lots of constantly updating content, like a chat room, or a strategy game UI, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of alerting the user to the updates.</p> + +<p>WAI-ARIA fortunately provides a useful mechanism to provide these alerts — the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-live">aria-live</a></code> property. Applying this to an element causes screenreaders to read out the content that is updated. How urgently the content is read out depends on the attribute value:</p> + +<ul> + <li><code>off:</code> The default. Updates should not be announced.</li> + <li><code>polite</code>: Updates should be announced only if the user is idle.</li> + <li><code>assertive</code>: Updates should be announced to the user as soon as possible.</li> +</ul> + +<p>We'd like you to take a copy of <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/quotes.json">quotes.json</a>, and update your <code><section></code> tag as follows:</p> + +<pre class="brush: html"><section aria-live="assertive"></pre> + +<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> +</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> + +<pre class="brush: html"><section aria-live="assertive" aria-atomic="true"></pre> + +<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> +</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> +</div> + +<h3 id="Enhancing_keyboard_accessibility">Enhancing keyboard accessibility</h3> + +<p>As discussed in a few other places in the module, one of the key strengths of HTML with respect to accessibility is the built-in keyboard accessibility of features such as buttons, form controls, and links. Generally, you are able to use the tab key to move between controls, the Enter/Return key to select or activate controls, and occasionally other controls as needed (for example the up and down cursor to move between options in a <code><select></code> box).</p> + +<p>However, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses focusable controls for not quite the right purpose. You might be trying to fix some bad code you've inherited, or you might be building some kind of complex widget that requires it.</p> + +<p>In terms of making non-focusable code focusable, WAI-ARIA extends the <code>tabindex</code> attribute with some new values:</p> + +<ul> + <li><code>tabindex="0"</code> — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of <code>tabindex</code>.</li> + <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> + +<h3 id="Accessibility_of_non-semantic_controls">Accessibility of non-semantic controls</h3> + +<p>This follows on from the previous section — 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, not only can keyboard accessibility suffer, but screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In such situations, ARIA can help to provide those missing semantics.</p> + +<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> + +<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> + +<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>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> + +<p>We could go further with our ARIA usage, and provide some more validation help. How about indicating whether fields are required in the first place, and what range the age should be?</p> + +<ol> + <li>At this point, take a copy of our <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/validation.js">validation.js</a> files, and save them in a local directory.</li> + <li>Open them both in a text editor and have a look at how the code works.</li> + <li>First of all, add a paragraph just above the opening <code><form></code> tag, like the one below, and mark both the form <code><label></code>s with an asterisk. This is normally how we mark required fields for sighted users. + <pre class="brush: html"><p>Fields marked with an asterisk (*) are required.</p></pre> + </li> + <li>This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-required">aria-required</a></code> attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. Update the <code><input></code> elements like so: + <pre class="brush: html"><input type="text" name="name" id="name" aria-required="true"> + +<input type="number" name="age" id="age" aria-required="true"></pre> + </li> + <li>If you save the example now and test it with a screenreader, you should hear something like "Enter your name star, required, edit text".</li> + <li>It might also be useful if we give screenreader users and sighted users an idea of what the age value should be. This is often presented as a tooltip, or placeholder inside the form field perhaps. WAI-ARIA does include <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin">aria-valuemin</a></code> and <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax">aria-valuemax</a></code> properties to specify min and max values, but these currently don't seem very well supported; a better supported feature is the HTML5 <code>placeholder</code> attribute, which can contain a message that is shown in the input when no value is entered, and is read out by a number of screenreaders. Update your number input like this: + <pre class="brush: html"><input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true"></pre> + </li> +</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> +</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><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><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> + +<pre class="brush: html"><p class="hidden-alert" aria-live="assertive"></p></pre> + +<p>which is hidden from view using absolute positioning. When this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the result of checking this checkbox is, as well as updating the <code>aria-disabled</code> state, and some visual indicators too:</p> + +<pre class="brush: js">function toggleMusician(bool) { + var instruItem = formItems[formItems.length-1]; + if(bool) { + instruItem.input.disabled = false; + instruItem.label.style.color = '#000'; + instruItem.input.setAttribute('aria-disabled', 'false'); + hiddenAlert.textContent = 'Instruments played field now enabled; use it to tell us what you play.'; + } else { + instruItem.input.disabled = true; + instruItem.label.style.color = '#999'; + instruItem.input.setAttribute('aria-disabled', 'true'); + instruItem.input.removeAttribute('aria-label'); + hiddenAlert.textContent = 'Instruments played field now disabled.'; + } +}</pre> + +<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>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> + +<p>We can fix this using a WAI-ARIA role. Make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a>, and add <code><a href="https://www.w3.org/TR/wai-aria-1.1/#button">role="button"</a></code> to each button <code><div></code>, for example:</p> + +<pre><div data-message="This is from the first button" tabindex="0" role="button">Click me!</div></pre> + +<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> +</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>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> + +<p>To improve things, we've created a new version of the example called <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-tabbed-info-box.html">aria-tabbed-info-box.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html">see it running live</a>). We've updated the structure of the tabbed interface like so:</p> + +<pre class="brush: html"><ul role="tablist"> + <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li> + <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li> + <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li> +</ul> +<div class="panels"> + <article class="active-panel" role="tabpanel" aria-hidden="false"> + ... + </article> + <article role="tabpanel" aria-hidden="true"> + ... + </article> + <article role="tabpanel" aria-hidden="true"> + ... + </article> +</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> +</div> + +<p>The new features are as follows:</p> + +<ul> + <li>New roles — <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tablist">tablist</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tab">tab</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code> — these identify the important areas of the tabbed interface — the container for the tabs, the tabs themselves, and the corresponding tabpanels.</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-selected">aria-selected</a></code> — Defines which tab is currently selected. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">aria-hidden</a></code> — Hides an element from being read out by a screenreader. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.</li> + <li><code>tabindex="0"</code> — As we've removed the links, we need to give the list items this attribute to provide it with keyboard focus.</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-setsize">aria-setsize</a></code> — This property allows you to specify to screenreaders that an element is part of a series, and how many items the series has.</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-posinset">aria-posinset</a></code> — This property allows you to specify what position in a series an element is in. Along with <code>aria-setsize</code>, it provides a screenreader with enough information to tell you that you are currently on item "1 of 3", etc. In many cases, browsers should be able to infer this information from the element hierarchy, but it certainly helps to provide more clues.</li> +</ul> + +<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> +</div> + +<h2 id="Summary">Summary</h2> + +<p>This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">Definition of Roles</a> — ARIA roles reference.</li> + <li><a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Definitions of States and Properties (all aria-* attributes)</a> — properties and states reference.</li> + <li><a href="https://dequeuniversity.com/library/">Deque university code library</a> — a library of really useful practical examples showing complex UI controls made accessible using WAI-ARIA features.</li> + <li><a href="http://w3c.github.io/aria-practices/">WAI-ARIA Authoring Practices</a> — very detailed design patterns from the W3C, explaining how to implement different types of complex UI control whilst making them accessible using WAI-ARIA features.</li> + <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> — A W3C spec that defines, for each HTML feature, what accessibility (ARIA) semantics that feature implicitly has set on it by the browser, and what WAI-ARIA features you may set on it if extra semantics are required.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}</p> + +<h2 id="In_this_module">In this 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/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> +</ul> diff --git a/files/fr/learn/accessibility/what_is_accessibility/index.html b/files/fr/learn/accessibility/what_is_accessibility/index.html new file mode 100644 index 0000000000..047e2763a1 --- /dev/null +++ b/files/fr/learn/accessibility/what_is_accessibility/index.html @@ -0,0 +1,198 @@ +--- +title: Qu'est ce que l'accessibilité? +slug: Apprendre/a11y/What_is_accessibility +tags: + - Accessibilité + - Aide technique + - Apprendre + - Article + - CSS + - Clavier + - Débutant + - HTML + - JavaScript + - Lecteur d'écran + - Outils + - Utilisateurs +translation_of: Learn/Accessibility/What_is_accessibility +--- +<div>{{LearnSidebar}}</div> + +<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> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td>Compétences de base en informatique, une compréhension basique de l'HTML et du CSS.</td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td>Se familiariser avec l'accessibilité en découvrant ce que c'est et en quoi cela vous affecte en tant que développeur.</td> + </tr> + </tbody> +</table> + +<h2 id="Quest-ce_donc_que_laccessibilité">Qu'est-ce donc que l'accessibilité?</h2> + +<p>L'accessibilité est la mise à disposition de vos sites web au plus grand nombre. On pense souvent que cela s'adresse aux personnes ayant un handicap, mais cela concerne également d'autres groupes comme ceux utilisant des appareils mobiles ou ceux qui ont des connexions internet de faible débit.</p> + +<p>On peut aussi dire que l'accessibilité c'est traiter tout le monde de la même manière, et donner les mêmes opportunités à tous, peu importe leur handicaps ou les circonstances. De la même manière qu'il est injuste d'empêcher une personne d'accéder à un bâtiment parce qu'elle est en fauteuil roulant (les lieux publics sont souvent équipés de rampes d'accès ou d'ascenseur de nos jours), il est également injuste d'empêcher une personne d'accéder à un site web parce qu'elle a des troubles de la vue, ou qu'elle utilise un téléphone portable. Nous sommes tous différents, mais nous sommes aussi tous humains, ce qui nous donne les mêmes droits.</p> + +<p>Rendre son site accessible est la bonne chose à faire, mais c'est aussi demandé par la loi de certains pays, et cela peut vous ouvrir des marchés conséquents pour qui vos services et vos produits ne seraient sinon pas accessibles.</p> + +<p>L'accessibilité et les bonnes pratiques qu'elle implique peuvent bénéficier à tous :</p> + +<ul> + <li>Le HTML sémantique (qui rend votre site plus accessible) rend également votre site plus optimisé pour les moteurs de recherche, ce qui améliore le référencement de votre site.</li> + <li>Se préoccuper de l'accessibilité c'est faire preuve d'éthique et de morale, ce qui améliore votre image publique.</li> + <li>Des bonnes pratiques améliorent l'accessibilité rendent également votre site plus facilement utilisable par différents groupes comme les utilisateurs de téléphones portables, les personnes ayant un faible débit, etc. En fait, tout le monde peut tirer un bénéfice de ces améliorations.</li> + <li>A-t-on mentionné que c'est la loi dans certaines régions ?</li> +</ul> + +<h2 id="Quel_genre_de_handicap_devons_nous_envisager">Quel genre de handicap devons nous envisager ?</h2> + +<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> +</div> + +<h3 id="Les_personnes_ayant_des_troubles_de_la_vue">Les personnes ayant des troubles de la vue</h3> + +<p>Cette catégorie comprend les personnes aveugles, malvoyantes, daltoniennes, etc. Beaucoup d'entre eux utilisent des agrandisseurs d'écran (soit de vraies loupes, soit la fonction loupe implémentée dans la plupart des systèmes d'exploitation et navigateurs), et certains utilisent des lecteurs d'écran qui lisent le texte à voix haute:</p> + +<ul> + <li>Certains, comme <a class="external external-icon" href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (Windows) et <a class="external external-icon" href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (Windows), sont payants.</li> + <li>D'autres, comme <a class="external external-icon" href="http://www.nvaccess.org/">NVDA</a> (Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (Chrome, Windows et Mac OS X), et <a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux) sont gratuits.</li> + <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>{{EmbedYouTube("IK97XMibEws")}}</p> + +<p>Pour ce qui est des statistiques, l'Organisation mondiale de la santé estime que «253 millions de personnes présentent une déficience visuelle : 36 millions d’entre elles sont aveugles et 217 millions présentent une déficience visuelle modérée à sévère. » (Voir <a href="http://www.who.int/mediacentre/factsheets/fs282/fr/">Cécité et déficience visuelle</a>). Cela représente une part conséquente des utilisateurs que vous perdriez parce que votre site est mal codé — presque autant que la population des États-Unis.</p> + +<h3 id="Les_personnes_ayant_des_troubles_de_laudition">Les personnes ayant des troubles de l'audition</h3> + +<p>Aussi connues comme les personnes malentendantes ou sourdes, ce groupe correspond aux personnes qui ont perdu, partiellement ou totalement, la perception des sons. Les sourds et malentendants utilisent des technologies d'assistance (voir <a href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">Aides techniques pour les personnes ayant des troubles de l'audition, de la voix, de la parole ou du langage (en)</a> ), mais il n'existe pas de technologies spécifiques pour l'utilisation du Web et des ordinateurs.</p> + +<p>Il existe cependant des techniques auxquelles il faut penser pour proposer des alternatives aux fichiers audios : de la simple transcription textuelle aux sous-titres qui peuvent être affichés en même temps que la vidéo. Un article décrira plus tard ces méthodes.</p> + +<p>Les sourds et malentendants représentent également une part significative des utilisateurs — «360 millions de personnes dans le monde souffrent de déficience auditive incapacitante», indique l'aide-mémoire <a href="http://www.who.int/mediacentre/factsheets/fs300/fr/">Surdité et déficience auditive</a> de l'Organisation Mondiale de la Santé.</p> + +<h3 id="Les_personnes_ayant_des_troubles_de_la_mobilité">Les personnes ayant des troubles de la mobilité</h3> + +<p>Ces personnes ont un handicap ayant rapport au mouvement, qui peuvent comprendre des problèmes purement physique (comme la perte d'un membre ou la paralysie), ou des troubles psychologiques ou génétiques qui mènent à des faiblesse voire à une perte du contrôle des membres. Certains ont des difficultés à exécuter les mouvements précis de la main nécessaires à l'utilisation d'une souris, tandis que d'autres peuvent être plus sérieusement atteints, voire même être paralysés au point d'avoir à utiliser un pointeur frontal pour utiliser un ordinateur.</p> + +<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 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> + +<h3 id="Personnes_ayant_des_déficiences_cognitives"><span class="tlid-translation translation"><span title="">Personnes ayant des déficiences cognitives</span></span></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><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><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> + +<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> +</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><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> + +<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> +</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> + +<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> + +<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> +</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><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> + +<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> +</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><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><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><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> + +<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> +</div> + +<p><span class="tlid-translation translation"><span title="">Résumer</span></span> :</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> +</ul> + +<h2 id="Directives_daccessibilité_et_loi"><span class="tlid-translation translation"><span title="">Directives d'accessibilité et loi</span></span></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> + +<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> +</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><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> + +<h2 id="API_daccessibilité"><span class="tlid-translation translation"><span title="">API d'accessibilité</span></span></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><span class="tlid-translation translation"><span title="">Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles</span></span> :</p> + +<ul> + <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li> + <li>Mac OS X: NSAccessibility</li> + <li>Linux: AT-SPI</li> + <li>Android: Accessibility framework</li> + <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> + +<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> + +<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>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p> |