le blog de l'accessibilité

Calendrier

Mai 2008

L

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

Jeudi 8 juillet 2004

Le niveau de conformité Double AA.

Dans ce deuxième niveau de conformité, l'objectif est d'utiliser le HTML de la manière la plus stricete qui soit en privilégiant les balises ayant un sens formel et non les balises de présentation.

Je résumerais personnellement l'objectif par :

Structurer l'information et privilégier les standards.

Point 2.1 : S'assurer que la combinaison des couleurs d'arrière plan et d'avant plan fournit un contraste suffisant lorsqu'elle est vue par quelqu'un ayant une déficience au niveau des couleurs ou lorsqu'elle est vue sur un écran noir et blanc. [Priorité 2 pour les images, Priorité 3 pour le texte]..

Point 2.2 : Créer des documents qui soient validés par la grammaire formelle publiée.

HTML 4 : http://www.w3.org/TR/html4/
XHTML 1 : http://www.w3.org/TR/xhtml1/

Point 2.3 : Utiliser des feuilles de styles pour contrôlez la mise en page et la présentation.

CSS 1 : http://www.w3.org/TR/CSS1/
CSS 2 : http://www.w3.org/TR/CSS2/

Point 2.4 : Utiliser des unités relatives plutôt qu'absolues dans les valeurs des attributs du langage de balises et dans les valeurs des propriétés des feuilles de styles.

Les problèmes qu'impliquent les unités absolues en CSS sont par exemple :

cela empêche l'agrandissement de la police du texte.
cela empêche un redimenssionnement de la page.

Exemple :

font-size:small; et non font-size:12px;
Les tailles de police standards sont : xx-smal, x-small, small, medium, large, x-large, xx-large.

Point 2.5 : Utiliser des entêtes d'éléments pour indiquer la structure d'un document.

Très bon article sur les DOCTYPE : http://pompage.net/pompe/doctype/

Point 2.6 : Baliser correctement les listes et leurs éléments.

Utiliser de manière correcte les balise suivantes :

<ul> : Liste à puces
<ol> : Liste ordonnée
<li> : Elément d'une liste
<dl> : Liste de définitions
<dt> : Terme
<dt> : Définition

Point 2.7 : Baliser les citations. Ne pas utiliser ces balises pour réaliser des effets de formatage tels que l'indentation.

<q> : Citation en ligne
<blockquote> : Bloc de citation

Point 2.8 : S'assurer que le contenu dynamique est accessible ou qu'une page ou une présentation alternative soit fournie.

Point 2.9 : Ne pas créer de pages se rafraîchissant toutes seules périodiquement tant que les navigateurs ne fournissent pas la possibilité d'arrêter le rafraîchissement.

Eviter les META Refresh en général ou tout du moins dans les pages proposant de l'information.

Point 2.10 : Ne pas utiliser de script pour rediriger les pages automatiquement tant que les navigateurs ne fournissent pas la possibilité d'arrêter les redirections automatiques.

À la place, configurer le serveur pour effectuer les redirections. Ces redirections peuvent également être préjudiciables pour le référencement du site dans les moteurs de recherche.

Point 2.11 : Ne pas provoquer l'apparition de popups ou d'autres fenêtres et ne changez pas la fenêtre courante sans en informer l'utilisateur tant que les navigateurs ne fournissent pas la possibilité d'empêcher l'ouverture de fenêtres.

Pour ouvrir un popup, il suffit de garder un attribut href="" explicite et d'ouvrir la popup de la manière suivante :

href="page.html" onclick="window.open(this.href); return false;"

Point 2.12 : Eviter les fonctionnalités dépréciées des technologies du W3C.

Les balises suivantes sont à bannir :

<b>,<i>,<font> : ces balises doivent être remplacées par des balises portant de l'information (<strong>,<em>) ou par du CSS
<table> pour la mise en page.

Un très bon article sur les balises déconseillées : Bad Tags

Point 2.13 : Diviser les grands blocs d'information en groupes plus maniables quand c'est naturel et approprié.

Hiérarchiser au maximum chaque page en imbriquant des balises <div> de manière logique.

Point 2.14 : Identifier clairement la cible de chaque lien.

Pour ce faire, rajouter un attribut title="" sur votre lien si le texte de ce dernier n'est pas assez explicite.

Point 2.15 : Fournir des méta données (balises <META>) pour ajouter des informations sémantiques aux pages et aux sites.

L'article du W3C sur les balises META : http://www.w3.org/TR/html4/struct/global.html#edef-META

Point 2.16 : Fournir des informations à propos de la structure générale d'un site.

A l'aide de balises <link>, il est possible de fournir de l'information supplémentaire pour expliciter les principaux liens.

Exemples :

Point 2.17 : Ne pas utiliser de tableaux pour la mise en page à moins que le tableau garde un sens une fois linéarisé.

Pour vérifier la linéarisation d'un tableau, utilisez un navigateur texte pour visualiser votre site. Opera a également un option pour tout simplement désactiver les tableaux.

Point 2.18 : N'utiliser aucune balise structurelle pour faire du formatage visuel si un tableau est utilisé pour la mise en page.

Point 2.19 : Décrire l'objectif des frames et comment elles sont reliées les unes aux autres si ce n'est pas clair avec leurs titres seuls.

Une description dans une balise <noframe> pourrait être une première approche mais l'abandon de l'utilisation des frames reste un objectif primordial dans l'accessibilité.

Point 2.20 : S'assurer que les libellés sont explicitement associés avec leurs champs.

Pour ce faire, vérifier qu'une balise <label> est bien présente et positionnée par rapport à chaque champ du formulaire.

Point 2.21 : Pour les scripts et les applets, s'assurer que les gestionnaires d'évènements sont indépendants du périphérique d'entrée.

Il faut donc créer des scripts fonctionnels et accessibles au clavier ET à la souris.

A chaque attribut onclick="", rajouter un attribut onkeypress=""
A chaque attribut onmouseover="", rajouter un attribut onfocus=""
A chaque attribut onmouseout="", rajouter un attribut onblur=""

Voilà pour le niveau AA. Comme on dit : "Stay tuned" pour le dernier niveau.

par davios publié dans : poilade
ajouter un commentaire commentaires (2) créer un trackback recommander

Mardi 6 juillet 2004

Le niveau de conformité Simple A.

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 :

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 :

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 :

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

le blog de l'accessibilité

Calendrier

W3C

Le niveau de conformité Double AA.

Le niveau de conformité Simple A.

6

Recherche

Articles récents

Liens