1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
---
title: 'Évaluation: dépannage d''accessibilité'
slug: Learn/Accessibility/Accessibility_troubleshooting
tags:
- Accessibilité
- Apprendre
- CSS
- Débutant
- HTML
- JavaScript
translation_of: Learn/Accessibility/Accessibility_troubleshooting
original_slug: Apprendre/a11y/Accessibility_troubleshooting
---
<p>{{LearnSidebar}}<br>
{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p>
<p><span class="tlid-translation translation"><span title="">Dans l’évaluation de ce module, nous vous présentons un site simple, qui présente un certain nombre de problèmes d’accessibilité que vous devez diagnostiquer et résoudre.</span></span></p>
<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>
|
