|
|
|
Liste synthèse des critères
d'accessibilité Accessiweb/RGAA
- version : HC 1.0.1 du 10/12/2007 |
|
|
|
|
|
|
|
|
|
|
| page
: |
|
http:// |
|
|
|
|
| þ |
n° |
Niv. |
Critères |
RGAA |
08 |
09 |
10 |
Auto |
WCAG |
WCAG1.0 |
| |
|
|
Images, éléments
graphiques |
|
|
|
|
|
|
|
| o |
1.1 |
Br. |
renseigner l'attribut
alt pour les img, area shape, input type="image", applet (y compris pour un affichage par du code javascript / lors de
màj) |
1.1.1,
1.1.13, 6.2.2, 6.2.3 |
O |
O |
O |
Semi |
A |
1.1 |
| o |
1.2 |
Br. |
l'attribut alt
doit être approprié au contexte de l'image (valeur décorative, illustrative ou fonctionnelle) :
alt="*" pour puce à valeur décorative, mais alt="puce
jaune" sur un site de téléchargement de puces |
1.1.5 |
|
O |
O |
Semi |
A |
1.1 |
| o |
1.3 |
Br. |
alt="" pour les images décoratives, sans valeur informative (y compris image cliquable doublonnant
un lien texte qd les 2 dans le même <a>) |
1.1.2,
1.1.3, 1.1.15 |
O |
O |
O |
Semi |
A |
1.1 |
| |
1.4 |
Br. |
mettre un maximum de 60 caractères dans l'attribut alt
(vérifier quand plus de 5-6 mots), sauf images-liens considérées comme liens |
1.1.14 |
|
|
|
Semi |
A |
1.1 |
| |
1.8 |
Br. |
le alt de chaque image contenant du texte doit être au moins équivalent au texte inscrit
dans l'image (peut en contenir plus) |
|
|
|
|
|
A |
1.1 |
| o |
1.9 |
Ar. |
privilégier un texte
mis en forme (CSS) à un texte sous forme d'image (à éviter) |
3.1.1 |
|
|
O |
Semi |
AA |
3.1 |
| o |
1.10 |
Br. |
utiliser un
commentaire lorsqu'une image nécessite une description détaillée (longdesc + lien desc. détaillée, ou légende - graphe, groupe...) |
1.1.7 |
|
|
O |
Semi |
A |
1.1 |
| o |
1.11 |
Br. |
si on a une description détaillée d'une image
(longdesc, …), elle doit être pertinente et apporter un plus par rapport au alt |
1.1.8 |
|
|
O |
Semi |
A |
1.1 |
| o |
1.12 |
Br. |
pour les liens en images, le alt doit donner la fonction du lien (ex :
alt="suivant" et non alt="flèche droite" ; destination ou action) |
1.1.4,
1.1.6 |
|
O |
O |
Semi |
AA |
13.1 |
| |
1.13 |
Or |
la taille
des images doit être appropriée
au contexte (trop gros/petit ; ex : apparition
ascenseur alors qu'une plus petite donne même info) |
|
|
|
|
|
AAA |
14.3 |
| |
|
|
Images map |
|
|
|
|
|
|
|
| o |
1.5 |
Br. |
utiliser des alt pour : chacune
des area d'une image map (+ title), ainsi que pour l'image map (usemap ; ismap : liens redondants à côté !) |
1.2.1,
1.2.2, 9.1.1 |
|
O |
O |
Semi |
A |
1.1, 1.2, 9.1 |
| |
1.6 |
Ar. |
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 |
| |
1.7 |
Ar. |
les zones réactives des images map doivent
être définies juste après
la déclaration de l'image
map |
|
|
|
|
|
AA |
12.3 |
| |
|
|
Cadres |
|
|
|
|
|
|
|
| o |
2.1 |
Br. |
renseigner l'attribut
name (sans espace) pour les cadres
(frames, iframes --> title), ainsi
que l'attribut src qui
doit pointer vers une page |
6.2.1,
12.1.1, 12.2.1 |
O |
O |
O |
Semi |
AA |
12.1 |
| o |
2.2 |
Br. |
les noms donnés aux cadres doivent être pertinents (fonction : menu,
navigation, contenu, plutôt que localisation : gauche, milieu, ...) |
12.1.2 |
O |
O |
O |
Semi |
A |
12.1 |
| o |
2.3 |
Br. |
renseigner la balise
alternative noframes [et donner
une alternative aux iframe] |
6.5.1,
6.5.2 |
|
O |
O |
Semi |
AA |
6.5 |
| |
2.4 |
Br. |
le contenu de la
balise noframes doit être pertinent (intégralité des liens de tous les frames / vers pages
et fonctionnalités essentielles) |
|
|
|
|
|
AA |
6.5 |
| |
2.5 |
Br. |
renseigner l'attribut
title (nom
: description + position hiérarchique éventuelle par
rapports aux autres) |
|
|
|
|
|
A |
12.1 |
| |
2.6 |
Br. |
l'attribut title doit être pertinent (fonction, rôle du cadre) |
|
|
|
|
|
A |
12.1 |
| |
2.7 |
Ar. |
l'attribut longdesc doit être présent pour
expliquer l'interaction entre les cadres (pour
les iframes uniquement si interaction entre) |
12.2.2 |
|
|
|
Semi |
AA |
12.2 |
| |
2.8 |
Ar. |
l'attribut longdesc
doit être pertinent |
12.2.3 |
|
|
|
Semi |
AA |
12.2 |
| |
2.9 |
Br. |
il doit y avoir un maximum de 3
cadres dans la page |
|
|
|
|
|
AA |
13.4 |
| o |
2.10 |
Br. |
le défilement des cadres doit être automatique ("scrolling" à
"auto" ou "yes") et ils doivent
être redimensionnables
(pas de "noresize") |
3.4.4,
3.4.5 |
O |
O |
O |
Auto |
AA |
14.3 |
| |
|
|
Couleurs |
|
|
|
|
|
|
|
| o |
3.1 |
Br. |
lorsque
les couleurs sont désactivées, l'information donnée par la
couleur doit toujours être lisible (daltoniens,
malvoyants) : astérisque en plus pour les champs obligatoires, hachures et
points pour un camembert |
2.1.1,
2.1.2, 2.1.3, 2.1.4, 2.1.5 |
O |
O |
O |
Semi |
A |
2.1 |
| o |
3.2 |
Br. |
les différences de contrastes entre les
couleurs doivent être suffisamment élevées (+ éviter : r/b, j/violet, j/v, …) ; ratio
de luminosité >= 4 |
2.2.1,
2.2.2, 2.2.3 |
|
O |
O |
Semi |
AAA |
2.2 |
| |
|
|
Multimédia |
|
|
|
|
|
|
|
| o |
4.1 |
Br. |
lorsqu'un support
multimédia fournit de l'information, il faut prévoir une
alternative (ex : fichier RTF, TXT, HTML ; paroles +
descript. complets) |
1.1.9,
1.1.10, 1.1.11, 1.1.12, 6.3.1 |
|
|
O |
Semi |
A |
1.3 |
| o |
4.2 |
Br. |
Le
contenu multimédia doit être synchronisé avec son alternative (utilisation du langage SMIL :
sous-titrages mis en forme
+ audio description) (dés)activable et pertinente,
et doit être éventuellement sous-titré en langue des signes française |
1.3.1,
1.3.2, 1.3.3, 1.4.1, 1.4.2, 1.4.3, 1.4.4 |
|
|
O |
Semi |
A |
1.4 |
| |
|
|
Tableaux |
|
|
|
|
|
|
|
| o |
5.1 |
Br. |
renseigner
l'attribut summary des tableaux
(ex : température des 5 premiers jours de la semaine pour les villes de Paris
et Toulouse ; <> titre ; summary = "" pour les tableaux de
mise en forme) |
5.5.2,
5.5.3 |
|
|
O |
Semi |
AAA |
5.5 |
| o |
5.2 |
Br. |
donner un titre à
chaque tableau de données en utilisant la balise caption (ex : températures de la semaine en fonction de la ville) |
5.5.1 |
|
|
O |
Semi |
AAA |
5.1 |
| o |
5.3 |
Br. |
identifier les
entêtes de colonnes (et lignes) d'un tableau de données avec la balise th (et éventuellement thead) |
5.1.1 |
O |
O |
O |
Semi |
A |
5.1, 5.4 |
| o |
5.4 |
Br. |
relier le contenu d'une cellule à son entête de colonne avec headers et id (ou scope pour entrée simple), dans un tableau de données |
5.2.1,
5.2.2 |
O |
O |
O |
Semi |
A |
5.2 |
| o |
|
|
utiliser correctement
thead, tbody, tfoot, colgroup |
5.2.3 |
|
|
O |
Semi |
A |
|
| |
5.5 |
Ar. |
lorsqu'un titre de colonne fait plus de 15 caractères, utiliser
l'attribut abbr (ex :
"Marque du véhicule" + abbr="marque") pertinent |
5.6.1,
5.6.2, 5.6.3 |
|
|
|
Semi |
AAA |
5.6 |
| o |
5.6 |
Br. |
privilégier
les CSS aux tableaux de mise en forme, sinon les infos
doivent être affichées dans le même ordre en lecture linéaire et les éléments
propres aux tableaux de données ne doivent pas être détournés |
5.3.1,
5.3.2, 5.4.1 |
O |
O |
O |
Semi |
AA |
5.3 |
| |
|
|
Liens |
|
|
|
|
|
|
|
| |
6.1 |
Br. |
l'intitulé des liens
doit faire un maximum de 80 caractères (accent = 1 caractère ;
vérifier quand plus de 7-8 mots ; 79 caractères en v1.1) |
13.1.5 |
|
|
|
Semi |
AA |
13.1 |
| o |
6.2 |
Br. |
les liens doivent
être explicites et compréhensibles hors du contexte de la page (éviter "cliquer ici" ; préciser "en
savoir plus sur …") |
13.1.4 |
O |
O |
O |
Auto |
AA |
13.1 |
| o |
6.3 |
Br. |
donner
un title d'un maximum de 80 caractères, si nécessaire
(liens identiques ; fichier téléchargeable : titre, taille, format, logiciel
; title (optionnel) = alt pour lien-image ; 79 caractères en v1.1) |
13.1.1 |
|
O |
O |
Semi |
AA |
6.3 |
| o |
6.4 |
Br. |
le title
du lien doit fournir plus d'informations que l'intitulé du lien lui-même (mais y compris l'intitulé ; ex : "Aide
(nouvelle fenêtre)") |
13.1.2 |
|
O |
O |
Semi |
AA |
13.1 |
| o |
6.5 |
Br. |
chaque
intitulé de lien identique doit amener vers une seule et même destination (ex : éviter 5 x "lire
l'article" ; title pour différencier) |
13.1.3 |
O |
O |
O |
Semi |
AA |
13.1 |
| |
6.6 |
Or |
dans l'arborescence
du site, il doit y avoir au maximum 9 catégories par niveau de navigation |
|
|
|
|
|
AAA |
14.3 |
| |
6.7 |
Or |
il doit y avoir un maximum de 40 liens actifs dans la page, hors liens nécessaires à la navigation |
|
|
|
|
|
AAA |
13.5, 13.6 |
| o |
|
|
les liens doivent être présentés
différemment du reste du texte de la page, et
doivent être séparés au
minimum par un espace |
10.5.3,
10.5.4 |
|
|
O |
Semi |
AAA |
|
| |
|
|
Scripts |
|
|
|
|
|
|
|
| o |
7.1 |
Br. |
l'info donnée par l'alternative, si nécessaire, d'un script
(désactivé) doit être équivalente à celle du script (ex : contrôle de saisie
serveur) |
6.3.2 |
|
O |
O |
Semi |
A |
6.2, 6.3, 8.1 |
| o |
7.2 |
Br. |
des
actions doivent pouvoir être accomplies, même lorsque le périphérique pour lequel elles sont
prévues est désactivé
(souris --> clavier ; onmouseover, menus et listes déroulants -->
noscript ; formulaires --> accesskey) |
6.4.1,
6.4.2 |
|
|
O |
Semi |
AA |
6.4, 9.2, 9.3 |
| o |
|
|
la
page modifiée par le
déclenchement d'un script doit rester accessible, l'utilisateur doit être averti de façon textuelle d'une màj
suite à son action, le focus doit être ramené sur ou juste avant l'indication de màj et il
doit pouvoir accéder au contenu mis à jour par un lien |
6.5.3,
6.5.5 |
|
|
O |
Semi |
AA |
|
| |
|
|
les boutons précédent/suivant doivent permettre la navigation
à l'état précédent la màj et le retour à l'état màj après une màj XMLHttpRequest |
6.5.7 |
|
|
|
Semi |
AA |
|
| o |
|
|
l'information d'un js avec
gestionnaires d'événements sans équivalent universel, ou propriétés propres à
un périphérique doit avoir une alternative |
9.3.1 |
|
|
O |
Semi |
AA |
|
| |
|
|
Eléments obligatoires |
|
|
|
|
|
|
|
| o |
8.1 |
Br. |
utiliser la balise doctype pour spécifier le type du
document électronique (au début du code source conforme
à une DTD recommandée) |
3.2.1,
3.2.2, 3.2.3, 3.2.4 |
O |
O |
O |
Semi |
AA |
3.2 |
| o |
8.2 |
Br. |
spécifier l'attribut lang dans la balise html pour indiquer la langue utilisée (et le sens de lecture si de droite à gauche) |
4.3.1,
4.3.2 |
O |
O |
O |
Semi |
AAA |
4.3 |
| o |
8.3 |
Ar. |
renseigner les
éléments de description d'un page Web meta, charset, link, … (en Europe de l'ouest : ISO-8859-1 pour charset) |
13.2.4,
13.2.5 |
O |
O |
O |
Semi |
AA |
13.2 |
| o |
8.4 |
Br. |
le title d'une page Web doit être renseigné (60 à 80 caractères maximum
conseillés) |
13.2.1,
13.2.2 |
O |
O |
O |
Auto |
AA |
13.2 |
| o |
8.5 |
Br. |
le title d'une page
Web doit être explicite |
13.2.3 |
|
|
O |
Semi |
AA |
13.2 |
| |
8.6 |
Br. |
le title d'une page
Web doit être unique (ex :
résultat d'une recherche : résultats 1 à 10, 11 à 20, ...) |
|
|
|
|
|
AA |
13.2 |
| o |
8.7 |
Br. |
les changements de langue
(lang="…") et de sens de lecture (dir) dans un doc. électronique doivent être
spécifiés (langue origine du mot) |
4.1.1,
4.1.2, 4.1.3, 4.1.4 |
|
O |
O |
Semi |
AA |
4.1 |
| |
|
|
Structuration de
l'information |
|
|
|
|
|
|
|
| |
9.1 |
Br. |
la structuration de l'information doit être cohérente par rapport au contexte général du site (pas de pub au milieu du texte sans prévenir) |
|
|
|
|
|
A |
14.1 |
| o |
9.2 |
Br. |
une page doit
posséder une structure cohérente (utiliser 1 seul h1 (oblig.), h2,
…pour leur fonction 1ère ; les blocs d'infos doivent être distincts) |
3.5.1,
3.5.2, 3.5.3, 3.5.4, 3.5.5, 3.6.4 |
O |
O |
O |
Semi |
AA |
3.5, 13.8 |
| o |
|
|
ne pas utiliser de simulation
visuelle de liste non ordonnée (-, #, *, …) |
3.6.1 |
|
O |
O |
Semi |
AA |
|
| o |
|
|
prévoir un style de secours pour les listes avec images dans les feuilles de styles (définir list-style-type) |
3.6.2 |
|
O |
O |
Auto |
AA |
|
| o |
|
|
utiliser systématiquement des listes
ordonnées pour les énumérations |
3.6.3 |
|
|
O |
Manu |
AA |
|
| o |
|
|
dans les listes de définitions dl, chaque définition dd doit être précédée (de façon
immédiatement ou non) d'un élément dt qu'elle définit |
3.6.5,
3.6.6 |
|
O |
O |
Semi |
AA |
|
| o |
|
|
les citations doivent être balisées (q pour une citation courte, blockquote pour un bloc) et la source doit être donnée (cite) si elle est en ligne |
3.7.1,
3.7.2, 3.7.3 |
|
|
O |
Manu |
AA |
|
| o |
9.3 |
Ar. |
il doit y avoir un plan du site fonctionnel, avec toute l'arborescence (liens concis, précis et lisibles
hors contexte), accessible depuis l'accueil |
13.3.1,
13.3.2, 13.3.3 |
|
O |
O |
Manu |
AA |
13.3 |
| |
9.4 |
Ar. |
une page d'aide expliquant les principes de
navigation à l'intérieur du site Web doit être présente (raccourcis claviers,
…) |
|
|
|
|
|
AA |
13.3 |
| |
9.5 |
Ar. |
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 |
| |
9.6 |
Ar. |
un site Web doit
posséder un moteur de recherche interne au site |
|
|
|
|
|
AA |
13.3 |
| |
9.7 |
Ar. |
le moteur de
recherche doit être atteignable de manière identique quelle que soit la page Web visitée |
|
|
|
|
|
AA |
9.5, 13.4 |
| |
9.8 |
Or |
la page de moteur de
recherche doit comporter : nbr max. de réponses par page,
nbr total de réponses, éléments de navigation |
|
|
|
|
|
AAA |
13.7, 13.9 |
| |
|
|
le moteur doit
proposer : résultats alternatifs
du même thème ou recherche par mot clef prédéfini ou tolérance de
l'orthographe approximative |
13.7.1 |
|
|
|
Manu |
AAA |
|
| |
|
|
Présentation de
l'information |
|
|
|
|
|
|
|
| o |
10.1 |
Br. |
le contenu d'une page
doit être séparé de sa présentation (bannir : bgcolor,
font, align, b, i, … à définir en CSS ) |
3.3.1 |
O |
O |
O |
Auto |
AA |
3.3 |
| |
|
|
le style de présentation des blocs
d'information et de navigation doit être homogène sur tout le site |
14.3.1 |
|
|
|
Manu |
AAA |
|
| o |
10.2 |
Br. |
l'information doit être identique lorsqu'on désactive la mise en forme spécifiée pour cette information (feuille de style) |
6.1.1,
6.1.2, 6.1.3, 6.1.4 |
|
O |
O |
Semi |
A |
6.1 |
| |
10.3 |
Br. |
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 |
Ar. |
la dimension des éléments structurels d'une page doit être définie en relatif (taille des tableaux, des polices
(hormis px), div : %, em ou px) |
3.4.1,
3.4.2 |
|
O |
O |
Semi |
AA |
3.4 |
| |
10.5 |
Ar. |
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 |
| |
|
|
le document doit
rester lisible sans perte d'info
avec la taille du texte la plus grande dans IE ou 2 augmentations de taille dans FF |
3.4.3 |
|
|
|
Manu |
AA |
|
| |
10.6 |
Ar. |
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 |
Br. |
les champs de saisie
d'un formulaire doivent être reliés à leurs textes explicatifs respectifs (spécifier label,
id et for) |
12.4.1,
12.4.2 |
O |
O |
O |
Semi |
AA |
10.2, 12.4 |
| o |
11.2 |
Ar. |
les
textes associés aux champs de saisie des formulaires doivent
être explicites et donner
leur fonction exacte + pas de champ vide comme choix par défaut |
12.4.3 |
O |
O |
O |
Semi |
AA |
12.3 |
| |
11.3 |
Ar. |
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 associé placé avant et aligné à droite ; le texte descriptif doit être
placé aussi avant le bouton radio) |
10.2.1 |
|
|
|
Semi |
AA |
10.2, 12.3 |
| o |
11.4 |
Ar. |
les blocs d'info de
même nature doivent être clairement identifiés (utiliser fieldset pour état civil qui regroupe nom, prénom, naissance) |
12.3.1 |
|
|
O |
Semi |
AA |
12.3 |
| o |
11.5 |
Ar. |
un titre pertinent doit être présent pour chacun
des blocs d'info d'un formulaire (utiliser la balise legend associée à fieldset) |
12.3.2,
12.3.3 |
O |
O |
O |
Semi |
AA |
12.3 |
| |
11.6 |
Br. |
le commentaire
du bouton de validation d'un formulaire doit être pertinent ("valider le formulaire",
"lancer la recherche" plutôt que "Ok") |
|
|
|
|
|
A |
1.1 |
| |
11.7 |
Br. |
le
contrôle de saisie des champs doit être accessible à tous (alternative
à un script de validation sur le client par un script serveur ; spécifier les
champs obligatoires de manière explicite en début ("les champs précédés
d'une étoile sont tous obligatoires") ; éviter de faire ressortir les
champs obligatoires uniquement par une couleur ; ne pas effacer les champs
déjà remplis en cas d'erreur ) |
|
|
|
|
|
A |
6.3, 6.5 |
| |
11.8 |
Ar. |
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 |
| o |
|
|
dans une liste déroulante (select), regrouper
les éléments (option) de même nature dans un élément optgroup (+ attribut label pertinent) |
12.3.4,
12.3.5, 12.3.6 |
O |
O |
O |
Semi |
AA |
|
| |
|
|
Aide à la navigation |
|
|
|
|
|
|
|
| |
12.1 |
Ar. |
la navigation dans l'ensemble des pages d'un site Web doit être cohérente (homogène) |
|
|
|
|
|
AA |
13.4, 14.3 |
| o |
12.2 |
Br. |
le menu principal de navigation interne dans un site Web doit toujours
être présent à la même place et sous la même forme dans les pages |
13.4.1,
13.4.2, 13.4.3 |
|
|
O |
Manu |
AA |
13.4 |
| o |
12.3 |
Or |
des barres de navigation qui facilitent
l'accès pour la navigation interne doivent être présentes (menu, barre de bas
de page, fil d'Ariane) |
13.3.4,
13.5.1, 13.5.2, 13.9.1 |
|
O |
O |
Semi |
AAA |
13.5 |
| o |
|