Accessibilité - Britoweb

Moyens techniques pour rendre le contenu du Web accessible

Victor Brito — Thu, 14 Feb 2008 15:00:00 +0100

Il existe divers moyens techniques de rendre un site Web accessible au plus grand nombre.

Le W3C a publié en 1999 une recommandation énumérant plusieurs directives pour l'accessibilité du contenu du Web (14 au total). Cette recommandation, soit dit en passant, a été traduite en français.

Ces directives sont accompagnées de points à contrôler, classés selon trois niveaux de priorité :

Priorité 1 : les points à contrôler rangés à ce niveau doivent être satisfaits pour que certains utilisateurs puissent utiliser des documents Web, sous peine d'être dans l'impossibilité de les consulter ;
Priorité 2 : les points à contrôler rangés à ce niveau devraient être satisfaits pour que certains utilisateurs n'aient affaire à aucune barrière significative à l'accès aux documents Web, sous peine d'avoir des difficultés à les consulter ;
Priorité 3 : les points à contrôler rangés à ce niveau peuvent être satisfaits pour que certains utilisateurs puissent accéder aux documents Web avec un confort maximal, sous peine d'éprouver quelques difficultés à les consulter.

Les directives sont les suivantes :

Alternatives équivalentes au contenu auditif et visuel

Victor Brito — Thu, 14 Feb 2008 15:00:00 +0100

Il s'agit, entre autres, de fournir un équivalent textuel d'un contenu non textuel (comme les images, les vidéos, les animations Flash) aux utilisateurs qui ne peuvent voir le contenu non-textuel : utilisateurs de navigateurs textuels (comme Lynx), utilisateurs de navigateurs graphiques où les images sont désactivées, utilisateurs ne possédant pas de logiciel requis pour lire le contenu (cas des animations Flash ou de certains formats de vidéo), robots des moteurs de recherche. L'équivalent textuel est également utile lorsque le contenu non textuel est indisponible (fichier source non trouvé ou pas encore chargé).

Pour une image, on utilisera l'attribut alt pour la décrire, attribut qui sera lu par les lecteurs d'écran et affiché par les navigateurs textuels ou lorsque l'image est indisponible. Cet attribut est obligatoire dans les éléments img et area.

<img src="http://accessibilite.britoweb.info/post/url-de-mon-image.png" alt="Description de mon image" />

En règle générale, la valeur de alt ne doit pas dépasser 60 caractères. Dans certains cas, l'attribut peut être vide si l'image côtoie du contenu textuel qui peut très bien servir à sa description (autrement dit, pour éviter un éventuel doublon) ou s'il s'agit d'une image décorative ou d'une image permettant de « caler » une mise en page (dans ces deux derniers cas, il est préférable de recourir aux CSS) ; un attribut alt vide n'est pas restitué par les lecteurs d'écran et les navigateurs textuels.

Si la description de l'image risque d'être longue, il convient d'ajouter l'attribut longdesc, qui accepte comme valeur une URL contenant la longue description. Cet attribut joue alors le rôle d'un lien.

<img src="http://accessibilite.britoweb.info/post/url-de-mon-image.png" alt="Description sommaire de mon image" longdesc="http://accessibilite.britoweb.info/post/url-de-la-description-complete-de-mon-image.html" />

Dans le cas d'une animation Flash ou de tout programme intégré au document Web par l'élément object, l'équivalent textuel sert de texte de substitution et sera affiché par les navigateurs ne pouvant lire l'animation et lu par les robots des moteurs de recherche.

<object type="application/x-shockwave-flash" data="http://accessibilite.britoweb.info/post/url-de-mon-animation-flash.swf" width="320" height="240">
  <param name="movie" value="url-de-mon-animation-flash.swf" />
  <p>Texte de substitution décrivant mon animation Flash</p>
</object>

Une image peut très bien être utilisée à la place du texte de substitution, auquel cas on n'oublie pas alt.

<object type="application/x-shockwave-flash" data="http://accessibilite.britoweb.info/post/url-de-mon-animation-flash.swf" width="320" height="240">
  <param name="movie" value="url-de-mon-animation-flash.swf" />
  <img src="http://accessibilite.britoweb.info/post/url-de-mon-image-de-substitution.png" alt="Texte de substitution décrivant mon image de substitution" />
</object>

Couleur

Victor Brito — Thu, 14 Feb 2008 15:00:00 +0100

Il ne faut pas s'en remettre uniquement aux couleurs.

Un périphérique à affichage en noir et blanc ou à affichage non visuel ne les perçoit pas et il en est de même pour ses utilisateurs. Par conséquent, un contenu véhiculant de l'information exclusivement par des couleurs ne sera pas accessible à ce groupe d'utilisateurs. Autrement dit, il faut s'assurer que le contenu soit accessible en noir et blanc ou en l'absence de rendu visuel. On évitera donc, par exemple, lors d'une demande de saisie par l'utilisateur, d'écrire Veuillez choisir un élément parmi ceux listés en vert.

De plus, certains utilisateurs peuvent souffrir de troubles visuels liés à la perception des couleurs. Par conséquent, il faut s'assurer que le contenu, lorsqu'il utilise de la couleur pour sa mise en forme, présente des contrastes suffisants pour qu'il soit consultable confortablement. Par exemple, en CSS, si l'on applique une couleur à un élément, on prendra soin de préciser une couleur d'arrière-plan, ce qui évitera une éventuelle « noyade » du contenu dans un arrière-plan de même couleur que les caractères, en cas de débordement ou d'agrandissement de la taille de police.

h1 {
  color: #303;
  background-color: #D0D;
}

Utilisation appropriée des balises et des feuilles de style

Victor Brito — Thu, 14 Feb 2008 15:00:00 +0100

Les différentes balises existantes, ainsi que les feuilles de style, sont définies pour un usage précis. Il convient donc de ne pas s'en détourner.

Utiliser une balise à des fins autres que son usage prévu complique l'accessibilité d'un document Web. Il ne faut pas oublier que certains outils, comme les lecteurs d'écran, analysent la structure du document Web, notamment les balises employées, et peuvent restituer certains détails, comme le type de balise ou le nombre d'éléments contenus par l'élément encadré par ladite balise. Par conséquent, il convient d'utiliser une balise pour son usage prévu : la balise table doit être utilisée pour présenter des données tabulaires, et non pour la mise en page d'un document, comme cela se fait dans les sites codés « à l'ancienne ».

Les feuilles de style ont vu le jour pour recevoir tout ce qui est nécessaire à la mise en forme du document. La structure et la présentation doivent être séparées. Par conséquent, on évitera de recourir à des éléments ou attributs de présentation (qui sont, en partie, désapprouvés par les spécifications du W3C, voire obsolètes), comme font : à la place, on utilisera les CSS. De plus, une balise ne doit pas être utilisée pour la manière dont elle est affichée par défaut sur les navigateurs : pour indenter du contenu, on préférera la propriété CSS text-indent à l'élément blockquote (qui balise une citation longue) ; de même, on évitera d'utiliser h1 ou h2 pour obtenir du gras et une taille de police plus grande si le contenu n'est pas un titre de section de niveau 1 ou 2.

Il est préférable, lorsque des balises appropriées existent, de les utiliser plutôt que de recourir à une image. Par exemple, on utilisera MathML pour baliser une équation mathématique. De même, on évitera l'image pour représenter du texte.

Enfin, la structure d'un document Web doit être validée par des grammaires publiées. Autrement dit, dans le cas d'un document HTML, une DTD doit être renseignée, indiquant la version de HTML et le mode utilisés (HTML 4.01 Strict, par exemple) ; dans le cas d'un document XML, s'il obéit à un ou plusieurs schémas précis, l'espace de nom respectif doit être renseigné dans l'élément racine. Le document Web doit être syntaxiquement valide, ce qui suppose que sa structure soit bien formée et que les éléments éventuellement imbriqués le soient correctement (cas des listes dl, ol et ul, par exemple).

Utilisation du langage naturel

Victor Brito — Thu, 14 Feb 2008 15:00:00 +0100

Pour que le contenu soit accessible du point de vue de sa compréhension, il est parfois nécessaire de le clarifier.

Cette nécessité de clarification est posée lorsque le contenu utilise des abréviations ou des acronymes. L'utilisateur n'est pas censé en connaître la signification, surtout s'il consulte un document qui couvre un domaine de connaissance qu'il ignore ou maîtrise mal. Par conséquent, une abréviation, lors de sa première occurrence dans un document, doit être explicitée, grâce aux éléments abbr et acronym et à leur attribut title.

<abbr title="Régie Autonome des Transports Parisiens">RATP</abbr>
<acronym title="Organisation du Traité de l'Atlantique Nord">OTAN</acronym>

Quant à la langue principale utilisée par le document Web, il est d'autant plus utile de la déclarer que les lecteurs d'écran en tiennent compte pour améliorer l'interprétation du contenu et éviter toute « prononciation » au mieux désagréable à l'oreille, au pire à la limite de la charabia. Les moteurs de recherche en tiennent aussi compte dans le tri et l'affichage des résultats lorsque l'utilisateur recherche des pages dans une langue précise.

Dans un document HTML, on déclare la langue dans la balise html en utilisant l'attribut lang, qui a comme valeur le code langue correspondant, tel que défini par la norme ISO 639 : pour le français, on emploiera le code fr.

<html lang="fr">
<head>
<title>Document en français</title>
</head>
<body>
<p>Contenu en français</p>
</body>
</html>

Dans un document XML, il faut utiliser l'attribut xml:lang. S'il s'agit d'un document XHTML 1.0, il est préférable d'employer les deux attributs.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

De même que la langue principale du document doit être déclarée, de même tout changement de langue au sein d'un document Web doit être identifié clairement, pour les mêmes raisons. Dans un document HTML, l'attribut lang se place dans la balise qui encadre le contenu dont la langue diffère de la langue principale.

<html lang="fr">
<head>
<title>Document en français avec des parties en langue étrangère</title>
</head>
<body>
<p>Paragraphe en français</p>
<p lang="en">Paragraph in English</p>
<p>Paragraphe en français <span lang="es">con algunas palabras en español</span></p>
</body>
</html>

Bien entendu, dans un document XML, c'est l'attribut xml:lang qui joue ce rôle. S'il s'agit d'un document XHTML 1.0, on peut utiliser l'un ou l'autre attribut, ou les deux.

Transformation élégante des tableaux

Victor Brito — Thu, 14 Feb 2008 15:00:00 +0100

Un tableau n'est pas conçu pour la mise en page d'un document Web. Ce qui ne veut pas dire qu'il faut le bannir, surtout quand on a des données qui, par nature, sont sous forme de tableaux. Encore faut-il savoir qu'un tableau, s'il n'est pas balisé de façon élégante, pose des difficultés d'accessibilité aux utilisateurs de lecteurs d'écran ou de plages braille.

Prenons l'exemple d'un tableau codé comme suit :

<table>
  <tr>
    <td>Pays</td>
    <td>Population (en millions d'habitants)</td>
    <td>Densité de la population (en habitants par kilomètre carré)</td>
  </tr>
  <tr>
    <td>France</td>
    <td>64</td>
    <td>112</td>
  </tr>
  <tr>
    <td>Espagne</td>
    <td>43</td>
    <td>86</td>
  </tr>
  <tr>
    <td>Portugal</td>
    <td>10</td>
    <td>118</td>
  </tr>
  <tr>
    <td>Inde</td>
    <td>1 080</td>
    <td>329</td>
  </tr>
  <tr>
    <td>Chine</td>
    <td>1 306</td>
    <td>136</td>
  </tr>
  <tr>
    <td>États-Unis</td>
    <td>295</td>
    <td>31</td>
  </tr>
  <tr>
    <td>Canada</td>
    <td>32</td>
    <td>3</td>
  </tr>
</table>

Un lecteur d'écran lira ce tableau comme si c'était un simple texte ; autrement dit, à partir de la deuxième ligne du tableau, l'utilisateur entendra le nom du pays, puis une série de deux nombres, si bien qu'à la longue, il ne saura plus à quoi correspondent ces chiffres.

Pour rendre le tableau accessible, il faut d'abord identifier les en-têtes de lignes et de colonnes. Pour cela, on recourt à la balise th.

<table>
  <tr>
    <th>Pays</th>
    <th>Population (en millions d'habitants)</th>
    <th>Densité de la population (en habitants par kilomètre carré)</th>
  </tr>
  <tr>
    <th>France</th>
    <td>64</td>
    <td>112</td>
  </tr>
  <tr>
    <th>Espagne</th>
    <td>43</td>
    <td>86</td>
  </tr>
  <tr>
    <th>Portugal</th>
    <td>10</td>
    <td>118</td>
  </tr>
  <tr>
    <th>Inde</th>
    <td>1 080</td>
    <td>329</td>
  </tr>
  <tr>
    <th>Chine</th>
    <td>1 306</td>
    <td>136</td>
  </tr>
  <tr>
    <th>États-Unis</th>
    <td>295</td>
    <td>31</td>
  </tr>
  <tr>
    <th>Canada</th>
    <td>32</td>
    <td>3</td>
  </tr>
</table>

Lorsqu'un tableau comporte un ou plusieurs groupes de données logiques, que ce soient des en-têtes, des corps ou des pieds de données, il faut les regrouper au moyen des balises suivantes : thead, tfoot et tbody pour regrouper les lignes, col et colgroup pour regrouper les colonnes. À noter que l'élément tfoot doit impérativement suivre thead et précéder tbody. Dans notre exemple, nous identifions clairement un groupe d'en-têtes pour la première ligne et nous pouvons regrouper les données restantes en les triant par continent, par exemple ; comme il n'y a pas de pied de tableau, nous n'utiliserons pas tfoot ; ce qui donne le code suivant :

<table>
  <thead>
    <tr>
      <th>Pays</th>
      <th>Population (en millions d'habitants)</th>
      <th>Densité de la population (en habitants par kilomètre carré)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="3">Europe</th>
    </tr>
    <tr>
      <th>France</th>
      <td>64</td>
      <td>112</td>
    </tr>
    <tr>
      <th>Espagne</th>
      <td>43</td>
      <td>86</td>
    </tr>
    <tr>
      <th>Portugal</th>
      <td>10</td>
      <td>118</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Asie</th>
    </tr>
    <tr>
      <th>Inde</th>
      <td>1 080</td>
      <td>329</td>
    </tr>
    <tr>
      <th>Chine</th>
      <td>1 306</td>
      <td>136</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Amérique</th>
    </tr>
    <tr>
      <th>États-Unis</th>
      <td>295</td>
      <td>31</td>
    </tr>
    <tr>
      <th>Canada</th>
      <td>32</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Le tableau est à présent nettement mieux structuré. Mais, cela ne suffit pas, puisqu'il faut associer les cellules de données et les cellules d'en-tête, de façon à ce que l'utilisateur du lecteur d'écran sache à quoi correspondent les chiffres qu'il entend. Pour cela, plusieurs attributs sont disponibles, comme scope, id et headers. Dans notre exemple, nous ajoutons à chaque élément th l'attribut id ; puis, à chaque élément td (ainsi qu'aux éléments th contenant le nom des pays) nous ajoutons l'attribut headers, dont la valeur reprend celle de l'id des éléments th avec lesquels nous voulons associer l'élément en question (si plusieurs valeurs doivent être saisies, elles sont séparées par une espace). Cela donne le code suivant :

<table>
  <thead>
    <tr>
      <th id="pays">Pays</th>
      <th id="population">Population (en millions d'habitants)</th>
      <th id="densite">Densité de la population (en habitants par kilomètre carré)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="3" id="europe">Europe</th>
    </tr>
    <tr>
      <th id="fr" headers="pays europe">France</th>
      <td headers="fr population europe">64</td>
      <td headers="fr densite europe">112</td>
    </tr>
    <tr>
      <th id="es" headers="pays europe">Espagne</th>
      <td headers="es population europe">43</td>
      <td headers="es densite europe">86</td>
    </tr>
    <tr>
      <th id="pt" headers="pays europe">Portugal</th>
      <td headers="pt population europe">10</td>
      <td headers="pt densite europe">118</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3" id="asie">Asie</th>
    </tr>
    <tr>
      <th id="in" headers="pays asie">Inde</th>
      <td headers="in population asie">1 080</td>
      <td headers="in densite asie">329</td>
    </tr>
    <tr>
      <th id="cn" headers="pays asie">Chine</th>
      <td headers="cn population asie">1 306</td>
      <td headers="cn densite asie">136</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3" id="amerique">Amérique</th>
    </tr>
    <tr>
      <th id="us" headers="pays amerique">États-Unis</th>
      <td headers="us population amerique">295</td>
      <td headers="us densite amerique">31</td>
    </tr>
    <tr>
      <th id="ca" headers="pays amerique">Canada</th>
      <td headers="ca population amerique">32</td>
      <td headers="ca densite amerique">3</td>
    </tr>
  </tbody>
</table>

Ainsi, l'utilisateur d'un lecteur d'écran saura que le nombre 329 correspond à la densité de population de l'Inde, qui est incluse dans le groupe de données des pays d'Asie. On peut encore améliorer l'accessibilité du tableau, en y ajoutant un sommaire ; pour cela, il y a la balise caption, qui donne une légende au tableau (elle doit être placée tout en haut de l'élément table), et l'attribut summary, qui résume le tableau (il doit être placé dans la balise table) ; si les navigateurs visuels n'affichent que caption, les lecteurs d'écran, quant à eux, restituent en outre la valeur de summary. Enfin, on peut fournir des abréviations aux en-têtes grâce à l'attribut abbr, qui doit être placé dans la balise th et est pris en compte par les lecteurs d'écran. Sur ce, le résultat final de notre exemple ressemble au code suivant (on abrège deux des en-têtes présentes, les autres ayant un contenu déjà suffisamment court) :

<table summary="Nombre d'habitants, exprimé en millions, et densité de la population, exprimée en habitants par kilomètre carré, de quelques pays">
  <caption>Tableau 1. Population et densité de population de quelques pays</caption>
  <thead>
    <tr>
      <th id="pays">Pays</th>
      <th id="population" abbr="Population">Population (en millions d'habitants)</th>
      <th id="densite" abbr="Densité de population">Densité de la population (en habitants par kilomètre carré)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="3" id="europe">Europe</th>
    </tr>
    <tr>
      <th id="fr" headers="pays europe">France</th>
      <td headers="fr population europe">64</td>
      <td headers="fr densite europe">112</td>
    </tr>
    <tr>
      <th id="es" headers="pays europe">Espagne</th>
      <td headers="es population europe">43</td>
      <td headers="es densite europe">86</td>
    </tr>
    <tr>
      <th id="pt" headers="pays europe">Portugal</th>
      <td headers="pt population europe">10</td>
      <td headers="pt densite europe">118</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3" id="asie">Asie</th>
    </tr>
    <tr>
      <th id="in" headers="pays asie">Inde</th>
      <td headers="in population asie">1 080</td>
      <td headers="in densite asie">329</td>
    </tr>
    <tr>
      <th id="cn" headers="pays asie">Chine</th>
      <td headers="cn population asie">1 306</td>
      <td headers="cn densite asie">136</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3" id="amerique">Amérique</th>
    </tr>
    <tr>
      <th id="us" headers="pays amerique">États-Unis</th>
      <td headers="us population amerique">295</td>
      <td headers="us densite amerique">31</td>
    </tr>
    <tr>
      <th id="ca" headers="pays amerique">Canada</th>
      <td headers="ca population amerique">32</td>
      <td headers="ca densite amerique">3</td>
    </tr>
  </tbody>
</table>

Bien entendu, il faut éviter d'utiliser th parce que son contenu est centré et affiché en gras par défaut sur les navigateurs visuels. Pour le centrage et la graisse, les CSS offrent de quoi s'amuser.

Si vous désirez approfondir l'utilisation des tableaux et leur accessibilité, en étudiant des cas de tableaux plus complexes que celui donné en exemple ci-dessus, vous n'avez qu'à aller au tableau.

Transformation élégante des pages présentant de nouvelles technologies

Victor Brito — Thu, 14 Feb 2008 15:00:00 +0100

Il s'agit de s'assurer que les pages sont accessibles lorsque ces nouvelles technologies sont désactivées ou ne sont pas prises en charge.

Il s'agit de s'assurer que les pages restent parfaitement consultables sans feuille de style. C'est un point d'autant plus facile à vérifier que des navigateurs visuels, comme Firefox ou Opera, offrent la possibilité de désactiver aisément les CSS. On peut aussi vérifier ce point en affichant la page sous un navigateur textuel comme Lynx, qui donne une idée de la manière dont la page est vue par les robots des moteurs de recherche.

Il s'agit aussi de s'assurer que les pages restent consultables lorsque les scripts et autres artefacts programmables sont désactivés ou ne sont pas pris en compte. Par conséquent, il faut éviter de recourir à des liens du type <a href="javascript: uneFonction ()">cliquez ici</a> : ils ne pourront pas être suivis par les utilisateurs qui n'ont pas JavaScript, parmi lesquels les robots des moteurs de recherche. Si la page a besoin d'employer des scripts, il faudra soit utiliser l'élément noscript (dont le contenu sera affiché par les navigateurs ne prenant pas en charge le script) soit remplacer les scripts exécutés sur le poste client par des scripts côté serveur, à moins de proposer une page équivalente sans ces scripts. L'élément noscript doit être utilisé comme suit :

<script type="text/javascript">
un bout de code JavaScript
</script>
<noscript>
  <p>Contenu affiché si le script n'est pas pris en charge</p>
</noscript>

Lorsque des scripts sont utilisés et qu'ils possèdent des gestionnaires d'événements, il faut s'assurer que l'utilisation de ces derniers soit indépendante des périphériques employés par l'utilisateur. Autrement dit, un événement se déclenchant par un clic de souris doit pouvoir être déclenché par l'appui sur une touche si l'utilisateur choisit la navigation au clavier, comme le montre le code ci-dessous :

<a href="http://accessibilite.britoweb.info/post/un-lien.html" onclick="javascript: unEvenement ()" onkeypress="javascript: unEvenement ()">contenu du lien</a>

Lorsque du contenu dynamique est utilisé, il faut s'assurer qu'en cas de changement de ce dernier, ses équivalents soient aussi mis à jour. Prenons l'exemple d'une page utilisant un jeu de cadres :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Jeu de cadres</title>
</head>
<frameset cols="100%" title="Cadre principal">
  <frame name="cadre" src="http://accessibilite.britoweb.info/post/pommes.png" title="Pommes" />
</frameset>
</html>

La page affiche une image dans le cadre unique. Imaginons qu'un lien vers une autre image cible ce cadre, lien codé comme suit :

<p>J'aime <a href="http://accessibilite.britoweb.info/post/oranges.png" target="cadre" title="Oranges">les oranges</a></p>

Le titre initial du cadre (Pommes) ne s'accordera plus avec le contenu courant dudit cadre (Oranges). Par conséquent, l'attribut src de frame devrait cibler un fichier HTML, dans lequel l'image serait insérée, comme suit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Jeu de cadres</title>
</head>
<frameset cols="100%" title="Cadre principal">
  <frame name="cadre" src="http://accessibilite.britoweb.info/post/pommes.html" title="Pommes" />
</frameset>
</html>

<!-- Dans pommes.html -->
<p><img src="http://accessibilite.britoweb.info/post/pommes.png" alt="Pommes" /></p>

En outre, il faut s'assurer que ce contenu dynamique reste accessible. Si ce n'est pas possible, il faut fournir une présentation de la page équivalente. Dans le cas d'un jeu de cadres, on emploiera la balise noframes, qui doit être placé dans l'élément frameset, après les différents éléments frame, et dont le contenu sera affiché par les navigateurs ne prenant pas en charge les jeux de cadres et sera visible des robots des moteurs de recherche.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Jeu de cadres</title>
</head>
<frameset cols="100%" title="Cadre principal">
  <frame name="cadre" src="http://accessibilite.britoweb.info/post/pommes.html" title="Pommes" />
  <noframes>
    <body>
      <p><img src="http://accessibilite.britoweb.info/post/pommes.png" alt="Pommes" /></p>
    </body>
  </noframes>
</frameset>
</html>

Contrôle des changements du contenu variant dans le temps

Victor Brito — Thu, 14 Feb 2008 15:00:00 +0100

Il s'agit de s'assurer que le déplacement, le clignotement, le défilement ou la mise à jour automatique d'objets et de pages peuvent être mis en pause ou arrêtés.

Certains utilisateurs ne peuvent pas lire un texte en mouvement, que les lecteurs d'écran ne peuvent pas restituer. D'autres souffrent d'un handicap physique qui ne leur permet pas d'interagir rapidement et/ou avec précision avec des objets en mouvement ou se mettant à jour automatiquement.

Les changements brusques de luminosité sont à éviter, comme des lumières stroboscopiques : ils posent problème aux utilisateurs souffrant d'épilepsie.

De même, le clignotement du contenu est à éviter. Il faut s'abstenir d'employer non seulement l'élément blink (qui, de toute façon, n'est reconnu par aucune recommandation HTML), mais aussi la propriété CSS text-decoration avec la valeur blink (d'ailleurs, les navigateurs ne sont pas tenus d'implémenter le clignotement en CSS).

Les mouvements sur les pages sont à éviter également. Si jamais il y en a, il faut prévoir un mécanisme permettant, au moyen d'un script par exemple, de les arrêter. Dans cette optique, le recours à l'élément marquee est d'autant plus à proscrire qu'il n'est reconnu par aucune recommandation HTML.

Il faut aussi éviter de créer des pages se mettant à jour automatiquement. Autrement dit, un élément comme <meta http-equiv="refresh" content="60" /> aura pour effet de rafraîchir la page toutes les 60 secondes ; or, on ne peut pas prévoir combien de temps un utilisateur a besoin pour lire la page. Une page paramétrée ainsi peut d'autant plus le désorienter qu'elle se rafraîchit plus rapidement.

De même, il faut éviter de créer des pages employant des mécanismes de redirection automatique. Autrement dit, l'utilisation d'un élément comme <meta http-equiv="refresh" content="60;http://monsite.com/url-de-la-page-destinataire-de-la-redirection.html" /> peut désorienter certains utilisateurs ; au passage, cela constitue un détournement non standard de la fonction initiale de rafraîchissement d'une page après un laps de temps (souvent réduit à 0 secondes, pour une redirection instantanée, sans affichage de la page redirigée). Si une redirection doit être effectuée, elle doit l'être au moyen d'en-têtes côté serveur, de préférence avec le code HTTP 301 (notifiant une redirection permanente), ce qui, en PHP, peut être codé comme suit :

<?php
header ('Status: 301 Redirect Permanent', false, 301);
header ('Location: http://monsite.com/url-de-la-page-destinataire-de-la-redirection.html');
?>

De plus, les différents types de redirection ne peuvent pas être renseignés par l'élément meta, ce qui rend encore plus utile le recours aux technologies côté serveur, qui ont l'avantage, dans le cas des en-têtes, de réduire le temps de chargement. Si le serveur ne peut être configuré, il faudra alors que la page redirigée prévoie un lien en dur vers la page destinataire de la redirection.

Ces différents points à éviter le sont jusqu'à ce que les agents utilisateurs intègrent des fonctionnalités permettant leur contrôle.

Accès direct aux interfaces utilisateur intégrées

Victor Brito — Thu, 14 Feb 2008 15:00:00 +0100

Il s'agit de s'assurer que l'interface utilisateur respecte les principes d'accessibilité.

Il faut concevoir tout objet inclus possédant sa propre interface de façon à ce que cette interface soit accessible ou compatible avec les différents moyens d'assistance à l'utilisateur. Elle doit être accessible aussi bien depuis le clavier qu'au moyen de commandes vocales, de même que ses fonctionnalités doivent être accessibles indépendamment du type d'interface utilisateur.

Indépendance par rapport au périphérique

Victor Brito — Thu, 14 Feb 2008 15:00:00 +0100

Il s'agit de s'assurer que l'activation d'éléments de page puisse s'effectuer au moyen de différentes interfaces d'entrée.

L'utilisateur doit avoir la possibilité d'interagir avec le document ou le navigateur, quelle que soit l'interface : souris, clavier, commande vocale… S'il souffre d'une déficience visuelle, il doit pouvoir jongler entre les champs de contrôle d'un formulaire sans être contraint d'utiliser la souris (ou tout autre dispositif de pointage), qu'il ne pourrait pas utiliser de toute façon.

Les cartes cliquables, sauf si les régions ne peuvent être définies par des formes géométriques disponibles, doivent l'être côté client plutôt que côté serveur. En outre, pour tenir compte de l'absence de dispositif de pointage, il faut prévoir des équivalents textuels, comme pour tout contenu visuel.

Il faut s'assurer que tout élément possédant sa propre interface soit activable indépendamment du dispositif (clavier, souris…). De même, les scripts doivent comporter des gestionnaires d'événements logiques plutôt que des gestionnaires dépendant de l'interface : un événement doit pouvoir être déclenché aussi bien par un clic de souris que par la frappe d'une touche de clavier.

On peut aussi développer un ordre de tabulation pour les liens, les éléments de formulaire et les objets. En HTML, on utilise l'attribut tabindex, dont la valeur est un nombre ; son utilisation a pour effet, lors de la navigation dans une page, de parcourir d'abord les éléments pourvus de cet attribut, en partant de la valeur la plus faible rencontrée, puis les éléments qui en sont dépourvus, dans l'ordre d'apparition dans le code source. Autrement dit, dans le bout de code suivant :

<p><a href="http://accessibilite.britoweb.info/post/autre-page.html">Choisir un autre formulaire</a></p>
<form action="http://accessibilite.britoweb.info/post/mapage.html" method="post">
  <p>
    <input tabindex="2" type="text" name="champ1" />
    <input tabindex="1" type="text" name="champ2" />
    <input tabindex="3" type="submit" name="validation" />
  </p>
</form>
<p><a href="http://accessibilite.britoweb.info/post/autre-page-bis.html">Choisir encore un autre formulaire</a></p>

une navigation au clavier partira du « champ2 » pour aller au « champ 1 », qui le précède, puis au champ de validation, et enfin revenir au début du document pour cibler le premier lien, puis le second.

On peut aussi fournir des raccourcis clavier aux liens les plus importants et aux champs de formulaire. En HTML, on utilise l'attribut accesskey, dont la valeur est un simple caractère (lettre ou chiffre). Si un document comporte un raccourci clavier de valeur U, par exemple, et que l'utilisateur entre sur le clavier une combinaison de touches comportant la touche U, le pointeur ciblera l'élément correspondant au raccourci clavier : s'il s'agit d'un élément label, le curseur sera placé dans le champ de contrôle correspondant ; s'il s'agit d'un lien, ce dernier sera suivi.

Utilisation de solutions intermédiaires

Victor Brito — Thu, 14 Feb 2008 15:00:00 +0100

Il s'agit de s'assurer que les anciens navigateurs et les technologies d'assistance fonctionnent correctement.

Les différents points à vérifier le sont jusqu'à ce que les agents utilisateurs puissent les prendre en charge.

Il vaut mieux ne pas produire de fenêtres s'ouvrant automatiquement ni modifier l'état de la fenêtre active sans prévenir l'utilisateur. Par conséquent, il vaut mieux ne pas utiliser de cadres ayant pour cible une nouvelle fenêtre, au moyen de l'attribut target avec comme valeur _blank. D'ailleurs, en HTML 4.01 Strict, en XHTML 1.0 Strict et en XHTML 1.1, l'attribut target n'est pas autorisé, même pour les liens. En effet, l'utilisateur doit pouvoir rester maître de sa navigation et le fait d'ouvrir un lien ou un cadre dans une nouvelle fenêtre revient à imposer une certaine forme de navigation, ce qui va à l'encontre de ce principe, et c'est encore plus flagrant lorsque la nouvelle fenêtre s'ouvre sans qu'une action ait été réalisée par l'utilisateur (cas de certaines pop-ups).

Il faut s'assurer que les champs de contrôle de formulaire soient associés à des étiquettes correctement positionnées. Pour cela, le champ de contrôle reçoit un attribut id placé dans l'élément qui le balise, tandis que l'étiquette qui s'y rapporte est signalé par l'élément label, qui comporte un attribut for, dont la valeur reprend celle de l'id de l'élément balisant le champ de contrôle concerné, comme suit :

<label for="prenom">Prénom</label> <input id="prenom" type="text" />

La sélection de l'étiquette (par pointage du curseur de la souris, par exemple) permet, sur bon nombre de navigateurs, de placer le curseur sur le champ de contrôle, voire de le sélectionner s'il s'agit d'une case à cocher ou d'un bouton radio, ce qui est pratique pour un utilisateur qui manque de dextérité ou de précision.

Quant aux tableaux, le fait que des blocs de texte soient placés côte à côte dans des cellules, chacune d'entre elles étant placée dans une colonne, peut poser problème à certains anciens lecteurs d'écran, qui ne permettent pas la navigation cellule après cellule et risquent d'interpréter différentes phrases sur une même ligne, mais sur deux ou plusieurs colonnes distinctes, comme une seule et même phrase. Dans ce cas, il faut prévoir un équivalent du contenu du tableau sous forme de texte linéaire. Cela ne doit pas, pour autant, dissuader d'utiliser les tableaux pour présenter des données tabulaires.

Les champs de contrôle de formulaire vides peuvent poser problème à certains anciens navigateurs, qui ne permettent pas de naviguer entre ces champs. Dans ce cas, il faut prévoir, pour les éléments input et textarea, des valeurs par défaut, comme suit :

<form action="http://accessibilite.britoweb.info/post/mapage.html" method="post">
  <p>
    <textarea name="votrenom" rows="20" cols="80">Veuillez entrer votre nom ici.</textarea>
    <input type="submit" value="Envoyer" />
    <input type="reset" value="Annuler" />
  </p>
</form>

Si une image est utilisée comme bouton de validation de formulaire, prévoir un équivalent textuel :

<input type="image" src="http://accessibilite.britoweb.info/post/envoyer.png" alt="Envoyer" />

Une liste de plusieurs liens consécutifs peut poser problème à certains anciens lecteurs d'écran, qui les restituent comme si ce n'était qu'un seul lien. Par conséquent, il faut prévoir de séparer ces liens consécutifs par un caractère imprimable : en effet, une simple espace ne suffit pas.

Utilisation des technologies et directives du W3C

Victor Brito — Thu, 14 Feb 2008 15:00:00 +0100

Il s'agit de s'assurer de l'utilisation des technologies préconisées par le W3C, selon les spécifications, et du respect des directives d'accessibilité. En cas d'impossibilité de les utiliser ou en cas d'une utilisation qui produit un résultat qui ne se transforme pas de façon élégante, il faut s'assurer qu'un document équivalent est fourni pour présenter le contenu.

Lorsqu'elles sont disponibles et adaptées à la tâche à accomplir, il faut utiliser les technologies du W3C, plus particulièrement les dernières versions disponibles. Ainsi, pour la présentation et la mise en forme d'un document, on utilisera la spécification CSS 2 (voire CSS 2.1).

Lorsque les technologies du W3C sont utilisées, il faut s'assurer de l'absence de recours à des fonctionnalités désapprouvées, voire obsolètes. Ainsi, en HTML, on évite d'utiliser l'élément font, qui est avantageusement remplacé par les CSS (notamment, grâce à la propriété font).

Il faut s'assurer que des renseignements soient fournies à l'utilisateur, de façon à ce qu'il puisse recevoir les documents selon ses préférences. Dans le cas d'un document Web disponible en plusieurs langues, mettre un lien vers les autres versions linguistiques du document et fournir le document en fonction de la langue demandée. Dans le cas où un lien pointe vers une URL dont la langue est différente de celle de l'URL courante, la langue de l'URL destinataire du lien est à renseigner au moyen de l'attribut hreflang dans l'élément a. Il en est de même pour le type de document s'il est différent de celui du document courant, auquel cas on recourt à l'attribut type.

<a href="http://www.w3.org" hreflang="en">Lien vers la page d'accueil du site du W3C (qui est en anglais)</a>
<a href="http://accessibilite.britoweb.info/post/unflux.rss" type="application/rss+xml">Lien vers un flux RSS</a>

En CSS, jongler avec les différents types de médias permet de mettre au point des feuilles de styles plus appropriées à certains supports, comme les imprimantes, les plages braille ou les appareils mobiles. Parmi les moyens mis à disposition par la spécification CSS, il y a la règle @media.

@media screen {
  /* Règles CSS appliquables aux écrans d'ordinateur */
}
@media print {
  /* Règles CSS appliquables à l'impression d'un document */
}
@media handheld {
  /* Règles CSS appliquables aux appareils mobiles */
}

Grâce aux CSS, il est également possible d'afficher les équivalents textuels des contenus visuels ; dans l'exemple suivant,

@media screen {
  img:after {
    content: attr(alt);
  }
}
@media print, handheld {
  img {
    content: attr(alt);
  }
}

le contenu textuel de l'attribut alt de chaque image sera affiché après cette dernière sur un écran d'ordinateur et remplacera l'image sur les appareils mobiles et à l'impression du document (ce qui n'est pas négligeable lorsqu'il s'agit d'économiser le peu d'espace disponible et les cartouches d'encre).

Et si, malgré tous ces efforts, on ne peut créer une page accessible, on créera un lien vers une page équivalente, qui utilise les technologies du W3C, soit accessible et mise à jour aussi régulièrement que la page originale inaccessible.

Information de contexte et d'orientation

Victor Brito — Thu, 14 Feb 2008 15:00:00 +0100

Il s'agit de s'assurer que l'utilisateur reçoive des renseignements sur le contexte et l'orientation, de façon à ce qu'il comprenne les éléments et les mises en page complexes.

Dans un jeu de cadres, il faut donner un titre à chaque cadre pour faciliter son identification et sa navigation. En HTML, on emploie l'attribut title dans l'élément frame.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Un document sous forme de jeu de cadres</title>
</head>
<frameset cols="10%, 90%" title="Notre bibliothèque de documents électroniques">  
  <frame src="http://accessibilite.britoweb.info/post/nav.html" title="Barre de navigation" />  
  <frame src="http://accessibilite.britoweb.info/post/doc.html" title="Documents" />
  <noframes>
    <body>
      <p><a href="http://accessibilite.britoweb.info/post/bibliotheque.html" title="Lien vers la bibliothèque">Aller à la bibliothèque électronique</a></p> 
    </body> 
  </noframes>
</frameset>
</html>

Si l'intitulé des cadres ne suffit pas à rendre évidente leur compréhension, décrire l'objectif de ces cadres et la manière dont ils interagissent entre eux. En HTML, on complète l'attribut title par l'attribut longdesc, dont la valeur est l'URL contenant la description détaillée ; on peut aussi créer un lien vers cette description. En reprenant l'exemple indiqué plus haut, on obtient ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Un document sous forme de jeu de cadres</title>
</head>
<frameset cols="10%, 90%" title="Notre bibliothèque de documents électroniques">  
  <frame src="http://accessibilite.britoweb.info/post/nav.html" title="Barre de navigation" longdesc="http://accessibilite.britoweb.info/post/description.html#navigation" />  
  <frame src="http://accessibilite.britoweb.info/post/doc.html" title="Documents" longdesc="http://accessibilite.britoweb.info/post/description.html#documents" />
  <noframes>
    <body>
      <p><a href="http://accessibilite.britoweb.info/post/description.html">Description des cadres</a></p>
      <p><a href="http://accessibilite.britoweb.info/post/bibliotheque.html" title="Lien vers la bibliothèque">Aller à la bibliothèque électronique</a></p> 
    </body> 
  </noframes>
</frameset>
</html>
<!--
Dans la page description.html, un contenu de ce genre :
#navigation - Ce cadre fournit les liens permettant la navigation dans le site
#documents  - Ce cadre affiche le document courant
-->

Lorsque de gros blocs d'information sont fournis, il est plus judicieux de les diviser en groupes plus facilement manipulables. Dans un formulaire en HTML, on regroupera les champs ayant des points communs dans un élément fieldset et les différentes options d'un champ de sélection dans des éléments optgroup, comme dans cet exemple :

<form method="post" action="http://accessibilite.britoweb.info/post/monformulaire.html">
  <fieldset>
    <legend>État civil</legend>
    <p><label for="nom">Nom</label> <input id="nom" name="nom" type="text" /></p>
    <p><label for="prenom">Prénom</label> <input id="prenom" name="prenom" type="text" /></p>
  </fieldset>
  <fieldset>
    <legend>Localisation géographique</legend>
    <p>
      <label for="localisation">Région et département</label>
      <select id="localisation" name="localisation">
        <optgroup label="Alsace">
          <option value="67">Bas-Rhin</option>
          <option value="68">Haut-Rhin</option>
        </optgroup>
        <optgroup label="Auvergne">
          <option value="03">Allier</option>
          <option value="15">Cantal</option>
          <option value="43">Haute-Loire</option>
          <option value="63">Puy-de-Dôme</option>
        </optgroup>
      </select>
    </p>
  </fieldset>
</form>

En outre, en HTML, il est possible d'imbriquer des listes quand c'est approprié, sans oublier l'utilisation d'en-têtes pour structurer le document.

<h1>Découpage administratif de la France</h1>
<h2>Liste des régions, avec leurs départements respectifs</h2>
<ol>
  <li>
    Alsace
    <ul>
      <li>Bas-Rhin</li>
      <li>Haut-Rhin</li>
    </ul>
  </li>
  <li>
    Auvergne
    <ul>
      <li>Allier</li>
      <li>Cantal</li>
      <li>Haute-Loire</li>
      <li>Puy-de-Dôme</li>
    </ul>
  </li>
</ol>
<h3>Alsace</h3>
<h4>Bas-Rhin</h4>
<dl>
  <dt>Préfecture</dt>
    <dd>Strasbourg</dd>
  <dt>Sous-préfectures</dt>
    <dd>Haguenau</dd>
    <dd>Molsheim</dd>
    <dd>Saverne</dd>
    <dd>Sélestat</dd>
    <dd>Wissembourg</dd>
</dl>

Enfin, il faut associer explicitement l'étiquette du champ de contrôle de formulaire auquel il se rapporte. En HTML, on utilise l'élément label pourvu de l'attribut for, dont la valeur est celle de l'attribut id du champ de contrôle.

<label for="prenom">Prénom</label> <input id="prenom" type="text" />

Mécanismes de navigation

Victor Brito — Thu, 14 Feb 2008 15:00:00 +0100

Il s'agit de s'assurer que des mécanismes de navigation clairs et cohérents soient fournies, de façon à ce que l'utilisateur trouve aisément ce qu'il cherche dans le site.

Il faut identifier clairement la cible de chaque lien. Un lien, une fois isolé de son contexte, peut devenir inintelligible, notamment lorsque l'utilisateur utilise un lecteur d'écran lui permettant de lister tous les liens contenus dans une page. Prenons l'exemple d'une page comportant le code suivant :

<p>
  <a href="http://accessibilite.britoweb.info/post/mon-doc.html">Mon document est disponible en HTML</a> et en
  <a href="http://accessibilite.britoweb.info/post/mon-doc.pdf">PDF</a>.
  Pour le format en texte plein, <a href="http://accessibilite.britoweb.info/post/mon-doc.txt">cliquez ici</a>.
</p>

Le lecteur d'écran restituera une liste de liens en disant : Mon document est disponible en HTML, PDF, cliquez ici. Nous nous rendons vite compte que les liens ne sont pas compréhensibles, surtout les deux derniers. Par conséquent, pour le texte des liens, il faut éviter d'employer des expressions comme Cliquez ici et expliciter la nature de la cible du lien. Si l'identification de la cible ne peut pas être concise (autrement dit, si elle excède grosso modo 80 caractères), l'attribut title permet une telle identification avec plus de précision. En reprenant l'exemple donné plus haut, cela donne :

<p>
  <a href="http://accessibilite.britoweb.info/post/mon-doc.html">Mon document est disponible en HTML</a>, en
  <a href="http://accessibilite.britoweb.info/post/mon-doc.pdf" title="Mon document en PDF">PDF</a> et en
  <a href="http://accessibilite.britoweb.info/post/mon-doc.txt" title="Mon document en texte plein">texte plein</a>.
</p>

Il faut ajouter des métadonnées pour fournir des renseignements d'ordre sémantique aux pages et au site. En HTML, on n'oublie pas d'insérer un élément title indiquant l'intitulé de la page consultée, ainsi que des éléments fournissant des renseignements précieux comme le type de contenu, le tout devant être situé dans l'élément head.

<head>
  <title>Intitulé du document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="author" content="Victor Brito" />
  <meta name="generator" content="Nom de l'outil utilisé pour générer le document" />
</head>

Il faut fournir des renseignements sur la mise en forme générale du site, comme un plan du site ou une table des matières, ce qui, soit dit en passant, facilite l'indexation du site par les robots des moteurs de recherche. C'est là qu'on mettra en valeur et expliquera les options d'accessibilité disponibles.

Les mécanismes de navigation doivent être utilisés de façon cohérente. On s'assurera, par exemple, que certaines structures, comme les barres de navigation, les blocs de contenu et les blocs d'avertissement se trouvent au même endroit, quelle que soit la page consultée.

Des barres de navigation doivent être fournies pour mettre en valeur les mécanismes de navigation et permettre leur accès.

Lorsque plusieurs liens sont de même nature, il faut les regrouper, identifier le groupe et s'assurer que l'on puisse l'éviter. Certains utilisateurs, notamment les non-voyants, prennent connaissance des liens les uns après les autres. L'utilisation d'un ou de plusieurs groupes de liens peut signifier que ces derniers sont en grand nombre. Si l'utilisateur veut accéder à un lien situé en dehors de ce groupe, il faut prévoir un lien d'évitement qui lui permettra d'accéder plus rapidement au lien voulu. L'exemple ci-après illustre le propos :

<map id="navigation" title="Barre de navigation">
  <p>
    [<a href="http://accessibilite.britoweb.info/post/Mecanismes-de-navigation#comment">Sortir de la barre de navigation</a>]
    [<a href="http://accessibilite.britoweb.info/post/accueil.html">Accueil</a>]
    [<a href="http://accessibilite.britoweb.info/post/recherche.html">Recherche</a>]
    [<a href="http://accessibilite.britoweb.info/post/nouvelles.html">Nouvelles</a>]
    [<a href="http://accessibilite.britoweb.info/post/plan.html">Plan du site</a>]
  </p>
</map>
<h1><a id="comment">Comment utiliser notre site</a></h1>

Si des fonctions de recherche sont prévues, il convient de rendre possible plusieurs types de recherche en fonction de préférences.

Il convient de placer des renseignements distincts au début des en-têtes, des paragraphes, des listes… Ils sont utiles aux utilisateurs de synthèses vocales. Autrement dit, il convient de placer le sujet de la phrase ou du parapraphe au début de ces derniers.

Il convient de fournir des renseignements lorsqu'un document comprend plusieurs pages. En HTML, on emploie l'élément link avec les attributs rel et rev pour expliciter les relations entre les pages. Cela peut améliorer le temps de chargement, en ce sens que les navigateurs peuvent « précharger » les pages indiquées dans les éléments link sans que l'utilisateur ait demandé à les consulter (même s'il peut éventuellement le faire), ce qui est pratique pour les utilisateurs utilisant une connexion lente ou naviguant lentement. Prenons l'exemple d'un livre en ligne ouvert au chapitre 2 ; on pourra établir les relations suivantes :

<link rel="next" href="http://accessibilite.britoweb.info/post/chapitre-3.html" />
<link rel="prev" href="http://accessibilite.britoweb.info/post/chapitre-1.html" />
<link rel="start" href="http://accessibilite.britoweb.info/post/couverture.html" />
<link rel="contents" href="http://accessibilite.britoweb.info/post/table-des-matieres.html" />

L'attribut rev joue un rôle complémentaire de l'attribut rel ; autrement dit, pour deux documents A et B, <link href="http://accessibilite.britoweb.info/post/document-b.html" rel="document" /> dans A aura la même signification que <link href="http://accessibilite.britoweb.info/post/document-a.html" rev="document" /> dans B.

Enfin, il convient de fournir un moyen de sauter un art ASCII qui s'étend sur plusieurs lignes, comme dans l'exemple suivant.

<p><a href="http://accessibilite.britoweb.info/post/Mecanismes-de-navigation#post-art">Sauter l'art ASCII</a></p>
<pre>
  %    __ __ __ __ __ __ __ __ __ __ __ __ __ __   
100 |              *                             |
 90 |                 *  *                       |
 80 |           *           *                    |
 70 |              @           *                 |
 60 |           @                 *              |
 50 |        *        @              *           |
 40 |                    @              *        |
 30 |     *  @              @  @           *     |
 20 |                                            |
 10 |     @                       @  @  @  @     |
       0  5 10 15 20 25 30 35 40 45 50 55 60 65 70
</pre>
<p><a id="post-art">Fréquence de flash (en hertz)</a></p>

Clarté et simplicité des documents

Victor Brito — Thu, 14 Feb 2008 15:00:00 +0100

Il s'agit de s'assurer que les documents sont clairs et simple, afin d'être plus facilement compris.

Il faut utiliser le langage le plus clair et le plus simple qui soit approprié pour le contenu d'un site. Autrement dit, toute forme de jargon, d'argot ou de termes à sens spécifique est à proscrire, à moins d'être définie dans le document. À l'inverse, il faut privilégier le vocabulaire courant.

Il convient de compléter le texte par des illustrations graphiques ou auditives là où ces dernières facilent la compréhension.

Enfin, il convient de créer un style de présentation cohérent pour toutes les pages. Pour cela, il convient d'utiliser le moins de feuilles de style possible, de privilégier les feuilles de style externes et d'éviter d'utiliser des CSS internes (que ce soit dans l'élément style dans l'élément head ou dans l'attribut style dans n'importe quel élément structurant le corps d'une page HTML) : la maintenance en sera plus facile et rapide.

Pourquoi l'accessibilité

Victor Brito — Sat, 02 Feb 2008 00:41:00 +0100

Le Web est, en principe, destiné à tout le monde, quel que soit le lieu de résidence. Pour qu'il remplisse ce rôle, il doit être accessible au plus grand nombre.

Pour surfer, un grand nombre d'internautes utilise un navigateur graphique, comme Internet Explorer, Firefox, Opera ou Safari. Je dis bien un grand nombre, et non pas tous. Pourquoi ?

Fermez les yeux et vous comprendrez ce à quoi je veux en venir. En effet, il existe des internautes qui souffrent d'un handicap physique, notamment des aveugles, qui, de par la nature de leur handicap, ne peuvent ni lire le contenu d'un site ni en cerner la langue ni en voir les images. Heureusement, il existe des lecteurs d'écran et des plages brailles, qui leur restituent le contenu des sites Web consultés, grâce à une analyse du code source.

Imaginez à présent qu'on vous confisque la souris. Si, à présent, vous ne pouvez pas parcourir le site avec votre clavier, c'est que le site n'est pas accessible à quiconque utilise, par nécessité ou par préférence, la navigation au clavier pour jongler entre les liens.

Et je ne me hasarde pas à parler de désactivation de JavaScript ni de désinstallation de Flash : vous fuiriez une bonne partie des sites événementiels et des sites vitrines de certaines marques ou enseignes plus ou moins renommées.

Et que dire des robots des moteurs de recherche ?

Bref, il n'existe pas de profil unique d'internaute. Mais, il ne suffit pas de songer aux différents cas de handicap physique, technologique, voire culturel : il faut que le Web puisse offrir du contenu qui soit au moins décemment consultable, à défaut de chercher un confort extrême.

Pour approfondir les raisons de la nécessité d'un Web accessible, rien de mieux que cet article d'Élie Sloïm et de Laurent Denis, intitulé Pourquoi l'accessibilité numérique. À noter que le W3C a mis en place une initiative appelée WAI (soit dit en passant, c'est de l'anglais, pour ceux qui n'auraient pas repéré la langue du lien dans le code source ).