Calendrier

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      
<< < > >>

W3C

  • Feed RSS 2.0
  • Feed ATOM 1.0
  • Feed RSS 2.0
Mardi 6 juillet 2004

6

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

Point 1.1 : Fournir un texte équivalent pour chaque élément non textuel (via les attributs "alt", "longdesc", ou dans le contenu de l'élément).


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.

Point 1.2 : S'assurer que toute l'information transportée par la couleur est également disponible sans, par exemple par le contexte ou des balises.
Point 1.3 : Identifier clairement les changements de langue du texte d'un document et de tous les équivalents textuels.

Tester avec un logiciel de synthèse vocale type Home Page Reader.
Exemple pour un document non anglais :

<span lang="en">English Word</span>

Point 1.4 : Organiser les documents de façon à ce qu'ils puissent être lus sans feuille de style.

Pour ce faire, je vous conseille vivement d'utiliser des navigateurs tels que Opera, Mozilla Firefox ou Lynx.

Point 1.5 : S'assurer que les équivalents pour le contenu dynamique sont mis à jour quand ce contenu change : synchronisation des mises à jour et des équivalents textuels si nécessaire.
Point 1.6 : Eviter de faire scintiller l'écran (clignotements, animations) tant que les navigateurs n'autorisent pas les utilisateurs à contrôler le scintillement.

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=""

Point 1.7 : Employer le langage le plus clair et le plus simple, de la manière la plus appropriée au contenu d'un site.
Point 1.8 : Fournir du texte redondant pour chaque région active côté serveur d'une hyperimage.
Point 1.9 : Identifier les entêtes des lignes et des colonnes pour des tableaux de données.

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
Point 1.10 : Donner un titre à chaque frame pour faciliter leur identification ainsi que la navigation.

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>

Point 1.11 : S'assurer que les pages sont utilisables quand les scripts, applets, ou tout autre objet programmé sont désactivés ou non supportés.

Si ce n'est pas possible, fournissez une information équivalente sur une page alternative et accessible.
Exemple :

<noscript>Texte Explicatif ou contenu équivalent</noscript>

Point 1.12 : De manière générale, s'assurer qu'aucune information textuelle ne soit fournie qu'à l'aide de scripts.

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>

Point 1.13 : Fournir une description auditive des informations importantes de la piste visuelle d'une présentation multimédia tant que les navigateurs ne peuvent pas lire à voix haute le texte équivalent d'une piste visuelle.
Point 1.14 : Synchroniser les alternatives équivalentes (i.e., sous-titres ou descriptions auditives d'une piste visuelle) avec la présentation pour n'importe quelle présentation multimédia basée sur le temps (i.e., un film ou une animation)

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.

Point 1.15 : Dernière alternative

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.

par davios publié dans : poilade
ajouter un commentaire commentaires (3)    créer un trackback recommander
comment referencer son site sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus