| Source | Formulation |
|---|---|
| WCAG 1.0 version anglaise |
Use the clearest and simplest language appropriate for a site's content. |
| WCAG 1.0 version française officielle |
Utiliser le langage le plus clair et le plus simple possible adapté au contenu de votre site. |
| WCAG 1.0 version française d'AccessibilitéWeb |
Utiliser le langage le plus clair et le plus simple approprié au contenu du site. |
| Section 508 version anglaise |
The Access Board decided against including this checkpoint as a standard for Web accessibility because it was deemed too difficult to enforce. The requirement to use clearest and simplest language can be very subjective. |
| WCAG 2.0 version anglaise |
3.1.5 When text requires reading ability more advanced than the lower secondary education level, supplemental content is available that does not require reading ability more advanced than the lower secondary education level. |
| AccessiWeb | Fiche 9.1 : Est-ce que la structuration de l'information est cohérente par rapport au contexte général du site ? |
Il est souvent possible de dire les choses avec un vocabulaire plus simple et des phrases plus courtes. Quand un contenu s'adresse à un public large, c'est une règle de communication importante qui aidera grandement à la diffusion de votre message.
Un langage clair et simple facilitera la consultation aux personnes ayant des limitations cognitives ou pour qui la page est présentée dans une langue seconde.
Il n'existe pas de test standardisé en français permettant d'évaluer automatiquement la clarté et la simplicité du langage.
Selon Jakob Nielsen, dans un article intitulé Lower-Literacy Users, on devrait viser un niveau de langue compréhensible par les personnes maîtrisant les habiletés requises d'un étudiant du premier cycle du secondaire.
Voir aussi Extrait des techniques [français] : 14.1 et Technique 14.1 [anglais].
| Source | Formulation |
|---|---|
| WCAG 1.0 version anglaise |
Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions). |
| WCAG 1.0 version française officielle |
Identifier clairement les changements survenus dans le langage naturel du texte d'un document et équivalents (par exemple les légendes). |
| WCAG 1.0 version française d'AccessibilitéWeb |
Identifier clairement les changements de la langue naturelle du texte d'un document et de tout équivalent textuel (ex. les légendes). |
| Section 508 version anglaise |
[No equivalent.] |
| WCAG 2.0 version anglaise |
3.1.2 The natural language of each passage or phrase in the Web unit can be programmatically determined. (level 2) |
| AccessiWeb | Fiche 8.7 : Les changements de langue dans une page sont-ils signalés ? |
Les synthétiseurs vocaux utilisés par les personnes aveugles ou malvoyantes ainsi que certaines personnes ayant des limitations cognitives sont conçus pour une langue spécifique et deviennent à peu près incompréhensibles quand on les utilise dans une autre langue.
Quand les changements de langue à l'intérieur du texte sont correctement identifiés, le logiciel de lecture d'écran peut changer de synthétiseur automatiquement selon les besoins.
L'attribut lang="…" peut être incorporé à la balise HTML encadrant un passage dans une autre langue. Si le passage dans une autre langue ne correspond pas aux limites d'un élément de code, il vaut mieux utiliser la balise <span lang="…"> pour délimiter ce passage. Les … entre guillemets doivent être remplacés par fr pour français et en pour anglais.
Voir aussi A-Prompt : 4.1 et A-Prompt : 4.3, Technique 4.1 [anglais] et Technique 4.3 [anglais].
| Source | Formulation |
|---|---|
| WCAG 1.0 version anglaise |
Clearly identify the target of each link. |
| WCAG 1.0 version française officielle |
Identifier clairement la cible de chaque lien. |
| WCAG 1.0 version française d'AccessibilitéWeb |
Identifier clairement la destination de chaque lien. |
| Section 508 version anglaise |
[No equivalent.] |
| WCAG 2.0 version anglaise |
2.4.4 Each link is programmatically associated with text from which its purpose can be determined. (level 2). 2.4.8 The purpose of each link can be programmatically determined from the link. (level 3). |
| AccessiWeb | Fiche 1.12 : Pour chacune des images liens, le texte contenu dans l'attribut ALT donne-t-il la fonction du lien ? Fiche 6.1 : L'intitulé des liens fait-il moins de 80 caractères ? Fiche 6.2 : Les liens sont-ils explicites ? Fiche 6.3 : Si nécessaire, l'attribut TITLE est-il présent et fait-il moins de 80 caractères ? Fiche 6.4 : L'attribut TITLE donne-t-il plus d'informations concernant le lien que l'intitulé du lien lui-même ? Fiche 6.5 : Chaque intitulé de lien identique amène t-il vers la même destination ? |
Le texte des liens doit être significatif même lorsque lu hors contexte. En effet, les logiciels de lecture d'écran en braille, en synthèse vocale ou en grossissement des caractères offrent une fonction de navigation dans la liste des liens où le texte des liens est extrait de son contexte.
Les liens utilisant de façon répétitive le même texte comme « cliquer ici » ou « pour en savoir plus… » posent donc problème. De même, des liens conduisant à des cibles différentes ne peuvent utiliser le même texte parce que cela créerait de la confusion. C'est souvent le cas des liens de type « pour en savoir plus… » ou « lire la nouvelle… ».
Enfin, notons que si vous utilisez un lien graphique et un lien texte conduisant à la même destination, vous devriez autant que possible les intégrer dans la même balise <a>. L'attribut alt de l'image ne peut toutefois être vide et doit contenir au moins un mot ou un symbole.
Exemple :
<a href="www.abc.com"><img src="abc.gif" alt="*" width="12" height="12" />ABC</a>
Voir aussi A-Prompt : 13.1 et Technique 13.1 [anglais].
| Source | Formulation |
|---|---|
| WCAG 1.0 version anglaise |
Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned. |
| WCAG 1.0 version française officielle |
Jusqu'à ce que le agents-utilisateurs supportent les associations explicites entre étiquettes et contrôles de formulaires, s'assurer que les étiquettes sont correctement positionnées pour tous les contrôles de formulaire avec étiquettes implicitement associées. |
| WCAG 1.0 version française d'AccessibilitéWeb |
Jusqu'à ce que les agents utilisateurs supportent les associations explicites entre labels et contrôles de formulaires, s'assurer que les labels sont correctement positionnés pour tous les contrôles de formulaire avec labels implicitement associés. |
| Section 508 version anglaise |
[No equivalent.] |
| WCAG 2.0 version anglaise |
User agents now support explicit associations of labels with form controls, so the "until user agents" clause has been satisfied. This is therefore no longer a requirement under WCAG 2.0. |
| AccessiWeb | Fiche 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é ? |
Les fenêtres « pop-up » à ouverture automatique sont une cause importante de désorientation pour les utilisateurs aveugles qui ne les voient pas surgir à l'écran et se retrouvent dans une nouvelle fenêtre sans en avoir connaissance. Évitez-les donc si possible.
Sinon, ajoutez un avertissement au lien indiquant « Ce lien s'ouvrira dans une nouvelle fenêtre ». Cet avertissement peut être donné de façon textuelle ou via le alt d'une image visible ou non.
Exemple :
<a href="lien.html" target="_blank">
<img src="popup.gif" alt="Ce lien s'ouvrira dans une nouvelle fenêtre." />
</a>
Voir aussi A-Prompt : 10.1 et Technique 10.1 [anglais]
| Source | Formulation |
|---|---|
| WCAG 1.0 version anglaise |
Identify the primary natural language of a document. |
| WCAG 1.0 version française officielle |
Identifier le langage naturel principal du document. |
| WCAG 1.0 version française d'AccessibilitéWeb |
Identifier la langue principale d'un document. |
| Section 508 version anglaise |
[No equivalent.] |
| WCAG 2.0 version anglaise |
3.1.1 The primary natural language or languages of the Web unit can be programmatically determined. (level 1) |
| AccessiWeb | Fiche 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 ? |
Les synthétiseurs vocaux utilisés par les personnes aveugles ou malvoyantes ainsi que certaines personnes ayant des limitations cognitives sont conçus pour une langue spécifique et deviennent à peu près incompréhensibles quand on les utilise dans une autre langue.
Quand la langue principale de la page est correctement identifiée, le logiciel de lecture d'écran peut changer de synthétiseur automatiquement selon les besoins.
L'attribut lang="…" peut être incorporé à la balise <html> de début de page ou à la balise <body>. Les … doivent être remplacés par fr pour français et en pour anglais.
Exemple :
<body lang="fr">
Voir aussi A-Prompt : 4.1 et A-Prompt : 4.3, Technique 4.1 [anglais] et Technique 4.3 [anglais].
| Source | Formulation |
|---|---|
| WCAG 1.0 version anglaise |
Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group. |
| WCAG 1.0 version française officielle |
Regrouper les liens de même nature, identifier le groupe (pour les agents-utilisateurs), et jusqu'à ce que les agents utilisateurs le permettent, donner un moyen de s'affranchir du groupe. |
| WCAG 1.0 version française d'AccessibilitéWeb |
Regrouper les liens de même nature, identifier le groupe (pour les agents utilisateurs), et jusqu'à ce que les agents utilisateurs le permettent, donner un moyen de passer le groupe. |
| Section 508 version anglaise |
1194.22 (o) A method shall be provided that permits users to skip repetitive navigation links. |
| WCAG 2.0 version anglaise |
2.4.1 A mechanism is available to bypass blocks of content that are repeated on multiple Web units. (Level 1) Note: In WCAG 2.0, this requirement applies only to groups that are repeated on multiple delivery units. |
| AccessiWeb | Fiche 6.7 : Y a-t-il moins de 40 liens actifs dans la page, hors liens nécessaires à la navigation ? Fiche 12.4 : Y a-t-il des liens facilitant la navigation dans la page ? |
La meilleure façon de regrouper les liens est de les coder comme des listes. Toutefois, les menus présentant une longue liste de liens qui se répète de page en page sont fastidieux pour les utilisateurs d'un logiciel de lecture d'écran qui ne peuvent pas facilement aller au contenu principal en déplaçant simplement le regard.
Pour pallier à cette difficulté, vous devriez incorporer au tout début de la page ou du menu de navigation un lien visible ou non conduisant au contenu principal de la page. Dans le cas ou le menu de navigation est placé à la fin du code de la page, quelle que soit la disposition visuelle de ce menu à l'écran, ce lien devrait plutôt conduire au début du menu de navigation.
Ce lien peut s'intituler simplement « Passer la navigation » ou « Aller à la navigation ».
Exemple :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple de code pour passer la navigation.</title>
<style type="text/css">
body {margin:0; padding:0; background-color:#cfc;}
ul#nav {margin:-1em 0 1px 0; padding:0; list-style:none;}
ul#nav li {display:inline; line-height:2.2em;}
ul#nav li a {margin-right:0.5em; padding:0.4em 0.6em; border:1px solid #008; text-decoration:none; color:#900; background-color:#eee; font:bold 100%/1.4 arial,helvetica,sans-serif;}
ul#nav li a:hover {color:#fff; background-color:#333;}
ul#nav li a.saut {display:block; text-indent:-9999em; overflow:hidden; border:0; background-color:transparent; line-height:0.2em;}
</style>
</head>
<body>
<ul id="nav">
<li><a class="saut" href="#">Lien 0</a></li>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</ul>
…
</body>
Voir aussi A-Prompt : 13.6 et Technique 13.6 [anglais].
| Source | Formulation |
|---|---|
| WCAG 1.0 version anglaise |
Until user agents (including assistive technologies) render adjacent links distinctly, include non-link, printable characters (surrounded by spaces) between adjacent links. |
| WCAG 1.0 version française officielle |
Jusqu'à ce que les agents utilisateurs (comprenant les technologies d'assistance) puissent gérer correctement les liens hypertextes adjacents, insérer entre ces liens des caractères imprimables non-hypertextes. |
| WCAG 1.0 version française d'AccessibilitéWeb |
Jusqu'à ce que les agents utilisateurs (y compris les technologies d'adaptation) indiquent les liens adjacents de façon distincte, inclure, entre les liens adjacents, des caractères imprimables (entourés par des espaces). |
| Section 508 version anglaise |
[No equivalent.] |
| WCAG 2.0 version anglaise |
Note: This technique is no longer needed for user agents but may be useful for people with cognitive disabilities. |
| AccessiWeb | Fiche 12.7 : Y a-t-il des caractères de séparation lorsqu'il y a un groupement de liens ? |
Ce point de contrôle est soumis à la condition « Jusqu'à ce que les agents utilisateurs (y compris les technologies d'adaptation) ». Nous croyons que cette condition a été rencontrée il y a déjà plusieurs années et que la possibilité qu'un utilisateur éprouve encore ce genre de limitation est infinitésimale. C'est pourquoi nous recommandons de considérer ce point de contrôle comme désuet.
Cet avis est partagé par les rédacteurs des WCAG 2.0 (toujours en version de travail). Ils écrivent : « This technique is no longer needed for user agents but may be useful for people with cognitive disabilities. » Ils en font donc une technique suggérée pour cette clientèle.
Toutefois, il s'agit d'un point qui est aisément vérifiable mécaniquement par certains outils d'évaluation de l'accessibilité. Si vous tenez à être irréprochable quelque soit le niveau de compétence d'un évaluateur éventuel, il vous suffit de séparer les liens adjacents par une barre verticale précédée et suivie d'une espace.
Exemple :
<a href="lien1.html">Lien 1</a> | <a href="lien2.html">Lien 2</a>
Notez que les liens présentés sous forme de liste ou dans des cellules de tableaux séparées ne sont pas considérés comme adjacents.
Voir aussi Aide : 10.5 et Technique 10.5 [anglais].
| Source | Formulation |
|---|---|
| WCAG 1.0 version anglaise |
Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page. |
| WCAG 1.0 version française officielle |
Associer du contenu visuel ou audio au texte, lorsque cela peut faciliter la compréhension d'une page. |
| WCAG 1.0 version française d'AccessibilitéWeb |
Associer du contenu visuel ou audio au texte, lorsque cela peut faciliter la compréhension d'une page. |
| Section 508 version anglaise |
[No equivalent.] |
| WCAG 2.0 version anglaise |
This checkpoint is not required by any WCAG 2.0 Success Criterion. Providing visual illustrations of complex ideas, events, and processes and Providing a spoken version of the text are listed as is a technique that can be used to satisfy WCAG 2.0 SC 3.1.5 (level 3). |
| AccessiWeb | [Aucun équivalent.] |
Un dicton populaire affirme qu'une image vaut mille mots. Un texte sans illustrations est plus aride à lire et difficile à comprendre pour les personnes qui ont des limitations cognitives ou qui lisent des pages dans une autre langue.
Il faut bien choisir les images qui doivent soutenir la compréhension du texte en tenant compte du public visé. Ces images ne sont pas seulement décoratives mais doivent communiquer une information pertinente.
Voir aussi Technique 14.2 [anglais].
| Source | Formulation |
|---|---|
| WCAG 1.0 version anglaise |
Create a style of presentation that is consistent across pages. |
| WCAG 1.0 version française officielle |
Créer un style de présentation qui est cohérent de page en page. |
| WCAG 1.0 version française d'AccessibilitéWeb |
Créer un style de présentation qui est cohérent de page en page. |
| Section 508 version anglaise |
[No equivalent.] |
| WCAG 2.0 version anglaise |
Aspects of WCAG 1.0 Checkpoint 14.3 are required by WCAG 2.0 Guideline 3.2.3 (level 2), 3.2.4 (level 2). There is no Success Criterion in WCAG 2.0 that is as broad as WCAG 1.0 Checkpoint 14.3, so aspects of it do not relate. |
| AccessiWeb | Fiche 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 ? Fiche 2.10 : Lorsqu'il y a des cadres, le défilement ("scrolling" en anglais) est-il automatique ? Fiche 6.6 : Dans l'arborescence du site, y a t-il un maximum de 9 catégories par niveau de navigation ? Fiche 12.1 : La navigation dans l'ensemble des pages du site est-elle cohérente ? Fiche 12.2 : Le menu principal de navigation interne dans le site est-il toujours présent à la même place dans les pages ? Fiche 13.13 : La page fait-elle au maximum 3 écrans en résolution 1024*768 si aucune navigation interne n'est prévue ? |
La cohérence de la présentation facilite d'autant la navigation sur votre site, ce qui aidera les visiteurs à trouver ce qu'ils recherchent.
Cela devrait être un acquis aujourd'hui.
Voir aussi Extrait des techniques [français] : 14.3 et Technique 14.3 [english
| Source | Formulation |
|---|---|
| WCAG 1.0 version anglaise |
Specify the expansion of each abbreviation or acronym in a document where it first occurs. |
| WCAG 1.0 version française officielle |
Spécifier la forme complète de toutes les abbréviations ou acronymes employés dans le document lors de la première utilisation. |
| WCAG 1.0 version française d'AccessibilitéWeb |
Spécifier la forme complète de chaque abréviation ou acronyme employés dans le document lors de la première utilisation. |
| Section 508 version anglaise |
[No equivalent.] |
| WCAG 2.0 version anglaise |
3.1.4 A mechanism for finding the expanded form of abbreviations is available. (level 3) |
| AccessiWeb | Fiche 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 ? Fiche 13.10 : L'attribut TITLE de la balise ACRONYM est-il correctement rempli ? iche 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 ? |
Les acronymes et les abréviations ne sont pas toujours bien prononcés par la synthèse vocale qui ne sait pas toujours comment interpréter ces assemblages de lettres. Il faut donc préciser la forme longue de la façon suivante lors de la première apparition :
Exemple :
Le <acronym title="World Wide Web" lang="en" xml:lang="en">WWW</acronym>.
Il est tout à fait correct également de donner la signification entre parenthèses sans utiliser les balises <abbr> ou <acronym>. Cette façon de faire a l'avantage de rendre l'information immédiatement disponible à tous vos visiteurs.
Exemple :
Le WWW (World Wide Web)
Voir aussi Extrait des techniques [français] : 4.2 et Technique 4.2 [anglais].
Dernière mise à jour : 2006-10-29