| Numéro |
Niveau de Label |
Intitulé du critère |
Commentaires du critère |
1. Eléments graphiques. |
| 1.1 |
|
Chaque élément graphique possède-t-il une alternative textuelle ? |
En HTML, l'attribut ALT doit être associé aux balises IMG et AREA SHAPE… Il est important de donner une alternative textuelle aux éléments graphiques car certains navigateurs ou lecteurs d'écran ne peuvent les interpréter ou les afficher de manière traditionnelle. |
| 1.2 |
|
Pour chacune des images de la page ayant une alternative, les textes dans l'attribut ALT sont-ils appropriés par rapport au contexte dans lequel l'image se trouve ? |
Une même image peut avoir plusieurs sens. C'est le contexte qui l'entoure qui va préciser ce sens. Par exemple, une "puce jaune" dans un site journalistique devrait être commentée par ALT="" ou ALT="*". Cette même "puce jaune", dans un site de téléchargement d'éléments de décoration pour sites Web, devrait être commentée par sa description : ALT="losange jaune". |
| 1.3 |
|
Les éléments graphiques destinés à la décoration sont-ils commentés par ALT="" ? |
Certains éléments graphiques n'ont pas de valeur informative. C'est souvent le cas des pixels transparents qui servent uniquement à la mise en page. Or, tout élément graphique doit impérativement être commenté. Donc, les éléments graphiques servant à la mise en page doivent être commentés par une alternative textuelle nulle (En HTML, ALT=""). Avec ce type de commentaire, certains navigateurs n'afficheront pas ces images. |
| 1.4 |
|
Pour chacune des images de la page, les textes dans l'attribut ALT font-ils moins de 60 caractères ? |
Mettre un maximum de 60 caractères dans l'attribut ALT. Des alternatives textuelles données par l'attribut ALT peuvent gêner certains utilisateurs. C'est le cas des personnes malvoyantes qui utilisent un agrandisseur d'écran. Pour ces personnes, il est important de limiter le nombre de caractères dans les commentaires d'images pour ne pas les obliger à effectuer trop de manipulations pour obtenir la totalité de l'information contenue dans l’attribut ALT. |
| 1.5 |
|
Les commentaires associés à chacune des zones réactives d'une image map sont-ils pertinents ? |
Définition : Une image MAP est une image possédant des zones réactives cliquables. En HTML, lors de l’utilisation d’une "image MAP" (côté client ou côté serveur), il est important de proposer une alternative textuelle explicite à l’ensemble de ces zones réactives mais également à l’image MAP (image contenant l'attribut "USEMAP" ou "ISMAP"). - Pour l'image MAP côté client, il convient de donner une alternative textuelle explicite par l'intermédiaire de l'attribut ALT dans chacune des zones réactives ("AREA SHAPE"). - Pour l'image MAP côté serveur, prévoir des liens textuels redondants reprennant le contenu de chacune des zones réactives. Remarque 1 : l'alternative textuelle de l'image contenant l'attribut "USEMAP" ou "ISMAP" ne doit pas être nulle. Remarque 2 : Il est recommandé d'utiliser des images MAP côté client plutôt que coté serveur. |
| 1.6 |
|
Les zones de chacune des images MAP sont-elles ordonnées de manière logique ? |
Pour la liste des départements français, par exemple, il est préférable de les classer par ordre alphabétique. Avec certaines aides techniques, les zones réactives d'une "image MAP" se lisent linéairement. Si les zones réactivent d'une image MAP représentent une liste non ordonnée (les départements français par exemple), certains utilisateurs ne pourront pas choisir un élément d'une telle liste aisément. |
| 1.7 |
|
Pour chacune des images MAP, les zones de l'image MAP sont-elles définies juste après la déclaration de l'image MAP ? |
Lorsque les zones réactives d’une image MAP ne sont pas codées immédiatement après la déclaration de l’image MAP, un utilisateur parcourant linéairement la page lira le commentaire général de l’image (image possédant l'attribut USEMAP), puis il lira le contenu de la page et lira enfin les commentaires associés aux zones réactives (AREA SHAPE) si celles-ci sont codées en fin de page. Dans cet exemple, l’accès linéaire à l’information ne correspond pas à sa présentation visuelle. |
| 1.8 |
|
Pour chacune des images texte de la page, le contenu de son alternative est-il au moins équivalent au texte inscrit dans l'image ? |
Il n'est pas recommandé de créer du texte sous forme d'image. Néanmoins, si une contrainte graphique s'impose (rendu CSS non équivalent), l'information minimum à apporter à l'alternative textuelle d'un élément graphique contenant du texte doit reprendre le contenu exact de ce texte. L'alternative textuelle peut donner quelques informations supplémentaires mais doit au moins en reprendre le contenu exact. |
| 1.9 |
|
Il convient de remplacer un texte sous forme d'image par un texte mis en forme. Cette règle est-elle respectée ? |
Il est très souvent aisé de mettre du texte en forme par l'intermédiaire d’une feuille de style plutôt que de mettre du texte sous forme d'image, tout en gardant le même aspect graphique. A part le cas de contraintes graphiques strictes où il ne sera pas possible de transformer de façon équivalente le texte mis sous forme d'image, l'application de cette recommandation va permettre à un utilisateur malvoyant, par exemple, d’interagir avec la taille des caractères pour lire plus aisément les informations. Un texte dans une image empêchera cette option. |
| 1.10 |
|
Quand une image nécessite une description détaillée, un commentaire texte lui est-il associé ? |
En HTML, lorsqu'un élément graphique nécessite une description longue (image complexe, alternative dépassant 60 caractères...), il faut lui associer un commentaire textuel. Sous la forme d'un lien vers un fichier de description (par exemple, un "D-link", une image cliquable...) ou d' une légende directement écrite dans la page ou de l'attriut LONGDESC... |
| 1.11 |
|
Si une description détaillée de l'image est présente, son contenu est-il pertinent ? |
Le contenu doit apporter un plus à la description de l'image définie dans l'attribut ALT. |
| 1.12 |
|
Pour chacune des images liens, le texte contenu dans l'attribut ALT donne-t-il la fonction du lien ? |
La description des images n'est pas toujours conforme à la fonction du lien. (Ex : pour une flèche, si c'est un lien, mettre ALT="Suivant" au lieu de ALT="Flèche droite"). Et éviter de mettre ALT="" par exemple, qui renvoie une information nulle sur la fonction du lien. |
| 1.13 |
|
Est-ce que la taille utilisée pour chacune des images est appropriée par rapport au contexte dans lequel elle se trouve ? |
Par exemple, il peut s'agir d'une image dont la taille va provoquer l'apparition d'un ascenseur horizontal alors qu'une taille plus réduite aurait fourni une information équivalente. |
2. Cadres. |
| 2.1 |
|
Y a-t-il un attribut NAME ? |
En HTML, chaque cadre doit être nommé par l'intermédiaire de l'attribut NAME. La navigation dans des pages construites à partir de cadres peut se révéler complexe, notamment pour des personnes non voyantes qui prennent connaissance du contenu du site cadre après cadre (à la différence des personnes voyantes qui ont une vue d’ensemble du site). Remarque : le contenu de l'attribut NAME ne doit pas comporter d'espace. |
| 2.2 |
|
Les noms donnés aux cadres sont-ils pertinents ? |
Il est nécessaire de donner des noms pertinents aux cadres qui composent la page : éviter de nommer les cadres avec des données géographiques comme "gauche", "droite", "milieu". Il est préférable de nommer les cadres avec des noms explicites qui se réfèrent à leur fonction tels que "Menu", "navigation", "contenu". |
| 2.3 |
|
Y a t-il une balise NOFRAME ? |
En HTML, la balise NOFRAME permet de renseigner l'internaute sur les principaux liens existants sur le site, notamment lorsque l'internaute utilise un navigateur qui ne gère pas les cadres. |
| 2.4 |
|
Le contenu de la balise NOFRAME est-il pertinent ? |
La balise NOFRAME peut être présente sans que l'information qu'elle contient soit réellement explicite. Dans de nombreux cas, la balise NOFRAME est présente mais donne des informations non appropriées ou incomplètes. Cette balise doit comporter les principaux liens existant sur le site. |
| 2.5 |
|
Y a-t-il un attribut TITLE ? |
En HTML, l’attribut TITLE permet de décrire en quelques mots l’utilité du cadre auquel il se rattache. Il est un complément de l'attribut NAME. |
| 2.6 |
|
L'attribut TITLE est-il pertinent ? |
Pour les aides techniques reconnaissant cet attribut, sa présence permet à un utilisateur navigant cadre par cadre, indépendamment des autres, de connaître la fonction de ce cadre. |
| 2.7 |
|
L'attribut LONGDESC est-il présent pour expliquer l'interaction entre les cadres ? |
L’attribut LONGDESC permet de définir dans un fichier annexe l’interaction des cadres les uns par rapport aux autres par exemple. |
| 2.8 |
|
L'attribut LONGDESC est-il pertinent ? |
Pour les aides techniques reconnaissant cet attribut LONGDESC, sa présence permet à un utilisateur navigant de cadres en cadres indépendamment des autres de comprendre plus facilement comment naviguer de cadres en cadres. |
| 2.9 |
|
Y a-t-il un maximum de trois cadres dans la page ? |
Il est important de ne pas dépasser un nombre maximum de trois cadres pour une page Web. Au-delà de trois cadres, la lecture de la page devient difficile notamment pour les utilisateurs d'aides techniques. |
| 2.10 |
|
Lorsqu'il y a des cadres, le défilement ("scrolling" en anglais) est-il automatique ? |
En HTML, lorsque que le défilement d’un cadre est défini à "NO", celui-ci n’est plus redimensionnable. Le défilement doit être rendu possible. Pour des utilisateurs qui utilisent un Zoom d’écran, leur propre feuille de style avec des tailles de caractères importantes etc., le fait d’empêcher l’apparition d’un ascenseur pour naviguer dans le cadre provoque obligatoirement une perte d’information. |
3. Couleurs. |
| 3.1 |
|
L'information donnée par la couleur est-elle aussi lisible lorsque les couleurs sont désactivées ? |
Les concepteurs de sites web doivent être vigilants concernant toute information fournie par de la couleur. En effet, cette information perd tout son sens pour des personnes malvoyantes ou daltoniennes qui n'ont qu'une vue très partielle des couleurs. |
| 3.2 |
|
Les différences de contrastes entre les couleurs sont-elles suffisamment élevées ? |
Il est conseillé d'éviter certaines combinaisons de couleurs comme le rouge avec le bleu, le jaune avec le violet, le jaune avec vert... Lorsque les différences de couleurs dans la page ne sont pas assez élevées, les informations fournies par le biais de ces couleurs ne vont pas être accessibles pour les personnes malvoyantes ou les personnes ayant des problèmes de vision des couleurs. |
4. Multimédia. |
| 4.1 |
|
Est-il possible de récupérer les informations fournies dans les supports multimédias d'une autre manière ? |
Lorsque qu’un support multimédia fournit de l’information il est important de prévoir une alternative pour les personnes n’ayant pas accès à ce support multimédia. Par exemple, lorsqu'un fichier son est proposé sur un site, il est important de fournir une alternative sous forme d'un texte dans un format accessible (RTF, TXT, HTML...). |
| 4.2 |
|
Le contenu multimédia est-il synchronisé avec son alternative ? |
Lorsqu'une vidéo, avec du son parexemple, restitue l'interview de plusieurs personnes, il est important que l'alternative qui est donnée soit synchronisée avec l'image et le son. Le W3C préconise alors l'utilisation du langage de programmation SMIL. |
5. Tableaux. |
| 5.1 |
|
L'attribut SUMMARY est-il présent et pertinent ? |
L'attribut "SUMMARY", s'il est correctement rempli, peut donner une information supplémentaire sur l'utilisation des tableaux dans une page Web pour certains internautes, aveugles par exemple. Dans une page qui contient une barre de menu, créée à partir d'un tableau HTML, l'attribut SUMMARY="Barre de menu" va donner à l'utilisateur une indication supplémentaire sur la fonction de ce tableau. |
| 5.2 |
|
Dans un tableau de données, la balise CAPTION est-elle utilisée pour donner un titre au tableau ? |
Plutôt que d’utiliser un texte mis en forme pour titrer un tableau, il est plus judicieux d’utiliser la balise CAPTION, qui est la balise dédiée pour afficher un titre dans un tableau. |
| 5.3 |
|
Dans les tableaux de données, y a t-il des en-têtes de colonnes appropriés ? |
Dans un tableau de donnée, en HTML, la balise TH spécifie les en-têtes de colonnes et permet aux utilisateurs d’aides techniques de savoir par l'intermédiaire de la synthèse vocale qu’il s’agit d’un en-tête de colonne. |
| 5.4 |
|
Dans un tableau de données, y a t-il un attribut HEADERS présent pour relier chacune des cellules du tableau ? |
Correctement placé dans un tableau de données, les attributs HEADERS et ID permettent de relier le contenu d'une cellule au titre de colonne auquel il est associé. L’utilisation des attributs HEADERS et ID permet de lier chaque cellule à l’en-tête qui lui est attaché. Une personne n’ayant qu’une vision linéaire de ce tableau pourra donc en permanence savoir à quel en-tête est attaché la cellule dans laquelle elle se trouve. |
| 5.5 |
|
Dans un tableau de données, lorsqu'un titre de colonne dépasse 15 caractères, l'attribut ABBR est-il utilisé ? |
Un titre de colonne (TH) est long lorsqu'il dépasse 15 caractères. L'attribut ABBR permet à certaines aides techniques de reprendre l'abréviation du titre de colonne pour l'associer à la cellule qui lui fait référence. Il faut veiller à ce que le contenu de l'attribut ABBR soit pertinent et soit en rapport avec le contenu de l'en-tête de colonne auquel il se réfère. Lorsqu'un tableau de données est correctement construit, une synthèse vocale est capable d'indiquer à l'utilisateur à quel titre de colonne se réfère une cellule. Quand le titre de colonne est long (exemple : Marque du véhicule), l'attribut ABBR va obliger la synthèse vocale à n'annoncer que le mot "marque". L'utilisation de l'attribut ABBR permet un confort de lecture supplémentaire pour les utilisateurs de synthèses vocales. |
| 5.6 |
|
Dans un tableau de mise en forme, le contenu est-il correctement ordonné ? |
Dans les tableaux de mise en forme, les informations doivent être ordonnées de telle manière qu'elles puissent être affichées dans un ordre équivalent lors d'une lecture linéaire de la page. L'organisation de l'information à l'intérieur d'un tableau de mise en page doit faire l'objet de beaucoup d'attention. Les outils actuels de développement HTML ont tendance à imbriquer les tableaux les uns dans les autres. Il en résulte parfois des différences entre le rendu visuel de l'information sur un navigateur graphique et le rendu textuel, respectant l'organisation du code HTML, d'un navigateur textuel de type Lynx par exemple. |
6. Liens. |
| 6.1 |
|
L'intitulé des liens fait-il moins de 80 caractères ? |
Rédiger des intitulés de liens hypertextes d'une longueur maximum de 80 caractères, les accents comptant pour un caractère ainsi que les espaces. |
| 6.2 |
|
Les liens sont-ils explicites ? |
Les liens doivent être compréhensibles hors du contexte de la page. Certaines aides techniques donnent la possibilité d'afficher la liste des liens. Ces liens doivent donc être lisibles hors du contexte de la page pour permettre une lecture rapide de l'ensemble des liens. Eviter les liens du type "cliquez ici". |
| 6.3 |
|
Si nécessaire, l'attribut TITLE est-il présent et fait-il moins de 80 caractères ? |
En HTML, l'attribut TITLE s'avère nécessaire lorsqu'une information supplémentaire doit être apportée à un lien. Par exemple, lorsqu'un lien provoque un téléchargement de fichier, l'attribut TITLE peut servir à donner le titre du fichier, sa taille en octets, son format, sa destination ("ouverture dans une nouvelle fenêtre"). |
| 6.4 |
|
L'attribut TITLE donne-t-il plus d'informations concernant le lien que l'intitulé du lien lui-même ? |
Concernant un lien, certains utilisateurs n'auront que l'intitulé du lien ou que le contenu de l'attribut TITLE pour toute information. Il est donc important que le contenu de l'attribut TITLE reprenne au moins l'information contenue dans l'intitulé du lien. Par exemple, "ce lien s'ouvre dans une nouvelle fenêtre" dans un attribut TITLE n'est pas suffisant car l'utilisateur ne connaît pas la destination du lien. Par contre, "Lire l'article sur le tourisme en France (nouvelle fenêtre)" reprend les informations essentielles concernant le lien. |
| 6.5 |
|
Chaque intitulé de lien identique amène t-il vers la même destination ? |
Eviter d'écrire des intitulés de liens comme "lire l'article" plusieurs fois sur la page. Il est important de rédiger des intitulés de liens qui ne soient pas identiques. Pour les personnes qui naviguent de liens en liens pour accélérer leur lecture de la page, des liens courts, explicites et dont la destination du lien apparaît sans ambiguïté, sont une priorité. |
| 6.6 |
|
Dans l'arborescence du site, y a t-il un maximum de 9 catégories par niveau de navigation ? |
Une "catégorie" est un ensemble de 1 à 9 liens. Neuf éléments semblent être le chiffre limite au-delà duquel l'esprit humain mémorise difficilement les informations. |
| 6.7 |
|
Y a-t-il moins de 40 liens actifs dans la page, hors liens nécessaires à la navigation ? |
Les liens de navigation sont par exemple les liens inclus dans la barre de menu. |
7. Scripts. |
| 7.1 |
|
Si un script nécessite une alternative pour être accessible, l'information donnée par cette alternative est-elle équivalente à l'information fournie par le script ? |
Il faut veiller à ce que l'information reste disponible lorsque les scripts sont désactivés. Exemple : pour la validation d'un formulaire par un script JavaScript, l'alternative pourrait être un contrôle de saisie côté serveur. L'utilisation de scripts peut perturber les utilisateurs dont les aides techniques ne gèrent pas ou difficilement les scripts. De plus, certains utilisateurs désactivent volontairement l'exécution des scripts de leur navigateur classique. Il est donc nécessaire de proposer une alternative pour ne pas faire perdre l'information générée par les scripts. |
| 7.2 |
|
Des actions peuvent-elles être accomplies même si le périphérique pour lequel elles sont prévues est désactivé ? |
Certaines fonctionnalités d'un site web, générées par des scripts JavaScript par exemple, ne peuvent être activées que par une action de la souris. Or, certains utilisateurs n'ont pas l'usage de la souris pour naviguer sur un site Web. Il faut également donner la possibilité de naviguer sur le site à l'aide du clavier. |
8. Eléments obligatoires. |
| 8.1 |
|
La balise DOCTYPE est-elle présente au début du code source de la page ? |
Les recommandations internationales WAI suggèrent d’utiliser une DTD (Doctype Definition) appropriée et valide permettant de déterminer le type de document électronique que doit charger le navigateur (document avec frames, document HTML, document XML…). En HTML, l’utilisation de la balise DOCTYPE est ainsi nécessaire pour définir le type de document. |
| 8.2 |
|
L'attribut LANG est-il présent au début du code source de la page pour identifier clairement la langue utilisée ? |
Il est important de spécifier la langue d’un document afin de permettre à certaines aides techniques d’adapter les contenus à ce choix. En HTML, le choix de la langue se fait par l’intermédiaire de l’attribut LANG de la balise "HTML". |
| 8.3 |
|
Des éléments de description de la page sont-ils présentes en début de code source ? |
Les balises de description de page sont les suivants : META, CHARSET... Par exemple, si vous développez un site en Europe de l'ouest, il faut utiliser l'attribut CHARSET suivant : ISO-8859-1. Si la balise CHARSET est absente (ou mal renseignée), la table des caractères utilisée dans la page pourra être mal interprétée par certains navigateurs. |
| 8.4 |
|
Existe-t-il une balise TITLE dans l'en tête de la page ? |
En HTML, le titre d’une page se code par l’intermédiaire de la balise TITLE placée dans l’en tête du document. Les navigateurs vocaux lisent d'abord le titre de la page pour permettre à l'utilisateur de se repérer sur le site. Pour ceux qui ont des problèmes d'attention, le titre est un support permanent. Cette balise permet également un meilleur référencement de votre site auprès des moteurs de recherche. |
| 8.5 |
|
Le contenu de la balise TITLE est-il explicite ? |
La balise TITLE donne un titre à la page qui vient d'être chargée. Il est important de lui donner un nom explicite pour orienter l'utilisateur dans sa navigation. |
| 8.6 |
|
Le contenu de la balise TITLE est-il différent d'une page à l'autre ? |
Un même titre sur les différentes pages d'un site peut induire les utilisateurs en erreur. En effet, le titre de la page est la première information rendue à l’écran et les répétitions d’un même titre entre plusieurs documents différents, peut créer une perte de repères. |
| 8.7 |
|
Les changements de langue dans une page sont-ils signalés ? |
Lorsqu'un changement de langue intervient dans une page, il est nécessaire de le signaler à l'utilisateur. En effet, en cas d'utilisation d'une synthèse vocale, celle-ci changera automatiquement de langue à la détection de la balise LANG qui spécifie qu'un mot ou une phrase est dans une langue différente. |
9. Structuration de l'information. |
| 9.1 |
|
Est-ce que la structuration de l'information est cohérente par rapport au contexte général du site ? |
La structuration de l'information dans une page va dépendre du domaine (journalistique, ludique, scientifique, artistique...) dans lequel est se trouve. Par ailleurs, tous les éléments constituant l'information de la page (les images, les titres...) peuvent ne pas poser de problème en eux-mêmes. C'est la disposition les uns par rapport aux autres qui peut ne pas être cohérente. Exemple : sur un site journalistique, un texte qui serait affiché avant son titre ne serait pas validé. |
| 9.2 |
|
La page web est-elle structurée de manière cohérente ? |
L’utilisation des styles proposés par le HTML du type H1, H2… permet de structurer la page. Ces balises sont très importantes pour structurer une page Web : la balise H1 pour le titre principal H2 pour les sous-menus, ... H6. Ces balises doivent être utilisées pour leur fonction première, la structuration, et non pour leur dimension graphique. De plus, les blocs d'informations doivent être distincts les uns des autres. |
| 9.3 |
|
Y a-t-il un plan du site ? |
Le plan du site doit être constitué d'un ensemble de liens hypertextes concis, précis et lisibles hors contexte (liens textuels ou liens images bien commentés). Ceux-ci peuvent être agencés sous forme d'une table des matières. Classés par niveaux et/ou par thèmes, ils donneront un aperçu utile de l'apparence générale de l'arborescence du site. Une numérotation appropriée des différents liens est un plus non négligeable. Un plan du site bien conçu et couplé à un moteur de recherche favorise l'accès rapide à l'information. Le plan du site doit pouvoir être consultable de manière équivalente sur toutes les pages du site. |
| 9.4 |
|
Y a-t-il une page d'aide expliquant les principes de navigation à l'intérieur du site ? |
Cette page est utile pour tout utilisateur qui désire connaître la façon dont a été pensé le site Web. Elle est obligatoire pour prévenir les utilisateurs des aménagements réalisés sur le site : raccourcis claviers, barre de navigation internes… |
| 9.5 |
|
A partir de n'importe quelle page du site, la page d'aide est-elle atteignable de manière identique ? |
La page d'aide peut être atteignable grâce à un raccourci clavier, la répétition du lien vers la page d'aide en haut et bas de page… |
| 9.6 |
|
Y a-t-il un moteur de recherche interne au site ? |
La présence d’un moteur de recherche indexant les pages du site permet aux utilisateurs de trouver plus aisément les informations qu’ils recherchent. |
| 9.7 |
|
A partir de n'importe quelle page du site, le moteur de recherche est-il atteignable de manière identique ? |
Le moteur de recherche peut être atteignable grâce à un raccourci clavier, la répétition du lien vers la page de moteur de recherche en haut et bas de page… |
| 9.8 |
|
La page de résultats du moteur de recherche comporte-t-elle au moins les éléments suivants : nombre maximum de réponses par page, nombre total de réponses, éléments de navigation ? |
Les éléments de navigation peuvent être : des liens "précédent", "suivant", un ensemble de liens menant vers les pages de réponses… |
10. Présentation de l'information. |
| 10.1 |
|
Le contenu de la page est-il séparé de sa présentation ? |
Si le code de la page est du HTML, il ne doit pas contenir d'informations de mise en forme (BGCOLOR, FONT, ALIGN, B, I...) qui peuvent toutes être, par exemple, contenues dans des feuilles de style. |
| 10.2 |
|
Avec les feuilles de style désactivées, l'information est-elle toujours présente ? |
Dans l'optique de séparer le fond de la forme d'une page HTML, il faut utiliser des feuilles de style (CSS) pour la mise en forme. Il est important que les personnes ne désirant pas lire la page avec le style imposé par l'auteur obtiennent la même information lorsqu'ils désactivent les styles de la page pour imposer leur propre personnalisation. |
| 10.3 |
|
Avec les feuilles de style désactivées, l'ordre d'apparition de l'information est-il respecté par rapport à l'ordre d'apparition initialement défini ? |
Certaines techniques permettent de construire la page HTML avec des feuilles de style. Lorsque les feuilles de style sont désactivées par l'utilisateur, il faut que la structure logique de la page soit respectée. Il faut veiller à ce que l'ordre d'apparition des divisions (DIV), par exemple, soit équivalent entre l'affichage sur un navigateur graphique et l'affichage sur un navigateur en mode textuel. |
| 10.4 |
|
Des valeurs relatives sont-elles utilisées pour dimensionner les tableaux et définir la taille des polices de caractère ? |
Il est conseillé d'utiliser des valeurs en pourcentages pour dimensionner les tableaux d’un site Web. Il est également conseiller d’utiliser des valeurs en pourcentages, "em", "SMALL", "MEDIUM", "LARGE", "XX-LARGE"... pour dimensionner les tailles de caractères dans les feuilles de style. |
| 10.5 |
|
Si des valeurs absolues sont utilisées, le sont-elles sans conséquence sur l'affichage de l'information ? |
En utilisant des valeurs absolues dans une page, il faut veiller à ce que l'information affichée dans la page soit toujours disponible, lors de changements de résolution d'écran, d'élargissements de tailles de polices de caractères par exemple. Exemple : Une page optimisée en 1024*768 avec une taille de caractère de 12 points par défaut doit pouvoir être lue sans perte d’information par un utilisateur dont la résolution d’écran est de 800*600 et qui décide d’agrandir ses caractères en désactivant les styles imposés dans la page. |
| 10.6 |
|
Est-ce que les polices de caractères présentes sur la page appartiennent à la famille de polices de caractères sans sérif ? |
Il convient d'utiliser des polices de caractères sans sérif (sans empattement) qui soient compatibles avec tous les systèmes d'exploitation (Windows, Mac, Linux...). Pour cela, il faut indiquer au navigateur au moins un nom de police. Si cette police n'est pas trouvée dans le système d'exploitation, la police par défaut est alors utilisée. Cette police est "Times New Roman" sur un PC, et "Times Roman" sur un Mac... C'est pourquoi il est recommandé de spécifier plusieurs noms de polices, ainsi que la famille de polices sans sérif. Dans la feuille de style par exemple, placer la police préférentielle en premier puis une police plus généralement répandue, éventuellement d'autres choix de polices et enfin, la famille de polices sans sérif. |
11. Formulaires. |
| 11.1 |
|
La balise LABEL et les attributs correspondants (ID, FOR) sont-ils présents ? |
Dans le cas d’une page en HTML, la balise LABEL associée aux attributs ID et FOR permet de relier directement le champ de saisie au texte qui lui est associé. Cela permet aux personnes naviguant à l’aide d’une aide technique de définir sans ambiguïté à quel champ de saisie correspond le texte associé. |
| 11.2 |
|
Les textes associés aux champs de formulaires donnent-ils leur fonction exacte ? |
Il faut éviter, par exemple, d'écrire "faites votre choix" répété plusieurs fois pour des listes déroulantes figurant sur la même page. Lors d’une lecture hors contexte le texte "faites votre choix" ne renseigne pas l’utilisateur sur la nature des informations à saisir. |
| 11.3 |
|
Est-ce que la disposition des champs de formulaire par rapport aux textes qui leur sont associés ne pose aucune ambiguïté ? |
Dans le cas d'un formulaire classique associant horizontalement un texte à son champ de saisie, des études ergonomiques précisent que la distance entre le champ de saisie et le texte associé ne doit pas être supérieur à deux espaces. Si l'espace est trop grand entre ces deux éléments, les personnes qui utilisent un zoom d’écran , par exemple, ne savent plus à quel texte est destiné le champ de saisie. |
| 11.4 |
|
La balise FIELDSET est-elle présente pour encadrer des blocs d'information de même nature ? |
Dans un même formulaire, plusieurs champs de saisie de même nature (les champs "nom", "prénom", "date" et "lieu de naissance" constituent le groupe de champs "Etat civil") peuvent être regroupés par l'intermédiaire de la balise FIELDSET (dans le cas d’une page en HTML). |
| 11.5 |
|
La balise LEGEND est-elle présente pour donner un titre au bloc d'informations encadré par la balise FIELDSET ? |
Dans le cas d’une page en HTML, l’utilisation de la balise LEGEND (associée à la balise FIELDSET) permet de donner un titre à chaque bloc d’information. |
| 11.6 |
|
Dans un formulaire, le commentaire du bouton SUBMIT est-il pertinent ? |
Le bouton de validation d'un formulaire représente la dernière étape lors du remplissage d’un formulaire. Si ce bouton n’est pas clairement identifié, l’interaction entre le site et l’utilisateur sera difficile. Par exemple, lorsque le bouton SUBMIT est une image, il faut veiller à commenter cette image par un texte explicite du type "valider le formulaire". |
| 11.7 |
|
Le contrôle de saisie des champs du formulaire est-il accessible ? |
Si la validation d'un formulaire s'effectue par l'intermédiaire d'un script sur le poste client, par exemple, il est important de donner une alternative équivalente à ce script pour qu'un utilisateur, quel que soit son navigateur, puisse envoyer l'ensemble des informations du formulaire vers le serveur. De plus, dans le cas d’un contrôle de saisie en HTML il est important de spécifier les champs obligatoires de manière explicite (Exemple : les champs précédés d’une étoile sont tous obligatoires.). Eviter de faire ressortir les champs obligatoires par l'intermédiaire d’une couleur par exemple ou de préciser aux utilisateurs que tels ou tels champs sont obligatoires, après l’ensemble des champs du formulaire. |
| 11.8 |
|
Les informations sont-elles organisées dans un ordre logique dans les listes de choix ? |
Les listes de choix doivent être organisées de manière logique pour que tout utilisateur puisse l'interpréter correctement et aisément. Par exemple, la liste des départements français est plus facile à consulter si elle est proposée selon un classement alphabétique. |
12. Aide à la navigation. |
| 12.1 |
|
La navigation dans l'ensemble des pages du site est-elle cohérente ? |
L'accessibilité d'un site se mesure aussi par l'homogénéité et la cohérence de construction et de structuration des pages les unes avec les autres. Les efforts liés à la structuration des pages auront un impact direct avec la facilité de navigation et de lecture à travers les pages du site. |
| 12.2 |
|
Le menu principal de navigation interne dans le site est-il toujours présent à la même place dans les pages ? |
En terme de navigation, il est plus facile à un utilisateur de trouver systématiquement à la même place un menu ou une barre de navigation : en haut et/ou en bas de page. Si ces mécanismes de navigations sont différents d’une page à l’autre, cela risque de troubler l’utilisateur et risque de lui faire quitter le site. |
| 12.3 |
|
Existent-ils des barres de navigation qui facilitent l'accès pour la navigation interne dans le site ? |
Il est important de donner de l'information concernant la navigation à l'intérieur du site. Il est donc important de permettre à l’utilisateur de naviguer facilement de pages en pages sans utiliser son navigateur. Ces processus de navigations peuvent être une barre de navigation en bas de page, un "fils d'Ariane" ("Accueil > Actualité > Article"). |
| 12.4 |
|
Y a-t-il des liens facilitant la navigation dans la page ? |
Il est important de donner la possibilité à l'utilisateur de "passer" le menu, souvent composé de nombreux liens, pour accéder directement au contenu de la page (lien "invisible" en haut de page par exemple). Proposer aussi des liens de retour vers le haut de page lorsque les pages sont longues... |
| 12.5 |
|
Les liens importants du site comportent-ils des raccourcis claviers ? |
Les liens importants sont : "Page d'accueil", "Page d'aide", "Plan du site", "Moteur de recherche", "Glossaire", "Contacts". Les raccourcis clavier peuvent porter sur une combinaison de lettres et surtout de chiffres. La liste suivante est conseillée : - "s" : passer le menu, - "1" : page d'accueil, - "2" : page d'actualités, - "3" : plan du site, - "4" : moteur de recherche, - "5" : FAQ, - "6" : Page d'aide, - "7" : contact, - "8" : conditions d'utilisation, - "9" : livre d'or, - "0" : lien vers la liste des raccourcis clavier utilisés dans la page. |
| 12.6 |
|
Si des raccourcis clavier ont été définis dans le site, sont-ils actifs dans la page ? |
Lorsque que des raccourcis clavier sont définis sur une page, il est important que ceux-ci soient actifs et homogènes sur l’ensemble des pages du site. |
| 12.7 |
|
Y a-t-il des caractères de séparation lorsqu'il y a un groupement de liens ? |
Dans le cas d'une navigation avec une synthèse vocale, il est important de mettre des caractères de séparation pour permettre à la synthèse vocale de marquer un temps d'arrêt entre chacun des liens. Une image commentée par une alternative du type "|" représente une alternative correcte. |
| 12.8 |
|
La page fait-elle moins de 70 Ko ? |
Une page trop lourde sera très longue à afficher notamment pour les utilisateurs possédant des connexions en bas débit. L'ensemble des éléments liés à la page (images, feuilles de styles, scripts...) est inclus dans le poids de 70 Ko par page. Pour le cas des pages Web qui proposent une image agrandie, ce critère n'est pas pris en compte. En revanche, il est nécessaire d'indiquer le poids de la nouvelle image dans le lien Web qui amène à cette image. A titre d'exemple, 70 Ko sont chargés en une vingtaine de secondes environ avec un modem 56 K. |
13. Contenus accessibles |
| 13.1 |
|
L'utilisateur a t-il le contrôle du rafraîchissement ? |
Lors de l’utilisation d’un rafraîchissement automatique d’une page, le curseur des lecteurs d'écran (ex : Jaws) se replace automatiquement en haut de page, rendant difficile la lecture de la page entière. |
| 13.2 |
|
Si une redirection automatique est présente, s'effectue-t-elle sans l'intermédiaire d'un script ? |
Il est important de préférer des solutions de redirection automatique côté serveur. La redirection ne dépendant plus du poste client. |
| 13.3 |
|
Le visiteur est-il averti lorsque de nouvelles fenêtres apparaissent ? |
Deux notions s'apparentent à l'expression "nouvelles fenêtres" : fenêtre de navigateur et pop-up. L'ouverture d'une fenêtre de navigateur s'effectue grâce à une commande HTML alors que la pop-up s'ouvre par l'intermédiaire d'un script sur le poste client. Dans certains cas, les personnes utilisant des navigateurs qui ne gèrent pas les scripts côté client ou qui désactivent volontairement les scripts dans leur navigateur n'auront donc pas accès à l'information contenue dans la pop-up. L'ouverture automatique d'une pop-up dès le chargement d'une page rend la lecture difficile, notamment pour les personnes utilisant des aides techniques pour naviguer. L'ouverture de nouvelles fenêtres, surtout lorsque l'utilisateur n'est pas prévenu, n'est pas conseillée. |
| 13.4 |
|
Y a-t-il une alternative équivalente au script qui déclenche l'ouverture de nouvelles fenêtres ? |
Si aucune alternative aux POP-UP n'est prévue, certains utilisateurs n'auront pas accès au contenu de ces POP-UP (utilisateurs de navigateurs n’acceptant pas les scripts, les personnes qui désactivent volontairement les scripts dans leur navigateur…). |
| 13.5 |
|
Y a-t-il des informations supplémentaires disponibles décrivant la consultation des fichiers en téléchargement ? |
Commentaire : Lors d'un téléchargement, il faut faire apparaître les notions suivantes : format, poids, lien vers un outil de conversion si possible, un lien vers le téléchargement du logiciel de lecture et éventuellement, une adresse électronique pour que l'utilisateur puisse demander l'envoi par courrier électronique d'un fichier alternatif en format accessible. Les fichiers disponibles en téléchargement sur le web ne le sont pas toujours dans un format accessible. Il est donc important de donner les moyens nécessaires sur les fichiers de téléchargement. Si c'est du format PDF par exemple, donner la possibilité à l'utilisateur de télécharger au préalable le logiciel Acrobat Reader (ou indiquer l'adresse d'outils de conversion en ligne). |
| 13.6 |
|
Lorsqu'un fichier peut être téléchargé, y a-t-il des formats alternatifs équivalents ? |
Les fichiers à télécharger sont parfois dans des formats peu accessibles (format PDF par exemple). Il est important de pouvoir proposer des formats de fichiers alternatifs tels que le RTF, TXT,HTML… |
| 13.7 |
|
Est-ce que la présentation spécifique d'une information n'entrave pas l'accès à son contenu ? |
Il faut veiller à ce qu'une information proposée sous des formes spécifiques (clignotement, défilement...) ne gène pas la lecture de cette information : clignotement rapide (difficilement lisible pour l'ensemble des usagers, difficulté accrue pour les personnes malvoyantes par exemple), défilement rapide de l'information (difficile pour les personnes malvoyantes et les personnes qui ont un apprentissage difficile de la lecture). Lorsque ce type de présentation spécifique est généré par un applet, une animation FLASH, un gif...il est nécessaire de proposer une alternative. |
| 13.8 |
|
La présentation de la page est-elle réalisée sans détourner certaines balises de leur fonction d'origine ? |
Les recommandations WAI recommandent d’utiliser le HTML à bon escient. Ex : Il ne faut pas : - utiliser la balise BLOCKQUOTE, prévue à l'origine pour les citations, uniquement pour créer un décalage du texte. - utiliser la balise UL, prévue à l'origine pour créer des listes, uniquement pour créer un décalage du texte. De manière générale, ne pas utiliser les balises (B, CENTER, BASEFONT, APPLET, DIR, FONT, ISINDEX, MENU, S, STRIKE et U) et les attibuts (ALIGN, BGCOLOR, HEIGHT...) qui sont définis comme non valide dans la dernière version du HTML. |
| 13.9 |
|
Les balises ACRONYM et ABBR figurent-elles au moins sur le premier des acronymes, abréviations de même nature se trouvant dans la page ? |
En HTML, les balises ACRONYM et ABBR doivent figurer au moins sur le premier des acronymes, abréviations de même nature se trouvant dans la page. Dans une page, il n'est pas nécessaire de commenter systématiquement tous les acronymes et autres sigles de même nature. Il faut néanmoins absolument le faire sur le premier sigle présent dans la page. L'utilisateur est alors prévenu de leur signification lorsqu'ils apparaissent plus tard dans la page. Ex : Le terme "ANPE" est un acronyme et désigne l'Agence Nationale Pour l'Emploi. Le terme "M." est l'abréviation du mot "Monsieur". |
| 13.10 |
|
L'attribut TITLE de la balise ACRONYM est-il correctement rempli ? |
C'est l'attribut TITLE, associé à la balise ACRONYM, qui donne la définition d'un acronyme. Le contenu de cet attribut doit donc donner la signification exacte du sigle auquel elle se réfère sous peine de désorienter l'utilisateur. |
| 13.11 |
|
Lorsqu'un acronyme est présent et que la balise ACRONYM n'est pas remplie, chaque lettre est-elle séparée par un point ? |
Le fait de mettre un point entre chaque lettre d'un acronyme permet à une synthèse vocale, par exemple, de marquer une séparation entre chacune des lettres et ne pas prononcer l'acronyme comme un mot à part entière. Par exemple, les lettres du mot ANPE seront lues globalement, comme un mot normal, et non pas séparément comme l'exigerait la lecture logique de cet acronyme. |
| 13.12 |
|
Les éléments de textes (titres, sous-titres, phrases,...) ne doivent pas être écrits en lettres majuscules : cette règle est-elle vérifiée ? |
Des études ergonomiques montrent que 25% des utilisateurs éprouvent des difficultés de lectures lorsqu’ils sont confrontés à des textes en majuscules. |
