| Juillet 2008 | ||||||||||
| L | M | M | J | V | S | D | ||||
| 1 | 2 | 3 | 4 | 5 | 6 | |||||
| 7 | 8 | 9 | 10 | 11 | 12 | 13 | ||||
| 14 | 15 | 16 | 17 | 18 | 19 | 20 | ||||
| 21 | 22 | 23 | 24 | 25 | 26 | 27 | ||||
| 28 | 29 | 30 | 31 | |||||||
|
||||||||||
L'objectif est d'optimiser le code des pages HTML pour fournir le plus souvent possible un contenu textuel (de manière alternative aux images, aux fichiers PDF ou aux contenus multimédias etc.).
Je résumerais personnellement l'objectif par :
Rendre l'information accessible et privilégier le contenu textuel
Exemple :
<img src="..." alt="Description de l'image">
Ceci inclut : les images, les graphiques, les régions d'hyperimages (<map>), animations (i.e., des GIFs animés), les applets et les objets, les frames, les scripts, les sons (joués avec ou sans l'interaction de l'utilisateur), les fichiers audio autonomes, les pistes audio de vidéos, et les vidéos.
Tester avec un logiciel de synthèse vocale type Home Page Reader.
Exemple pour un document non anglais :
<span lang="en">English Word</span>
Pour ce faire, je vous conseille vivement d'utiliser des navigateurs tels que Opera, Mozilla Firefox ou Lynx.
Toute animation à l'écran doit pouvoir être contrôlée par l'utilisateur avec au moins les commandes suivantes : PLAY et STOP.
De plus ces contrôles doivent être indépendant du périphérique : ceci inclut le fait que l'animation soit aussi bien contrôlable par la souris que par le clavier.
Exemple pour une animation Javascript :
onmouseover="..." et son équivalent clavier onfocus="" onmouseout="..." et son équivalent clavier onblur=""
Lorsque vous utilisez des tableaux de données, il faut identifier les entêtes précisément à l'aide des balises <th>.
<table cellpadding="10" border="1" summary="Tableau de présentation des entêtes TH">
<thead>
<tr>
<td></td>
<th scope="col">Colonne 1</th>
<th scope="col">Colonne 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Ligne 1</th>
<td>Valeur 1.1</td>
<td>Valeur 1.2</td>
</tr>
<tr>
<th scope="row">Ligne 2</th>
<td>Valeur 1.1</td>
<td>Valeur 1.2</td>
</tr>
</tbody>
</table>
| Colonne 1 | Colonne 2 | |
|---|---|---|
| Ligne 1 | Valeur 1.1 | Valeur 1.2 |
| Ligne 2 | Valeur 1.1 | Valeur 1.2 |
Exemple :
<frameset cols="33%,*" title="frameset exemple">
<frame name="navigation" src="navigation.htm" title="Colonne de gauche pour la navigation.">
<frame name="principal" src="contenu.htm" title="Partie principale de la page.">
</frameset>
Si ce n'est pas possible, fournissez une information équivalente sur une page alternative et accessible.
Exemple :
<noscript>Texte Explicatif ou contenu équivalent</noscript>
Bien sûr pour satisfaire le principal objectif qui est de privilégier le contenu textuel, il vaut mieux éviter l'insertion de texte à l'aide du Javascript. Cependant, si vous utilisez des menus en DHTML ou autre fantaisie de présentation, il est indispensable de fournir l'équivalence dans le <noscript>
Malheureusement, peu de sites dits "accessibles" se lancent dans le multimédia, mais quand on sait ce que cela implique, on les comprend mieux. En effet, que ce soit la synchronisation des sous-titres et des scripts ou la présence des alternative texte dans la page, tout ceci induit un travail considérable.
En cas d'échec sur la tentative de rendre une page accessible, fournir un lien vers une page alternative qui utilise les technologies du W3C, qui est accessible, a une information équivalente (ou une fonctionnalité), et qui est mise à jour aussi souvent que la page inaccessible (originale).
Voilà pour le niveau A, en espérant que ces quelques points pourront vous aider à prendre les bons réflexes de développements pour vos sites.
A bientôt pour les deux niveaux suivants.