Ce qu’il faut savoir

par exemple, la déclaration de DTD

par exemple, les recommandations d'écriture

par exemple, la présence de champs obligatoires, générés par l'outil, à remplir (<title>, alt)

Élément <title>…</title> obligatoire.

• Tests 9.6 et 9.7

Les pages parentes de la page en cours doivent être accessibles par des liens.

• Test 6.20

• Tests 6.17 à 6.19

• Un <h1> est obligatoire en début de page
• La hiérarchie doit être respectée dans l'ordre i, i+1 : pas de <h(n-2)> avant <hn>

• Tests 10.1 à 10.4

• Doublement de l'information donnée par la couleur : une couleur seule ne doit pas fournir d'information
• Contraste des couleurs entre le texte et le fond : rapport de contraste supérieur à 3 avec agrandissement, ou à 4,5.
  Voir le calcul sur la page Contraste des couleurs

• Tests 2.1 à 2.4, tests 2.5 à 2.16, test 7.5

• Les variations de luminosité, les clignotement et les mouvements ne doivent pas durer plus de 5 secondes ou doivent pouvoir être arrêtés.
• Les éléments <marquee> et <blink> sont interdits (tests 5.19 et 5.23).

• Tests 5.13 à 5.26

Les rafraîchissements et les redirections doivent être contrôlables par l'utilisateur.

• Tests 6.7 à 6.12

• Indication du format, de la taille et de la langue (si différente de la page HTML) pour les documents, les objets et les applets.
• Accessibilité du texte et de la structure des informations contenues dans les documents exportables (PDF) ou textes
• Présence d'une feuille de style pour impression

• Tests 6.26 à 6.28 et 10.13

• Liens compréhensibles hors contexte
• Un intitulé unique par lien ou utilisation de title dans l'élément a
• "vous pouvez nous écrire" au lieu de "pour nous écrire, cliquez ici"
• Si l'intitulé du lien n'est pas suffisamment précis, il faut l'expliciter dans l'attribut title de a

• Tests 6.13 à 6.16

• Balises <a>, <object>, <embed>, <script>
• Explicitement ou dans title
• Pas de code Javascript qui déclenche l'ouverture d'une fenêtre sans intervention de l'utilisateur

• Tests 6.2 à 6.5

Distinction visuelle des liens.

• Tests 7.10 et 7.11

• Balises <a>, <area>, <button>, <input>, <object>, <embed>, <select>, <textarea>
• L'ordre est celui du code source, il doit être logique (liens, objets, …)
• Il doit exister des liens d'évitement pour les longues énumérations

• Test 6.24 et 6.29 à 6.33

Il y a aussi :

• L'attribut tabindex=1 à 32767 puis 0, impose l'ordre de focus clavier, mais ne doit pas remplacer une mauvaise organisation de la page
• L'attribut accesskey="x" doit se limiter au pavé numérique, à cause des racourcis clavier du navigateur, et doit être persistant sur l'ensemble du site.

• <a href="pagevalide.html" accesskey="2"> est accessible avec "Alt + 2" (Windows)

• Faire des phrases simples. Au plus simple : sujet verbe complément.
• Utiliser la forme active plutôt que la forme passive.
• Utiliser des mots simples que tout le monde peut comprendre et, en particulier, évitez le jargon professionnel.
• Tenter de développer une seule idée par paragraphe.
• Éviter de parler de plusieurs choses dans la même phrase.
• Veiller à mettre l'information importante au début de la phrase et du paragraphe.

• Tests 12.4 à 12.6 et 12.10

• <q cite="url de la source">…</q>
• <cite>…</cite><q>…</q>

• Test 10.8

<blockquote cite="url de la source">[bloc]</blockquote>

• Test 10.8

• de langue : <q lang="en">
• de direction : <q lang="ar" dir="rtl">, <q lang="fr" dir="ltr">

• Tests 12.1 et 12.2

Ils doivent préciser les abréviations et les sigles :

• soit dans, au moins, leur première occurence de la page
• soit par juxtaposition, soit par un glossaire ou soit par un attribut title s'il s'agit d'un lien

Un sigle qui se prononce comme un mot est un acronyme.

• <abbr title="World Wide Web Consortium" lang="en">W3C</abbr>
• <acronym lang="fr" title="Technologies de l'information et de la communication">TIC</acronym>

• Tests 10.9 à 10.12

• Les titres images doivent être remplaçée par du CSS
• L'attribut alt="…" est obligatoire et doit être pertinent
• 120 caractères maximum : au-delà, il faut utiliser l'attribut longdesc
• Si l'image ne présente aucune description (puce, barre de séparation), il faut alt="".

• Tests 4.1 à 4.6

• <img>, <frame>, <iframe>
• Lien sur la page ou sur une autre page, vers une description longue de l'image ou du cadre.

• Tests 4.7 à 4.9

• L'attribut alt="…" est obligatoire pour <object> et <applet> : la description doit être pertinente.

• Test 5.11

Ne pas mettre onkeypress pour un lien accessible avec la touche Entrée

• Test 5.27

• <script> : élément <noscript> : <noscript>Menu déroulant : Lien A, Lien B</noscript>
• <embed> : élément <noembed> ou lien alternatif
• <frame> : élément <noframes>

• Test 5.28

Mettre à jour les alternatives.

• Test 8.1

• onclick / onkeypress, onmouseover / onfocus
  onmouseout / onblur, onmousedown / onkeydown

Ne pas mettre onkeypress pour un lien accessible avec la touche Entrée

• Tests 8.2 et 8.3

• Présence et pertinence de transcriptions textuelles des contenus sonores
• Présence et pertinence d'une alternative textuelle aux contenus vidéos et aux animations
• Présence et pertinence de descriptions audios, et de sous-titrages synchronisés contrôlables des contenus multimédias

• Tests 5.1 à 5.10

Il faut employer l'attribut title, disponible dans tous les éléments de <body> sauf <base>, <basefont> et <script>.

Il apparaît en général sous forme d'infobulle lorsque la souris passe dessus.

• Pages valides en XML

• Test 9.4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" dir="ltr">
ou
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr" dir="ltr">

• Déclarations de DTD

• Tests 9.1 à 9.3

• Utiliser les entités HTML des caractères (&eacute;,…) pour un affichage systématique par les navigateurs

• <blockquote>,<dl> ne doivent pas remplacer margin-left: 2em
• de même pour <pre> ou une suite d'espaces insécables
• <hi>…</hi> doit être un titre

• Tests 7.3 et 7.9

• Pas de { list-style-type: none } pour <ul> et <ol>
• Si on utilise list-style-image:, il faut list-style-type:

• Tests 10.5 à 10.7

• <b> remplacé par 'font-weight:bold' ou <strong>
• <i> remplacé par 'font-style:italic' ou <em>
• <u> remplacé par 'text-decoration:underline'
• <s>, <strike> remplacé par 'text-decoration:line-through'
• <big>, <small>, <font size=".."> remplaçés par 'font-size:x%' ou 'font-size:x/100em'
• <basefont>, <center>, <dir>, <font>, <isindex>, <menu>, <tt>, …
• et les attributs : align=, alink=, background=, basefont=, bgcolor=, border=, color=, hspace=, link=, text=, vlink=, vspace=, size= …

• Tests 7.8 et 9.5

• Tester la page en désactivant les styles (tous les navigateurs courants le permettent).
• Les informations background, background-image (images avec texte par exemple), doivent être accessibles sans style ou javascript.
• Dans le code source (lecture linéaire), un ou des blocs en position absolue, ne doivent pas géner la lecture d'un bloc secondaire par rapport à un bloc principal  : un bloc onmouseover doit suivre le bloc ou lien correspondant

• Tests 7.1 à 7.3

• em et % (1em = 100%) pour les caractères et les hauteurs de ligne
• em, % et px pour les tableaux et les blocs
• feuille de style media print obligatoire : utilisation des unités absolues pt, pc, cm, mm, in

• Test 7.14

• Titres uniques et pertinents des cadres : title
• Défilement obligatoire et redimensionnement des cadres
• "noresize" est interdit, pas de cadres figés (titres ou images)

• Tests 1.1 et 1.2 et 7.13 à 7.16

• pas de <br /> (ou <br>) dans des cellules adjacentes pour structurer le tableau

• Tests 11.4 à 11.6

• entêtes de ligne : attribut scope="row"
• entêtes de colonne : attribut scope="col"
• entêtes de ligne et de colonne : attribut id et headers :
  <th id="titre1">…<th id="titrei">… (1^re ligne)
  <th headers="titre1" id="titrej">… (1^re colonne)
  <td headers="titrei titrej">… (les autres cases)

• Tests 11.1 à 11.3

• l'attribut summary="…" décrit la structure (nombre de lignes et de colonnes) et le contenu du tableau :<table summary="Colonne 1 : liste des denrées (12 lignes), colonne 2 : sous-liste de denrées (lignes 4 et 5, lignes 10, 11 et 12), colonne 7 : vide (marge)">
• un titre pertinent qui précède immédiatement le tableau ou l'élément <caption> avec un contenu pertinent

• Tests 11.7 à 11.10

• <tbody>, <tfoot><tr>, <colgroup><col>… précisent la structure du tableau
• Pour <th> et <td>, remplacer par du style les attributs : bgcolor, height, nowrap et width