|
|
Synthèse des critères
d'accessibilité ADAE/Accessiweb - version : HC 1.0.2 du
25/05/2007 |
|
|
|
|
|
|
| page
: |
http:// |
|
|
|
|
|
|
| I
- les critères d'accès |
|
|
| þ |
ADAE |
Critères |
Prio. |
WCAG1.0 |
| |
|
Images |
|
|
| o |
1.1 |
renseigner l'attribut
alt pour les images et area shape |
A |
1.1 |
| o |
1.2 |
utiliser alt="*" pour une puce n'ayant
qu'une valeur décorative, mais alt="puce jaune" sur un site de
téléchargement de puces |
A |
1.1 |
| o |
1.3 |
utiliser alt="" pour les images
décoratives, sans valeur informative (y compris image cliquable doublonnant
un lien texte) |
A |
1.1 |
| o |
1.4 |
mettre un maximum de 60 caractères dans l'attribut alt |
A |
1.1 |
| o |
1.8 |
le alt de chaque image contenant du texte doit être au moins équivalent au texte inscrit
dans l'image (mais peut en contenir plus) |
A |
1.1 |
| o |
1.9 |
privilégier un texte
mis en forme (CSS) à un texte sous forme d'image (à éviter) |
AA |
3.1 |
| o |
1.10 |
utiliser un
commentaire lorsqu'une image le nécessite (attribut longdesc, légende, image cliquable, "D-link", …) |
A |
1.1 |
| o |
1.11 |
si on a une description détaillée d'une image
(longdesc, …), elle doit être pertinente et apporter un plus par rapport au
alt |
A |
1.1 |
| o |
1.12 |
pour les liens en images, le alt doit donner la fonction du lien (ex :
alt="suivant" et non alt="flèche droite") |
AA |
13.1 |
| o |
1.13 |
la taille
des images doit être appropriée
au contexte (ex : apparition d'un ascenseur alors
qu'une plus petite donnerait la même info) |
AAA |
14.3 |
| |
|
Images map |
|
|
| o |
1.5 |
utiliser des alt pour chacune
des area shape d'une image map, ainsi que pour
l'image map elle-même (usemap ou ismap) |
A |
1.1, 1.2, 9.1 |
| o |
1.6 |
les zones réactives des images map doivent
être ordonnées de manière logique (ex : départements par ordre alphabétique) |
AA |
3.6 |
| o |
1.7 |
les zones réactives des images map doivent
être définies juste après
la déclaration de l'image
map |
AA |
12.3 |
| |
|
Frames (cadres) |
|
|
| o |
|
interdits dans nos
normes de développement HTML pour les pages et sites Web et Intranet |
|
|
| |
|
Couleurs |
|
|
| o |
3.1 |
lorsque les couleurs
sont désactivées, l'information donnée par la couleur doit
toujours être lisible (daltoniens, malvoyants) |
A |
2.1 |
| o |
3.2 |
les différences de contrastes entre les
couleurs doivent être suffisamment élevées (éviter : rouge/bleu, jaune/violet, jaune/vert, …) |
AA |
2.2 |
| |
|
Multimédia |
|
|
| o |
4.1 |
lorsqu'un support
multimédia fournit de l'information, il faut prévoir une
alternative (ex : fichier RTF, TXT, HTML pour un
son) |
A |
1.3 |
| o |
4.2 |
Le contenu multimédia
doit être synchronisé avec son
alternative (utilisation du langage SMILE) |
A |
1.4 |
| |
|
Tableaux |
|
|
| o |
5.1 |
renseigner l'attribut
summary des tableaux |
AAA |
5.5 |
| o |
5.2 |
donner un titre à
chaque tableau de données en utilisant la balise caption |
A |
5.1 |
| o |
5.3 |
identifier les
entêtes de colonnes d'un tableau de données avec la balise th |
A |
5.1, 5.4 |
| o |
5.4 |
relier le contenu d'une cellule à son entête de colonne avec les
attributs headers et id, dans un tableau de données |
A |
5.2 |
| o |
5.5 |
lorsqu'un titre de colonne fait plus de 15 caractères, utiliser
l'attribut abbr (ex :
"Marque du véhicule" + abbr="marque") |
AAA |
5.6 |
| o |
5.6 |
dans les tableaux de
mise en forme, les infos doivent être ordonnées de sorte à être affichées dans le même ordre en lecture
linéaire |
AA |
5.3 |
| |
|
Liens |
|
|
| o |
6.1 |
l'intitulé des liens
doit faire un maximum de 80 caractères (accent = 1 caractère) |
AA |
13.1 |
| o |
6.2 |
les liens doivent
être explicites et compréhensibles hors du contexte de la page (éviter "cliquer ici") |
AA |
13.1 |
| o |
6.3 |
donner un title d'un maximum
de 80 caractères, si nécessaire (ex : pour un
fichier téléchargeable : titre, taille, format, destination) |
A |
6.3 |
| o |
6.4 |
le commentaire (title) donné au lien doit fournir plus d'informations que
l'intitulé du lien lui-même (mais y compris
l'intitulé) |
AA |
13.1 |
| o |
6.5 |
chaque intitulé de lien identique doit amener vers une
seule et même destination (ex : éviter "lire l'article" plusieurs fois sur la page) |
AA |
13.1 |
| o |
6.6 |
dans l'arborescence
du site, il doit y avoir au maximum 9 catégories par niveau de navigation |
AAA |
14.3 |
| o |
6.7 |
il doit y avoir un maximum de 40 liens actifs dans la page, hors liens nécessaires à la navigation |
AAA |
13.5, 13.6 |
| |
|
Scripts |
|
|
| o |
7.1 |
l'info donnée par l'alternative, si nécessaire, d'un script
(désactivés) doit être équivalente à celle du script (ex :contrôle de saisie
serveur) |
A |
6.2, 6.3, 8.1 |
| o |
7.2 |
des actions doivent
pouvoir être accomplies, même lorsque le périphérique pour lequel elles sont
prévues est désactivé (souris --> clavier) |
AA |
6.4, 9.2, 9.3 |
| |
|
Eléments obligatoires |
|
|
| o |
8.1 |
utiliser la balise doctype pour spécifier le type du
document électronique |
AA |
3.2 |
| o |
8.2 |
spécifier l'attribut lang dans la balise html pour indiquer la langue utilisée |
AAA |
4.3 |
| o |
8.3 |
renseigner les
éléments de description d'un page Web meta, charset, … (en Europe de l'ouest : ISO-8859-1 pour charset) |
AA |
13.2 |
| o |
8.4 |
le title d'une page Web doit être renseigné |
AA |
13.2 |
| o |
8.5 |
le title d'une page
Web doit être explicite |
AA |
13.2 |
| o |
8.6 |
le title d'une page
Web doit être unique |
AA |
13.2 |
| o |
8.7 |
les changements de langue dans un document
électronique doivent être spécifiés (span lang="…") |
A |
4.1 |
| |
|
Structuration de
l'information |
|
|
| o |
9.1 |
la structuration de
l'information doit être cohérente par rapport au contexte général du site Web |
A |
14.1 |
| o |
9.2 |
une page Web doit
posséder une structure cohérente (utiliser h1, h2, …pour leur fonction 1ère ; les blocs d'infos doivent être
distincts) |
AA |
3.5, 13.8 |
| o |
9.3 |
un site Web doit
posséder un plan du site reprenant
l'ensemble des éléments de l'arborescence (liens concis, précis et lisibles) |
AA |
13.3 |
| o |
9.4 |
une page d'aide expliquant les principes de
navigation à l'intérieur du site Web doit être présente (raccourcis claviers,
…) |
AA |
13.3 |
| o |
9.5 |
la page d'aide doit
être atteignable de manière identique quelle que soit la page Web visitée (raccourci clavier, lien en
haut et bas) |
AA |
9.5, 13.4 |
| o |
9.6 |
un site Web doit
posséder un moteur de recherche interne |
AA |
13.3 |
| o |
9.7 |
le moteur de
recherche doit être atteignable de manière identique quelle que soit la page Web visitée |
AA |
9.5, 13.4 |
| o |
9.8 |
la page de moteur de
recherche doit au moins comporter : nbr max. de réponses par page, nbr total
de réponses, éléments de navigation |
AAA |
13.7, 13.9 |
| |
|
Présentation de
l'information |
|
|
| o |
10.1 |
le contenu d'une page
doit être séparé de sa présentation (bannir : bgcolor,
font, align, b, i, … à définir en CSS ) |
AA |
3.3 |
| o |
10.2 |
l'information doit être identique lorsqu'on désactive la mise en forme spécifiée pour cette information (feuille de style) |
A |
6.1 |
| o |
10.3 |
l'ordre
d'apparition de l'information (div, notamment) doit être identique lorsqu'une mise en forme
spécifique est désactivée |
A |
6.1, 9.4 |
| o |
10.4 |
la dimension des éléments structurels d'une page doit être définie en relatif (taille des tableaux, des polices, ...) |
AA |
3.4 |
| o |
10.5 |
si des valeurs
absolues sont utilisées pour les dimensions, elles doivent l'être sans
conséquence sur l'affichage de l'info (toute résolution) |
AA |
3.4 |
| o |
10.6 |
les polices de caractères d'une page doivent
appartenir à la famille "sans sérif" (spécifier plusieurs polices, puis "sans sérif"
en dernier) |
AA |
3.3 |
| |
|
Formulaires |
|
|
| o |
11.1 |
les champs de saisie
d'un formulaire doivent être reliés à leurs textes explicatifs respectifs (spécifier label, id et for) |
AA |
10.2, 12.4 |
| o |
11.2 |
les textes associés aux champs de saisie des formulaires doivent
être explicites (ex :
éviter les répétitions de "faites votre choix") |
AA |
12.3 |
| o |
11.3 |
la disposition des
champs par rapport aux textes associés ne doit poser aucune ambiguïté (<
ou = 2 espaces entre le champ et le texte) |
AA |
10.2, 12.3 |
| o |
11.4 |
les blocs d'info de
même nature doivent être clairement identifiés (utiliser fieldset pour état civil qui regroupe nom, prénom, naissance) |
AA |
12.3 |
| o |
11.5 |
un titre doit être
présent pour chacun des blocs d'info d'un formulaire (utiliser la balise legend associée à fieldset) |
AA |
12.3 |
| o |
11.6 |
le commentaire
du bouton de validation d'un formulaire doit être pertinent (si c'est une image, la
commenter "valider le
formulaire") |
A |
1.1 |
| o |
11.7 |
le contrôle
de saisie des champs doit
être accessible à tous (alternative à un script de
validation sur le client) |
A |
6.3, 6.5 |
| o |
11.7b |
(suite) spécifier les
champs obligatoires de manière explicite ("les champs précédés d'une
étoile sont tous obligatoires") |
A |
6.3, 6.5 |
| o |
11.7c |
(suite) éviter de
faire ressortir les champs obligatoires par une couleur ou de préciser quels
champs sont obligatoires à la fin du formulaire |
A |
6.3, 6.5 |
| o |
11.8 |
dans une liste de choix, l'ensemble des champs
doit être défini dans un ordre logique (ex : les départements par ordre alphabétique) |
AA |
3.6 |
| |
|
Aide à la navigation |
|
|
| o |
12.1 |
la navigation dans l'ensemble des pages d'une site Web doit être cohérente |
AA |
13.4, 14.3 |
| o |
12.2 |
le menu principal de navigation interne dans un site Web doit toujours
être présent à la même place dans ses pages Web |
AA |
13.4 |
| o |
12.3 |
des barres de navigation qui facilitent
l'accès pour la navigation interne doivent être présentes (barre de bas de
page, fil d'Ariane) |
AAA |
13.5 |
| o |
12.4 |
des liens facilitant
la navigation doivent être présents dans une page Web (sommaire
vers les paragraphes, bouton "haut de page") |
AA |
13.4, 13.5, 13.6,
13.10 |
| o |
12.5 |
prévoir des raccourcis clavier pour les liens
importants (page d'accueil, page d'aide, plan du site, moteur de recherche,
glossaire, contacts) |
AAA |
9.5 |
| o |
12.6 |
si des raccourcis clavier ont été définis, ils
doivent être actifs dans l'ensemble des pages |
AA |
13.4 |
| o |
12.7 |
dans un groupement de liens, chaque lien doit être séparé du précédent par
un caractère imprimable (image avec alt=" |
") |
AAA |
10.5 |
| o |
12.8 |
le poids
des pages Web doit être limité à 70 Ko (sauf pour une image agrandie,
dont le poids devra être indiquée dans le lien) |
|
|
| |
|
Contenus accessibles |
|
|
| o |
13.1 |
l'utilisateur doit
pouvoir provoquer ou arrêter le rafraîchissement dans une page Web |
AA |
7.4 |
| o |
13.2 |
les redirections automatiques ne doivent pas
s'effectuer par l'intermédiaire d'un script (mais côté
serveur) |
AA |
7.5 |
| o |
13.3 |
l'utilisateur doit
être averti lors de l'ouverture de nouvelles fenêtres (nouvelle fenêtre de navigateur et pop up) |
AA |
10.1 |
| o |
13.4 |
une alternative équivalente au script qui
déclenche l'ouverture de nouvelles fenêtres (pop-up)
doit être prévue |
AA |
10.1 |
| o |
13.5 |
des infos doivent
être données pour décrire les fichiers téléchargeables (format, poids, lien outil conversion,
lien logiciel de lecture) |
AAA |
11.3 |
| o |
13.6 |
les fichiers téléchargeables doivent être
proposés dans des formats alternatifs équivalents (ex : RTF, TXT, HTML pour PDF) |
AAA |
11.3 |
| o |
13.7 |
la présentation
spécifique d'une info ne doit pas entraver l'accès à son contenu (ex :
clignotement, défilement trop rapides) |
A |
7.1, 7.2, 7.3 |
| o |
13.7b |
(suite) lorsque ce
type de présentation spécifique est généré par une applet, du flash, une gif
animée, … proposer une alternative |
A |
7.1, 7.2, 7.3 |
| o |
13.8 |
la présentation d'une
page Web doit être réalisée sans détourner certaines balises de leur fonction d'origine (blockquote, ul) |
AA |
3.7, 5.4, 11.2 |
| o |
13.8b |
(suite) ne pas
utiliser b, center, basefont, applet, dir, font, isindex, menu, s, strike, u
et align, bgcolor, height… dépréciés |
AA |
3.7, 5.4, 11.2 |
| o |
13.9 |
chaque acronyme, abréviation ou sigle présent
dans une page doit y être défini au moins une fois |
AAA |
4.2 |
| o |
13.10 |
renseigner la
définition (utiliser l'attribut title) de chaque acronyme (utiliser la balise acronym), abréviation ou sigle |
AAA |
4.2 |
| o |
13.11 |
lorsqu'aucune
description d'un acronyme n'est prévue, chaque lettre de
celui-ci doit être séparée par un point |
|
|
| o |
13.12 |
les éléments des
textes (titres, sous-titres, phrases, …) ne doivent pas
être écrits en lettres majuscules |
|
|
| o |
13.13 |
une page Web doit
faire au maximum 3 écrans en
1024x768 (police medium) si aucune navigation interne n'est prévue (ou
sommaire) |
AAA |
14.3 |
| þ |
ADAE |
Critères |
Prio. |
WCAG1.0 |
|
| II
- les critères d'utilisabilité |
|
| þ |
ADAE |
Recommandations |
|
| |
|
Standards et critères
structurels |
|
| o |
1 |
les documents
électroniques doivent intégrer les balises et les attributs liés aux
standards de leur langage |
|
| |
|
Eléments
rédactionnels |
|
| o |
2 |
les contenus qui ne
sont pas à imprimer ou télécharger doivent être pensés pour le Web (contenus
: 500 à 1500 signes, vocabulaire simple) |
|
| o |
3 |
toute page doit être imprimable sans perte
d'information (marges d'impression à respecter) |
|
| o |
4 |
les images doivent avoir du sens (y compris après réduction de
taille pour adaptation au Web) |
|
| o |
5 |
les galeries d'images doivent utiliser des vignettes |
|
| |
|
Ergonomie |
|
| o |
6 |
une page d'aide doit présenter la logique de
navigation au sein du site et les outils nécessaires à une bonne interaction
avec l'internaute |
|
| o |
7 |
un moteur de
recherche doit indexer tous les documents du site |
|
| o |
8 |
les documents
d'archive doivent comporter la dénomination "archive"
dans leur titre (title du document) |
|
| o |
9 |
le moteur de recherche doit être disponible en début
de page sur l'ensemble des pages du site (fonctions
recherche rapide + avancée) |
|
| o |
10 |
éviter de mettre des
majuscules à mauvais escient (ne pas utiliser les majuscules pour accentuer
l'importance d'un mot) |
|
| o |
11 |
autant que possible, respecter les lettres majuscules accentuées, notamment pour les noms propres |
|
| o |
12 |
la page ne doit pas comporter d'ascenseur horizontal (en
résolution 800x600) |
|
| o |
13 |
en résolution
800x600, les éléments essentiels
doivent apparaître sans
utiliser le défilement vertical |
|
| o |
14 |
éviter les liens sans
fonction explicite (ex : logo de l'entreprise = lien vers la page d'accueil) |
|
| o |
15 |
mettre en valeur les
fonctions principales du site afin que la page d'accueil puisse jouer son
rôle de point d'orientation |
|
| o |
16 |
différencier dans la charte graphique la page
d'accueil des autres pages (variante graphique
cohérente) |
|
| o |
17 |
séparer clairement dans l'organisation des pages, le contenu, les services, les infos
institutionnelles et les liens fonctionnels du site (blocs) |
|
| o |
18 |
lorsque des icônes de navigation sont utilisés, ils
doivent être évocateurs |
|
| o |
19 |
utiliser des terminologies courantes (pour des
services, contenus, … identiques au sein des sites) |
|
| o |
20 |
le site doit être
pensé afin de présenter une arborescence claire et logique (pas de rubricage trop horizontal ou trop vertical) |
|
| |
|
Multimédia |
|
| o |
21 |
les contenus
multimédias doivent être mis en œuvre afin de limiter le
temps de chargement |
|
| |
|
Liens |
|
| o |
22 |
la couleur
des liens visités doit être différente de la couleur des liens non sollicités, afin d'aider la
navigation |
|
| |
|
Formulaires et
téléservices |
|
| o |
23 |
vérifier que le temps d'une session est suffisamment long pour que le formulaire puisse être rempli par tous (personnes à
mobilité réduite) |
|
| o |
24 |
dans le cas d'un
formulaire non validé, les informations saisies doivent
être maintenues (gestion de session par cookie) |
|
| o |
25 |
les contrôles de champs doivent être réguliers (découper le formulaire en plusieurs pages, avec un
contrôle à chaque étape/page) |
|
| o |
26 |
pour les formulaires
sur plusieurs pages, présenter le nombre de pages de la téléprocédure et le temps moyen nécessaire (ex :
"étape 1/5") |
|
| o |
27 |
l'utilisateur doit
pouvoir interrompre sa déclaration en cours sans perdre les informations
déclarées (mémorisation des sessions login/mdp) |
|
| o |
28 |
les informations d'aide ou l'accès aux aides externes
doivent être consultables à chaque étape depuis la même zone graphique (doc, tél) |
|
|
| Légende
: |
|
|
|
Prio. |
priorité ou niveau WCAG ou ADAE/Accessiweb |
|
|
AA |
priorité WCAG |
|
|
|
niveau Bronze ADAE/Accessiweb |
|
|
|
niveau Argent ADAE/Accessiweb |
|
|
|
niveau Or ADAE/Accessiweb |
|
|
| Copyright
(c) 2006 Hervé Chuzeville -
herve @ chuzeville . com |
|
| Ce
document est mis à disposition selon le Contrat
"Paternité-NonCommercial-ShareAlike 2.0 France" disponible en ligne |
|
| http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ |
|
| ou
par courrier postal à Creative Commons, 559 Nathan Abbott Way, Stanford,
California 94305, USA. |
|
| Les
critères AccessiWeb et la méthode de test d'accessibilité AccessiWeb sont la
propriété de BrailleNet ; les critères ADAE sont la propriété de l'ADAE. |
|
|
|
|
|
|