-
Notifications
You must be signed in to change notification settings - Fork 5
/
images.html
executable file
·201 lines (182 loc) · 11.5 KB
/
images.html
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Images - Défauts d’accessibilité : Impacts sur les utilisateurs</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css" media="all">
<link rel="stylesheet" href="css/print.css" media="print">
</head>
<body>
<div class="main-header">
<div class="inside">
<ul class="skip-links">
<li><a href="#main">contenu</a></li>
<li><a href="#navigation">navigation</a></li>
</ul>
<header role="banner" class="header clear" id="banner">
<h1 class="title">Défauts d’accessibilité : Impacts sur les utilisateurs</h1>
</header>
<nav role="navigation" class="gp-sommaire" id="navigation" aria-label="Sommaire du guide">
<button id="btnSommaire" aria-expanded="false">Sommaire</button>
<ul class="sommaire is-hidden" id="sommaireToggle">
<li><a href="index.html">Introduction</a></li>
<li><a href="personnes.html">Personnes handicapées et navigation sur le web</a>
<ul>
<li><a href="handicap-visuel.html">Handicap visuel</a></li>
<li><a href="handicap-auditif.html">Handicap auditif</a></li>
<li><a href="handicap-moteur.html">Handicap moteur</a></li>
<li><a href="handicap-mental.html">Handicap mental</a></li>
</ul>
</li>
<li><a href="rgaa.html">Problématiques prises en charge par les critères du RGAA pour les utilisateurs en situation de handicap</a>
<ul>
<li><a href="images.html">Images</a></li>
<li><a href="cadres.html">Cadres</a></li>
<li><a href="couleurs.html">Couleurs</a></li>
<li><a href="multimedia.html">Multimédia</a></li>
<li><a href="tableaux.html">Tableaux</a></li>
<li><a href="liens.html">Liens</a></li>
<li><a href="scripts.html">Scripts</a></li>
<li><a href="obligatoires.html">Éléments obligatoires</a></li>
<li><a href="structuration.html">Structuration</a></li>
<li><a href="presentation.html">Présentation</a></li>
<li><a href="formulaires.html">Formulaires</a></li>
<li><a href="navigation.html">Navigation</a></li>
<li><a href="consultation.html">Consultation</a></li>
</ul>
</li>
</ul>
</nav>
<div class="github-link">
<p><a title="Contribuer / Télécharger sur Github" href="https://github.com/DISIC/guide-impacts_utilisateurs/">Contribuer / Télécharger</a></p>
</div>
</div>
</div>
<div id="wrapper">
<nav role="navigation" class="internav clear">
<ul>
<li><a class="prev" href="rgaa.html"><span aria-hidden="true"> « </span> Problématiques prises en charge par les critères du RGAA pour les utilisateurs en situation de handicap</a></li>
<li><a class="next" href="cadres.html">Cadres <span aria-hidden="true"> » </span></a></li>
</ul>
</nav>
<main id="main" role="main">
<h1 class="fiche-title">Images</h1>
<article class="article">
<p>Les déficients visuels (aveugles et malvoyants) sont les principaux utilisateurs impactés par l’accessibilité des images.</p>
<p>Dans cette section :</p>
<ul>
<li><a href="#alt-img">Alternatives aux images porteuses d’information</a></li>
<li><a href="#alt-img-deco">Alternatives vides aux images de décoration</a></li>
<li><a href="#captcha">Alternatives vides aux images Captchas</a></li>
<li><a href="#texte-image">Lisibilité des textes en images</a></li>
<li><a href="#legende">Légendes d’image</a></li>
</ul>
</article>
<article class="article">
<h2 id="alt-img">Alternatives aux images porteuses d’information</h2>
<div class="col-1-2">
<h3>Critères</h3>
<ul>
<li><a href="http://references.modernisation.gouv.fr/referentiel/criteres.html#crit-1-1">1.1</a></li>
<li><a href="http://references.modernisation.gouv.fr/referentiel/criteres.html#crit-1-3">1.3</a></li>
<li><a href="http://references.modernisation.gouv.fr/referentiel/criteres.html#crit-1-6">1.6</a></li>
<li><a href="http://references.modernisation.gouv.fr/referentiel/criteres.html#crit-1-7">1.7</a></li>
</ul>
<h3>Utilisateurs principalement impactés</h3>
<p>Aveugles, grands malvoyants.</p>
<h3 class="warning">Impact : Majeur</h3>
<p>Quelles que soient les situations et en l’absence de dérogations justifiées, l’absence ou le manque de pertinence d’une image porteuse d’information doit être considéré comme un problème majeur qui exige une correction immédiate.</p>
</div>
<div class="col-1-2">
<h3>Explication</h3>
<p>L’absence d’alternatives aux images porteuses d’information est un des problèmes les plus importants pour les utilisateurs aveugles et les grands malvoyants. En effet, ces utilisateurs accèdent au contenu au travers d’une synthèse vocale ou d’un système de vocalisation couplé avec un logiciel d’agrandissement. Il suffit d’une alternative absente ou pas assez pertinente sur une image porteuse d’information pour empêcher ces utilisateurs de comprendre un contenu ou d’accomplir une tâche.</p>
</div>
</article>
<article class="article">
<h2 id="alt-img-deco">Alternatives vides aux images de décoration</h2>
<div class="col-1-2">
<h3>Critères</h3>
<ul>
<li><a href="http://references.modernisation.gouv.fr/referentiel/criteres.html#crit-1-2">1.2</a></li>
</ul>
<h3>Utilisateurs principalement impactés</h3>
<p>Aveugles, grands malvoyants.</p>
<h3 class="warning">Impact : Faible à fort</h3>
<p>L’impact est très contextuel. Dans certains cas quelques images de décoration renseignées n’auront pas d’impact ou à la marge alors que dans d’autres cas l’impact peut devenir suffisamment fort pour constituer une véritable cause d’échec en termes de compréhension ou d’utilisation des contenus.</p>
</div>
<div class="col-1-2">
<h3>Explication</h3>
<p>Les lecteurs d’écrans utilisés par les aveugles et les systèmes de vocalisations couplés aux logiciels d’agrandissement utilisés par les grands malvoyants retranscrivent beaucoup d’information, tels que le type d’élément rencontré, ses propriétés, son état et son alternative éventuelle.</p>
<p>La présence d’alternative aux images de décoration, en produisant beaucoup d’information inutile, peut rendre difficilement compréhensible un contenu et, dans certaines conditions, changer le sens du contenu pour ces utilisateurs.</p>,
</div>
</article>
<article class="article">
<h2 id="captcha">Alternatives vides aux images Captcha</h2>
<div class="col-1-2">
<h3>Critères</h3>
<ul>
<li><a href="http://references.modernisation.gouv.fr/referentiel/criteres.html#crit-1-4">1.4</a></li>
<li><a href="http://references.modernisation.gouv.fr/referentiel/criteres.html#crit-1-5">1.5</a></li>
</ul>
<h3>Utilisateurs principalement impactés</h3>
<p>Aveugles, déficients visuels, handicapés mentaux et cognitifs.</p>
<h3 class="warning">Impact : Majeur</h3>
<p>Les problèmes d’accessibilité des captchas sont toujours synonymes d’échec et devraient être corrigés immédiatement.</p>
</div>
<div class="col-1-2">
<h3>Explication</h3>
<p>L’absence d’alternative à une image captcha permettant d’en identifier la nature et surtout l’absence de moyen alternatif constitue un problème insurmontable pour les aveugles et les déficients visuels qui ne sont pas en capacité de lire le code.</p>
<p>C’est également le cas pour les handicapés mentaux ou cognitifs qui peuvent simplement ne pas comprendre le mécanisme lui-même, notamment lorsque le moyen alternatif est un captcha logique.</p>
</div>
</article>
<article class="article">
<h2 id="texte-image">Lisibilité des textes en images</h2>
<div class="col-1-2">
<h3>Critères</h3>
<ul>
<li><a href="http://references.modernisation.gouv.fr/referentiel/criteres.html#crit-1-8">1.8</a></li>
<li><a href="http://references.modernisation.gouv.fr/referentiel/criteres.html#crit-1-9">1.9</a></li>
</ul>
<h3>Utilisateurs principalement impactés</h3>
<p>Déficients visuels.</p>
<h3 class="warning">Impact : Modéré à fort</h3>
<p>Selon la nature du texte en image, sa police ou ses effets graphiques, l’impact peut rester modéré ou devenir suffisamment fort pour empêcher l’accès à l’information.</p>
</div>
<div class="col-1-2">
<h3>Explication</h3>
<p>Les déficients visuels vont avoir de grandes difficultés à lire des textes en images, car ils ne pourront pas agrandir les textes par exemple. Par ailleurs, la composition elle-même de ces textes (utilisation de police exotique, effet graphique sophistiqué ou disposition particulière) peut générer également de grandes difficultés de lecture.</p>
<p>Certains utilisateurs présentants des troubles de la lecture peuvent avoir recours à des feuilles de styles personnalisées pour modifier la police d'écriture et en utiliser une plus spécifique. Les textes en images ne peuvent être adaptés.</p>
<p>Le recours à la désactivation totale des images de la page n’est pas un moyen fiable et efficace, car la recomposition de la page non contrôlée peut provoquer plus de problèmes qu’elle n’en résout.</p>
</div>
</article>
<article class="article">
<h2 id="legende">Légendes d’image</h2>
<div class="col-1-2">
<h3>Critères</h3>
<ul>
<li><a href="http://references.modernisation.gouv.fr/referentiel/criteres.html#crit-1-10">1.10</a></li>
</ul>
<h3>Utilisateurs principalement impactés</h3>
<p>Aveugles.</p>
<h3 class="warning">Impact : Fort à majeur</h3>
</div>
<div class="col-1-2">
<h3>Explication</h3>
<p>Une légende est associée visuellement à son image par un style particulier. L’absence de perception de cette association pour un aveugle peut avoir un impact majeur pour ces utilisateurs.</p>
<p>Par exemple, si la légende contient des informations sur l’image, comme un copyright, une date, le nom d’un auteur ou d’une source, si la liaison entre la légende et l’image n’est pas annoncée, la personne aveugle peut penser que ces informations sont liées au contenu, ce qui aura pour conséquence une grave altération de la compréhension du contenu.</p>
</div>
</article>
</main>
<footer id="footer" role="contentinfo" class="clear">
<h2>Licence d'utilisation</h2>
<p class="logo-smgap"><a href="http://references.modernisation.gouv.fr/"><img src="img/modernisation-logo.jpg" alt="Secrétariat général pour le modernisation de l'action publique"></a></p>
<p>Ce document est la propriété du Secrétariat général à la modernisation de l'action publique français (SGMAP). Il est placé sous la <a href="https://www.etalab.gouv.fr/licence-ouverte-open-licence">licence ouverte 1.0 ou ultérieure</a>, équivalente à une licence <i lang="en">Creative Commons BY</i>. Pour indiquer la paternité, ajouter un lien vers la version originale du document disponible sur le <a href="https://github.com/DISIC">compte <span lang="en">GitHub</span> de la DInSIC</a>.</p>
</footer>
</div>
<script src="js/script.js"></script>
</body>
</html>