Documentation du logiciel A-Prompt

Vous trouverez ici une explication détaillée sur chaque point de contrôle des Règles d'accessibilité pour les contenus Web 1.0. La majeure partie de ce contenu est extrait de l'Aide du logiciel A-Prompt dont j'ai fait la traduction en 2001.

PRIORITÉS DE NIVEAU 1

Perceptible P1

1.1 (P1) Fournir un équivalent textuel pour tout élément non-textuel (par exemple via "alt", "longdesc", ou dans le contenu des éléments). Ceci inclut : les images, les représentations graphiques de texte (y compris les symboles), les zones sensibles des images cliquables, les animations (par exemple les GIF animés), les applets et objets programmes, l'art ascii, les cadres, les scripts, les images utilisées comme puces pour les listes, les images d'espacement, les boutons graphiques, les sons (joués avec ou sans interaction de l'utilisateur), les fichiers audio indépendants, les pistes audio de vidéos, et la vidéo.

1.1a Image sans équivalent textuel

Extrait de l'Aide du logiciel A-Prompt

Fournir un équivalent textuel ou texte "alt" pour les images est le premier point de contrôle dans les règles d'accessibilité de la Web Accessibility Initiative (WAI). Toutes les images, incluant celles utilisées à des fins décoratives, les représentations graphiques de texte, les puces, symboles et images d'espacement exigent un équivalent.

Si une image est utilisée seulement pour embellir une page, alors une brève description suffit. Par exemple, si un concepteur Web utilise l'illustration d'un arbre de Noël comme élément décoratif pour la période des fêtes, un équivalent textuel acceptable pourrait être : <img src="arbre.gif" alt="Illustration d'un arbre de Noël">

Si, toutefois, l'illustration de l'arbre de Noël est un lien vers une page offrant une sélection de décorations pour le temps des fêtes, alors le texte "alt" devrait décrire la destination ou l'objectif du lien plutôt que l'image elle-même. Dans l'exemple ci- dessus, un équivalent textuel approprié pourrait se lire comme suit: <img src="arbre.gif" alt="Lien vers la page des décorations de Noël">

Là où une image en mode point est utilisée à la place du texte, reproduisez ce texte dans l'attribut "alt". Par exemple, supposons que les propriétaires d'un commerce fictif, Librairie ABC, souhaitent que le nom de la compagnie et son slogan soient représentés par un graphique utilisant une police de caractères avec un effet particulier. Un équivalent textuel approprié serait de répéter le texte présenté dans l'image (i.e. "Librairie ABC - le chef de file du livre éducatif"). Idéalement, les auteurs Web devraient utiliser les feuilles de style CSS pour donner un style au texte plutôt que d'utiliser un graphique.

Quand une image est utilisée comme image d'espacement, symbole décoratif ou dessin, il convient d'utiliser "image d'espacement", "vide" ou même nul (i.e. alt="") comme équivalent textuel. Pareillement, pour les images utilisées comme puces ou barres horizontales, indiquez leur présence en les identifiant (i.e. alt="*", alt="barre horizontale". En ce qui concerne les symboles, lorsque qu'un langage particulier de balisage existe, comme MathML, utilisez-le à la place d'un équivalent textuel.

Il peut sembler superflu d'inclure un texte "alt" pour les petites images décoratives qui n'ont d'autre fin que d'embellir une page, mais un équivalent textuel manquant crée un obstacle important pour un utilisateur de lecteur d'écran. Quand un équivalent textuel n'est pas inclus, un lecteur d'écran lira seulement le mot "image". L'utilisateur ne reçoit aucune indication à propos de l'utilité ou de l'importance de l'image ou du fait qu'elle est utilisée simplement comme élément décoratif. La seule information qu'il reçoit est le mot "image".

Autres règles concernant les équivalents textuels :

Utilisez une formulation courte et concise pour décrire une image (i.e. 10 à 12 mots maximum).

Si l'équivalent textuel d'une image dépasse 150 caractères, utilisez l'attribut "longdesc" et/ou un lien descriptif ("lien- d") pour décrire l'image. Utilisez l'équivalent textuel pour indiquer que le lien conduit à une description plus complète.

N'utilisez pas l'information sur la taille du fichier comme équivalent textuel (i.e. alt="1675 octets").

N'utilisez pas le nom de l'image comme équivalent textuel (i.e. alt="arbre_noel.gif").

N'utilisez pas de texte substituable comme équivalent textuel (i.e. alt="insérer l'image ici").

Toutes les images exigent un équivalent textuel, mais le texte "alt" doit aussi satisfaire certains critères, autrement, il peut être considéré comme suspect. Voici quelques exemples de textes "alt" suspects :

Texte "alt" qui dépasse 150 caractères (10 à 12 mots).

Texte "alt" utilisé pour décrire une image quand cette image est utilisée comme lien (Le texte "alt" devrait décrire la destination du lien.).

Texte "alt" qui comporte une information sur la taille (i.e. alt="1675 octets").

Texte "alt" qui comporte un nom de fichier (i.e. alt="arbre_noel.gif") ou une extension de fichier image (i.e. alt="JPEG/GIF/PING" etc.).

Texte "alt" qui est utilisé comme texte substituable (i.e. alt="Insérer l'image ici").

Texte "alt" qui n'identifie pas les images utilisées comme "image d'espacement", puces ou barres horizontales.

Le texte alternatif doit non seulement être descriptif, mais également concis. Si le texte "alt" dépasse 150 caractères, utilisez l'attribut "longdesc" et un "lien-d" pour décrire l'image et l'attribut "alt" pour indiquer que le lien conduit à une description plus complète.

N'utilisez pas le texte "alt" pour décrire l'apparence d'une image utilisée comme lien. L'attribut "alt" devrait plutôt décrire la destination du lien (i.e. alt="Aller à la page d'accueil"). Pareillement, quand une image est utilisée en remplacement d'un texte.

1.1b Image sans texte descriptif

Extrait de l'Aide du logiciel A-Prompt :

Lorsqu'un court texte alternatif (i.e. texte "alt") ne peut décrire adéquatement la fonction ou l'usage d'une image, les règles d'accessibilité de la Web Accessibility Initiative (WAI) stipulent que les auteurs de contenu Web doivent donner accès à une description plus complète.

Par exemple, imaginez qu'un graphique à barres est utilisé pour illustrer les variations des actions d'une compagnie Internet naissante (Livres ABC.com) pour le mois de décembre. Compte tenu que le texte "alt" doit être limité à 10 à 12 mots, un auteur de contenu Web ne sera pas en mesure de décrire adéquatement une image aussi complexe. Par contre, l'attribut "longdesc" peut donner un lien vers un texte descriptif plus détaillé pour ceux qui ne peuvent voir les graphiques.

Exemple :

<IMG src="titre_valeur.gif" alt="Valeur du titre de 'Livres ABC.com' pour décembre 2000" longdesc="titre_valeur.html">

Le lien "longdesc" pour l'exemple ci-haut pourrait conduire les utilisateurs à la description suivante :

"Ce graphique à barres illustre les variations de la valeur des actions de 'Livres ABC.com' pour le mois de décembre 2000. Le graphique indique la valeur en dollars et la variation en pourcentage du titre de la compagnie pour chaque semaine. Dans la première semaine, la valeur du titre a augmenté de 4 $ l'action à 4,40 $, un gain de 10 %. Dans la deuxième semaine, l'action baisse de 5 % à 4,18 $. La troisième semaine voit une diminution de 20 % à 3,34 $. L'action rebondit avec un gain de 15 % pour terminer à 3,84 $ la dernière semaine de décembre."

1.1c Image (bouton) sans équivalent textuel

Extrait de l'Aide du logiciel A-Prompt :

Selon les règles d'accessibilité de la Web Accessibility Initiative (WAI), si une image est utilisée comme bouton, les auteurs de contenu Web doivent inclure un texte "alt" pour cette image.

Quand vous créez un équivalent textuel pour des boutons, ne décrivez pas l'image elle-même, mais plutôt la destination ou la fonction du lien. Par exemple, si l'image d'une boîte aux lettres sert de lien vers une adresse de courrier électronique, n'utilisez pas une description comme la suivante :<alt="Image d'une boîte aux lettres">

Un texte "alt" approprié pour l'exemple ci-dessus pourrait être : <a href="courrier.html"><img src="courrier.gif" alt="Lien vers mon adresse de courrier électronique"></a>

Autres règles pour les équivalents textuels

Placez une espace dans un texte "alt" (i.e. alt=" ").

N'utilisez pas la taille d'une fichier image comme texte "alt" (i.e. alt="230 octets").

N'utilisez pas une extension de fichier image comme texte "alt" (i.e. alt="JPG/GIF/PNG").

N'utilisez pas un texte substituable comme texte "alt" (i.e. alt="la description de l'image va ici").

1.1d APPLET sans contenu équivalent

Extrait de l'Aide du logiciel A-Prompt :

Selon la Web Accessibility Initiative (WAI), les développeurs de contenu doivent fournir un texte équivalent pour les APPLETS afin de s'assurer que l'information est aisément accessible à ceux qui ne peuvent accéder aux graphiques.

À titre d'exemple, considérez un APPLET qui représente l'accumulation de neige sur le sol d'une forêt pour donner les quantités (en pouces et en centimètres) pour les mois d'hiver. Les utilisateurs de lecteur d'écran et ceux qui ont désactivé Java dans leur navigateur ne seront pas capables d'accéder à cette information.

Pour s'assurer que le contenu d'un APPLET est disponible pour tous les visiteurs, les développeurs Web doivent fournir un texte équivalent détaillé. Une description pour l'exemple ci-dessus, pourrait donner :

"L'APPLET représente les chutes de neige dans une forêt de pins. Une échelle verticale indique les quantités de neige tombées en centimètres et en pouces pour les zones rurales durant les mois de novembre à mars. Ces données ont été placées dans un TABLEAU intitulé 'Chutes de neiges mensuelles totales.'"

(Note : "TABLEAU" serait un lien.)

Les développeurs de contenu Web devraient essayer de fournir un texte de remplacement qui contient essentiellement la même information ou remplit le même usage que l'APPLET. Dans certains cas, il peut même être aidant de décrire le contenu visuel ou les effets sonores accompagnant l'APPLET.

Bien que l'élément APPLET soit désapprouvé en HTML 4 (remplacé par l'élément OBJECT), il est encore largement utilisé. Alors qu'un attribut "alt" est utile pour décrire brièvement l'action ou l'usage d'un APPLET, une description plus complète peut être requise. Parce que le contenu de remplacement est placé entre les balises d'ouverture et de fermeture de l'APPLET, la description peut être aussi détaillée que nécessaire.

1.1e Objet sans contenu équivalent

Extrait de l'Aide du logiciel A-Prompt :

Selon les règles d'accessibilité de la Web Accessibility Initiative (WAI), si l'élément OBJECT est utilisé pour incorporer une image dans un document, alors les auteurs Web doivent inclure un équivalent textuel décrivant l'objet.

La description (ou le lien vers une longue description) est placée à l'intérieur du contenu de l'élément OBJECT comme suit :

<OBJECT classid="myclass.class" title="...le titre va ici..."> ...la description de l'objet est entrée entre les balises d'ouverture et de fermeture. Elle peut être brève ou relativement longue (si on la compare à un texte "alt"). Si une description approfondie est requise, un lien vers une longue description ("lien-d") peut également être inséré ici... </ OBJECT>

1.1f Fichier audio sans transcription textuelle

Extrait de l'Aide du logiciel A-Prompt :

Selon les règles d'accessibilité de la Web Accessibility Initiative (WAI), les contenus Web qui contiennent des fichiers audio doivent offrir une transcription textuelle qui décrit le son et reproduit le contenu de ce fichier.

Il faut absolument que l'information présentée dans les fichiers audio (i.e. effets sonores avec ou sans interaction de l'usager, discours, chansons, etc.) soit également offerte sous la forme de texte suivi, de transcription textuelle ou d'une description afin d'assurer l'accessibilité pour ceux qui ne peuvent accéder aux fichiers audio.

Si, par exemple, un script est utilisé pour sonner une cloche d'avertissement chaque fois que les visiteurs entrent un mot de passe invalide, un équivalent textuel doit également être fourni pour indiquer que le mot de passe est incorrect. Quand le fichier audio est accompagné d'un graphique, les auteurs Web devraient considérer l'inclusion d'une description du son dans le texte "alt" de l'image.

Dans l'exemple ci-dessous, le graphique accompagnant la cloche d'avertissement pourrait être représenté par un panneau "stop" avec le texte "alt" suivant :

<img src="panneaustop.gif" alt="Panneau "stop" et fichier audio: une cloche d'avertissement indique que le mot de passe est invalide">

Si le fichier audio contient une quantité importante d'information, placé un lien dans le document qui conduit à une transcription textuelle complète du fichier audio. Cette technique est pertinente pour reproduire les paroles d'une chanson ou les passages d'un discours.

1.1h Image cliquable - zone sensible sans équivalent textuel

Extrait de l'Aide du logiciel A-Prompt :

Si l'élément AREA est utilisé pour créer une image cliquable (une image avec des zones définies comme "zones sensibles"), alors les auteurs de contenu Web doivent inclure un équivalent textuel pour chaque zone. Lisez "Image cliquable (côté serveur) à convertir" pour une explication plus détaillée concernant les images cliquables.

Le texte "alt" pour chaque AREA doit indiquer la destination du lien plutôt que donner une description de l'image réelle. Il est important de se rappeler que chaque zone cliquable doit aussi être accessible au clavier et non seulement avec un périphérique de pointage comme une souris.

Considérez une image qui illustre l'extérieur d'une librairie. Imaginez que cette image a été divisée en trois sections spécifiques qui ont été définies comme zones cliquables en utilisant l'élément MAP. Le code source HTML qui suit présente des exemples d'équivalents textuels appropriés pour les éléments AREA d'une image cliquable :

<IMG src="bookstore.gif" alt="Image cliquable des zones sensibles de la librairie ABC" usemap="#map1"> <MAP name="map1"> <AREA shape="rect" coords="5,5,25,25" href="fiction.html" alt="Liste de livres de fiction courants (romans, anthologies, nouvelles) et littérature classique actuellement en stock"> <AREA shape="rect" coords="35,35,75,75" href="nonfiction.html" alt="Liste des livres non-fiction, livres pour s'aider soi-même et comment faire"> <AREA shape="rect" coords="70,70,125,125" href="livrepourenfant.html" alt="Livres pour enfants et ados"> </MAP>

1.1j Art ASCII sans description

Extrait de l'Aide du logiciel A-Prompt :

Souvent, l'art ASCII (illustrations créées avec des caractères et des symboles du clavier) ne peut pas être accessible aux utilisateurs de navigateurs vocaux ou textuels.

Parce qu'il est plus facile de donner un équivalent textuel pour une image par point ou vectorielle, les règles de la WAI recommandent aux auteurs Web de remplacer, chaque fois que possible, l'art ASCII par une image réelle. Si l'illustration en art ASCII ne peut être remplacée, il est essentiel d'inclure une description par un équivalent textuel pour s'assurer que l'information est accessible à tous les utilisateurs.

Règles pour la création d'un texte descriptif pour l'art ASCII :

Si l'illustration en art ASCII contient une information non disponible ailleurs sur le site Web, l'auteur de contenu doit créer une description textuelle équivalente.Utilisez un lien descriptif ou "lien-d" pour diriger les visiteurs vers la description.Si un document dans le site contient la même information que l'illustration en art ASCII, dirigez les visiteurs vers ce fichier en utilisant un lien-d.

1.3 (P1) Jusqu'à ce que les agents utilisateurs soient en mesure de lire automatiquement l'équivalent textuel d'une piste visuelle, fournir une description auditive des informations importantes de la piste visuelle d'une présentation multimédia.

Extrait des Techniques pour les règles d'accessibilité du contenu Web 1.0 :

Les descriptions audio des pistes visuelles fournissent la narration des éléments clés visules sans interférer avec le son ou lesdialogues d'un film. Les éléments visuels clés incluent les actions, les positions, le langage du corps, les graphiques, et le texteaffiché. Les descriptions sonores sont utilisés tout d'abord par les personnes qui sont aveugles pour suivre l'action et l'information non-audio du matériel vidéo.

Note. S'il n'y a pas d'information visuelle importante, par exemple, une tête animée parlant qui décrit ( à travers une voix préenregristrée) comment utilisé le site, alors une description audio n'est pas nécessaire.

Pour les films, fournissez des descriptions auditives qui sont synchronisées avec l'audio originale. Voir la section sur l'information audio pour plus d'informations à propos des formats multimédia.

1.4 (P1) Pour toute présentation multimédia basée sur le temps (par exemple un film ou une animation), synchroniser les alternatives équivalentes (par exemple, les sous-titres ou la description auditive des pistes visuelles) avec la présentation.

Extrait de l'Aide du logiciel A-Prompt :

Selon les règles d'accessibilité de la Web Accessibility Initiative(WAI), toutes les présentations multimédias basées sur le temps (i.e. films, animations ou diaporamas) doivent avoir un texte synchronisé ou un équivalent audio.

Bien qu'on attende des auteurs de contenu Web qu'ils fournissent une transcription textuelle de chaque piste audio ou vidéo et une description de toute présentation vidéo, une transcription ne peut à elle seule créer une expérience équitable pour les personnes ayant des incapacités.

Pour s'assurer que ces personnes puissent vivre pleinement l'expérience d'un film ou d'une présentation multimédia, le texte et l'équivalent audio doivent être synchronisés avec la présentation principale. Une bonne analogie pour les personnes qui n'ont pas d'incapacité auditive ou visuelle est d'imaginer le visionnement d'un film dans une langue étrangère avec des sous- titres qui ne sont pas synchronisés avec la présentation à l'écran.

Les auteurs de contenu Web doivent tout de même fournir une transcription textuelle de la piste audio et une description de la vidéo pour s'assurer que les personnes qui n'ont pas accès à un lecteur multimédia ou qui ont à la fois une incapacité auditive et visuelle demeurent capables d'accéder au contenu équivalent.

2.1 (P1) S'assurer que toute information transmise par les couleurs est également disponible sans couleur, par exemple à partir du contexte ou du balisage.

Extrait de l'Aide du logiciel A-Prompt :

Les règles d'accessibilité de la Web Accessibility Initiative(WAI) spécifient que lorsque de l'information est transmise en utilisant la couleur, les auteurs de contenu Web doivent aussi rendre cette information clairement disponible par des moyens équivalents, soit par le contexte dans lequel l'information est présentée ou par ses propriétés de balisage.

Les personnes utilisant un lecteur d'écran ou un navigateur textuel et celles incapables de différencier certaines couleurs seront placées devant l'impossibilité d'accéder à l'information qui dépend de la couleur uniquement. Par exemple, considérez un document Web qui demande aux utilisateurs de faire un choix dans plusieurs listes: la première liste est présentée en rouge; une autre en jaune; et la dernière en vert. Les individus qui ne peuvent voir les couleurs (soit à cause d'une déficience de la vision ou parce qu'ils utilisent un moniteur monochrome) ne seront pas capables de distinguer entre les trois listes.

Une méthode pour résoudre ce problème est d'attacher une sorte de schéma numérique à chaque liste en plus de l'utilisation de la couleur. (Par exemple, demandez au visiteur de faire un choix, soit dans la première liste présentée en rouge, soit dans la deuxième liste présentée en jaune ou dans la troisième liste présentée en vert.)

Les autres méthodes pour identifier le contenu quand la couleur est utilisée comprennent les effets de polices de caractères par les feuilles de style CSS, les liens textuels détaillés, les bordures et les identificateurs avec mots clés.

Un test simple pour déterminer si le contenu d'un document est dépendant de la couleur est de désactiver les couleurs dans un navigateur ou de visualiser la page sur un écran monochrome.

Dans un formulaire, indiquer les champs obligatoires en les colorant en rouge sans ajouter un symbole distinctif comme une icône ou un astérisque serait également une utilisation fautive de la couleur.

Utilisable P1

5.1 (P1) Pour les tableaux de données, identifier les en-têtes de ligne et de colonne.

Extrait de l'Aide du logiciel A-Prompt :

Selon la Web Accessibility Initiative (WAI), les auteurs Web doivent inclure des en-têtes de lignes et de colonnes dans tous les tableaux de données pour s'assurer que les navigateurs textuels rendront correctement l'information contenue dans le tableau.

L'attribut "headers" est utilisé pour attacher un étiquette (via l'attribut "id") à une ligne ou à une colonne de tableau, créant un lien entre l'en-tête et les cellules de données qui lui sont associées. L'exemple qui suit montre l'usage correct de l'attribut "headers".

Exemple:
<table border="1" summary="Ce tableau présente une comparaison des meilleurs joueurs de la Ligue nationale de Hockey, listant le nombre de coupes Stanley, de championnats des marqueurs, et de trophées du joueur par excellence gagnés au cours de leur carrière."> <caption>Comparaison des meilleurs joueurs de la LNH</caption> <tr> <th id="header1">Nom</th> <th id="header2">Coupes Stanley</th> <th id="header3">Championnats des marqueurs</th> <th id="header4" abbr="JPE">Trophées du joueur par excellence(JPE)</th> <tr> <td headers="header1">Wayne Gretzky</td> <td headers="header2"> 4 </td> <td headers="header3"> 10 </td> <td headers="header4"> 9 </td> <tr> <td headers="header1">Mario Lemieux</td> <td headers="header2"> 2 </td> <td headers="header3"> 6 </td> <td headers="header4"> 3 </td> </tr> </table>

Comparaison des meilleurs joueurs de la LNH

Nom Coupes Stanley Championnats des marqueurs Trophées JPE
Wayne Gretzky 4 10 9
Mario Lemieux 2 6 3

Notez comment les attributs "headers" et "id" sont utilisés pour associer les cellules de données <td> avec les en-têtes de lignes et de colonnes correspondants <th>.

Un synthétiseur vocal présentera ce tableau comme suit: Légende : comparaison des meilleurs joueurs de la LNH. Sommaire : Ce tableau présente une comparaison des meilleurs joueurs de la Ligue nationale de Hockey, listant le nombre de coupes Stanley, de championnats des marqueurs, et de trophées du joueur par excellence gagnés au cours de leur carrière. Nom : Wayne Gretzky, Coupes Stanley : 4, Championnats des marqueurs : 10, JPE : 9 Nom : Mario Lemieux, Coupe Stanley : 2, Championnats des marqueurs : 6, JPE : 3.

Les attributs "headers" peuvent aussi être remplacés par "scope" pour présenter des tableaux simples (i.e. <th scope="col">Nom</th>). Comme pour l'attribut "headers", "scope" lie un ensemble spécifique de cellules de données à leur en-tête correspondant.

Un synthétiseur vocal interprétera les deux types de tableaux de façon identique. L'utilisation de l'attribut "scope" à la place de "headers" dépend seulement de la complexité du tableau. Si "scope" est utilisé, il doit avoir l'une des valeurs suivantes: "row", "col", "rowgroup" ou "colgroup".

Les auteurs de contenu Web ont également la possibilité d'inclure l'attribut "axis" pour aider les navigateurs vocaux à extraire l'information spécifique d'un tableau sous la forme d'une requête.

Imaginez un tableau des "Statistiques de carrière" pour l'ancienne étoile de la LNH, Wayne Gretsky. En utilisant le modèle de tableau de HTML 4 qui permet de placer les en-têtes et les données dans des catégories spécifiques, un auteur Web pourrait regrouper les cellules d'en-tête pour les "Oilers d'Edmonton" et les "Kings de Los Angeles" dans une catégorie intitulée "équipe".(Note: le nombre d'équipes a été limité à deux pour cet exemple.) Les en-têtes "Buts", "Assistance" et "Points" pourraient être catégorisés sous "Total" et les années jouées avec chaque équipe placées dans une catégorie "Saison".

Utiliser l'attribut "axis" pour chaque cellule permettrait à un utilisateur de lecteur d'écran d'extraire des informations spécifiques via une requête comme :

"combien de buts Wayne Gretzky a-t-il marqués durant sa carrière?"
"combien d'assistances a-t-il obtenu pendant la saison 1985-86?"
"quel fut son total de points quand il jouait avec les Rangers de New York.

L'exemple qui suit montre comment créer des catégories à l'intérieur d'un tableau en utilisant l'attribut "axis".

Statistiques de carrière pour Wayne Gretzky

Buts Assistances Points
Oilers d'Edmonton
1979-80 51 86 137
Etc. - - -
sous-total 583 1086 1669
Kings de Los Angeles
1988-89 54 114 168
sous-total 246 672 918
Total 894 1963 2857

<TABLE border="1"> <CAPTION>Statistiques de carrière pour Wayne Gretzky</CAPTION> <TR> <TH></TH> <TH id="header2" axis="total">Buts <TH id="header3" axis="total">Assistances <TH id="header4" axis="total">Points <TR> <TH id="header6" axis="equipe">Oilers d'Edmonton <TH> <TH> <TH> <TD> <TR> <TD id="header7" axis="saison"> 1979-80 <TD headers="header6 header7 header2"> 51 <TD headers="header6 header7 header3"> 86 <TD headers="header6 header7 header4"> 137 <TD> <TR> <TD id="header8" axis="saison">etc. <TD align="middle" headers="header6 header8 header2"> - <TD align="middle" headers="header6 header8 header3"> - <TD align="middle" headers="header6 header8 header4"> - <TD>

5.2 (P1) Pour les tableaux de données qui ont deux niveaux ou plus d'en-têtes de ligne ou de colonne, utiliser le balisage pour associer les cellules de données et les cellules d'en-tête.

Extrait de l'Aide du logiciel A-Prompt :

Si un tableau de données a deux niveaux logiques ou plus d'en-têtes de ligne ou de colonne, les règles d'accessibilité de la Web Accessibility Initiative (WAI) stipulent que les auteurs de contenu Web doivent utiliser le balisage HTML pour lier les cellules de données aux en-têtes qui leur correspondent.

Par exemple, pour identifier des groupes structurels de lignes, les auteurs de contenu devraient utiliser les éléments THEAD, TFOOT et TBODY. Pour grouper les colonnes, utilisez les éléments COL et COLGROUP. Les attributs "headers", "scope" et "axis" sont utiles pour créer une association claire entre les en-têtes de ligne ou de colonne et les cellules de données du tableau.

Regrouper les lignes d'un tableau en sections de tête, de corps et de pied, permet au corps du tableau d'ètre défilé indépendamment de la tête et du pied. De plus, l'information contenue dans la tête et le pied sera répétée sur chaque page contenant des données quand un grand tableau sera imprimé.

Les étéments de tête (THEAD) et de pied (TFOOT) sont conçus pour fournir de l'information à propos des colonnes du tableau. La section du corps du tableau (TBODY) contient les ligne d'information statistique avec les cellules de données <td>. Chaque élément THEAD, TFOOT et TBODY doit contenir un groupe de lignes et chacun de ces groupes doit comporter au moins une ligne (i.e. un élément <TR>).

Le tableau qui suit montre l'usage et l'ordre structurel des éléments THEAD, TFOOT et TBODY:

<TABLE> <THEAD> <TR>...l'information de tête va ici... </THEAD> <TFOOT> <TR> ...l'information du pied de tableau va ici... </TFOOT> <TBODY> <TR> ...la première ligne du premier bloc de données va ici... <TR> ...la deuxième ligne du premier bloc de données va ici... </TBODY> <TBODY> <TR> ...première ligne du deuxième bloc de données... <TR> ...deuxième ligne du deuxième bloc de données... <TR> ...troisième ligne du deuxième bloc de données... </TBODY> </ TABLE>

Notez que dans toutes les définitions de tableau, l'élément TFOOT apparaît avant l'élément TBODY. Ceci permet aux navigateurs de présenter la section de pied sans avoir à attendre que toutes les données du tableau soient chargées. Il est également important de se souvenir que chaque section THEAD, TFOOT et TBODY doit contenir le même nombre de colonnes (COL) et de groupes de colonnes (COLGROUP).

Les auteurs Web créent des groupes de colonnes en utilisant l'élément COLGROUP et déterminent le nombre de colonnes dans un groupe soit par l'attribut "span" ou l'élément COL.

L'attribut "span" (valeur par défaut égale à 1) permet aux auteurs de contenu de spécifier le nombre de colonnes dans le groupe alors que l'élément COL est utilisé pour représenter chaque colonne dans le groupe. L'attribut "span" est préférable parce qu'il permet d'établir la largeur des colonnes pour un groupe entier de colonnes. L'élément "COL" exige que la largeur soit fixée pour chaque colonne individuellement.

À titre d'exemple, imaginez un tableau comportant 10 colonnes - chacune large de 20 pixels. En utilisant l'attribut "span", le code source HTML pourrait se lire comme suit:

<COLGROUP span="10" width="20"> </COLGROUP>

Alors qu'avec l'élément COL, la largeur doit être fixée pour chaque colonne individuellement:

<COLGROUP> <COL width="20"> <COL width="20"> …ceci doit être répété 10 fois au total… </COLGROUP>

L'élément COL devrait être utilisé à l'intérieur d'un groupe quand il est nécessaire d'identifier ou d'appliquer certaines informations spécifiques à une colonne particulière. Par exemple, pour appliquer un style unique à la dernière colonne du tableau ci-dessus, l'élément COL peut être utilisé comme suit:

<COLGROUP span="10" width="20"> <COL span="9"> <COL id="appliquer le style ici"> </COLGROUP>

Notez que la largeur a été fixée pour l'ensemble des 10 colonnes dans l'élément COLGROUP. L'élément COL initial <COL span="9"> établit la largeur pour les 9 premières colonnes. Le second élément COL <COL id="appliquer le style ici "> fait référence à une feuille de style permettant d'appliquer un style particulier à cette colonne via l'attribut "id".

Les attributs "headers, "scope" et "axis", sont utiles pour créer une association claire entre les colonnes et la ligne d'étiquettes (i.e. d'en-têtes) et les cellules de données correspondantes dans le tableau. Ils font en sorte également que les visiteurs Web puissent extraire des informations spécifiques du tableau.

7.1 (P1) Jusqu'à ce que les agents utilisateurs permettent de contrôler l'oscillation, éviter de créer des phénomènes d'oscillations à l'écran.

Extrait de l'Aide du logiciel A-Prompt :

Selon les règles d'accessibilité de la Web Accessibility Initiative (WAI), les auteurs de contenu doivent s'assurer que leurs documents Web ne produisent pas d'oscillation à l'écran.

L'oscillation à l'écran ou le clignotement peuvent déclencher des crises épileptiques pour les personnes ayant une épilepsie photosensible. Les documents Web produisant des effets stroboscopiques (comme un changement rapide entre un écran sombre et clair) ou créant une oscillation ou un clignotement entre 4 et 59 fois à la seconde sont susceptible de provoquer des crises. Actuellement, les navigateurs ne permettent pas au client de désactiver ce type d'oscillation.

12.1 (P1) Donner un titre à chaque cadre pour faciliter l'identification et la navigation entre cadres.

Extrait de l'Aide du logiciel A-Prompt :

Selon la Web Accessibility Initiative (WAI), les développeurs de contenu doivent fournir un titre pour chaque élément FRAME ou IFRAME d'un document.

Les auteurs Web doivent identifier le contenu et/ou les liens de navigation à l'intérieur d'un cadre par l'attribut "title". Dans certains cas, il peut même être aidant d'identifier la relation entre les cadres d'un document.

À titre d'exemple, considérez un document contenant trois cadres. L'un couvre le haut de la page et comprend le titre du document ainsi que le menu principal de navigation du site. Un autre cadre, placé verticalement à l'extrémité gauche de l'écran, contient la table des matières pour cette section spécifique. Le troisième cadre affiche le contenu principal de chaque document.

Les titres des cadres pour l'exemple ci-dessus pourraient apparaître dans le code source HTML de la façon suivante :

<FRAME SRC="frame1.html" title="Cadre du titre du document et de la barre de navigation du site"> <FRAME SRC="frame2.html" title="Cadre de la table des matières"> <FRAME SRC="frame3.html" title="Cadre d'affichage du contenu principal">

Le contenu des titres des cadres doit être éloquent. N'utilisez pas des noms de fichiers (ex. title="frame1.html") ou du texte substituable (i.e. "insérer le titre du cadre ici") comme titre. Évitez aussi de laisser le titre vide (i.e. title="").

Si le contenu ou la fonction d'un élément FRAME ou d'un FRAMESET est complexe, les auteurs Web devraient considérer l'inclusion d'un attribut "longdesc" dans l'élément FRAME (priorité 2). L'attribut "longdesc" donne un lien vers une description plus détaillée (i.e. <FRAME src="principal.html" longdesc="principal_desc.html" title="Cadre d'affichage du contenu principal">).

COMPRÉHENSIBLE P1

4.1 (P1) Identifier clairement les changements de la langue naturelle du texte d'un document et de tout équivalent textuel (ex. les légendes).

Extrait de l'Aide du logiciel A-Prompt :

La Web Accessibility Initiative (WAI) exige des éditeurs de contenu Web qu'ils indiquent les changements dans la langue naturelle de leurs documents par le balisage HTML.

Par exemple, si des mots ou des expressions anglaises doivent être incluses dans un document par ailleurs en français, le code source HTML doit indiquer que la langue de base du document a changée. Il y a plusieurs raisons pour lesquelles ceci est important pour l'accessibilité au Web.

Si les changements de langue ne sont pas marqués, un synthétiseur vocal tentera de prononcer une expression ou un mot étranger dans sa propre langue de base. Imaginez, par exemple, un synthétiseur vocal dont la langue de base est le français essayer de franciser le mot anglais "fourteen". Le résultat pourrait se situer quelque part entre inintelligible, déroutant ou ridicule.

Les utilisateurs de braille font aussi face à des obstacles pour obtenir un document transcrit correctement quand les changements de langue ne sont pas marqués par les auteurs Web. Quand les changements de langue sont identifiés dans le code source HTML, les logiciels de transcription braille sont capables de substituer les codes de contrôles appropriés (i.e. les abréviations, par exemple) et d'indiquer ce changement à l'utilisateur.

De plus, les machines à traduire sont capables de rendre le texte dans une langue familière quand les changements à la langue de base du document sont identifiés.

Si plusieurs langues différentes sont utilisées dans un document, il est impératif que l'attribut "lang" soit utilisé pour identifier chaque changement. Pensez, par exemple, aux comptes rendus de films étrangers apparaissant sur un site Web.

Exemple :

Dans le film de Milos Forman, "One Flew Over the CooCoo's Nest", Jack Nicholson joue le rôle d'un patient interné dans un hôpital psychiatrique... etc.

Selon le réalisateur italien, Roberto Benigni,"La Vita È Bella... etc. "

Le balisage HTML pour les deux exemples qui précèdent devrait apparaître comme suit :

<p>Dans le film de Milos Forman, <SPAN lang="en">"One Flew Over the CooCoo's Nest"</SPAN>, Jack Nicholson joue le rôle d'un patient interné dans un hôpital psychiatrique... etc. </p> <p>Selon le réalisateur italien, Roberto Benigni,<Q lang="it">"La Vita È Bella... etc. "</Q></p>

14.1 (P1) Utiliser le langage le plus clair et le plus simple approprié au contenu du site.

Extrait des Techniques pour les règles d'accessibilité du contenu Web 1.0 :

Les suggestions de style d'écriture suivantes devraient vous aider à rendre le contenu de votre site plus facile à lire pour tout un chacun, spécialement pour les personnes qui ont des handicaps de lecture et/ou des handicaps de compréhension. De nombreux guides (tels que [HACKER]) exposent ceci et toutes les arcanes des styles d'écriture avec plus de détails.

Faire tout son possible pour donner des entêtes et des descriptions de lien précis et clairs. Ceci comprend d'utiliser des expressions de lien qui soient laconiques et qui ont du sens lorsque qu'elles sont lues hors contexte ou comme partie d'une série de liens (Certains utilisateurs naviguent en sautant de lien en lien et en écoutant seulement les liens texte. Utiliser des entêtes informatifs tels que les utilisateurs puissent balayer des yeux une page rapidement pour trouver une information plutôt que de la lire en détail.

Exposer le sujet d'une phrase ou d'un paragraphe au début de la phrase ou du paragraphe (Ceci s'appelle le « front-loading »). Ceci aidera autant les personnes qui survolent visuellement, ainsi que ceux qui utilisent les synthétiseurs vocaux. "Survoler" avec la voix signifie généralement que l'utilisateur saute d'entête en entête, ou de paragraphe en paragraphe et écoute juste assez de mots pour déterminer si l'ensemble courant d'information (entête, paragraphe, lien, etc.) l'intéresse. Si l'idée principale du paragraphe est au milieu ou à la fin, les utilisateurs du vocal peuvent avoir à écouter la plus grande partie du document avant de trouver ce qu'ils veulent. Dépendamment de ce que l'utilisateur cherche et de ce qu'il sait à propos du sujet, les fonctionnalités de recherche peuvent également aider les utilisateurs à localiser le contenu plus rapidement.

Limiter chaque paragraphe à une idée principale.

Eviter, l'argot, le jargon, et les significations spécialisées des mots communs, à moins de les avoir définis au sein du document.

Favoriser les mots qui sont souvent utilisés. Par exemple, utiliser "commencer" plutôt que "débuter" ou utiliser "essayer" plutôt que "tenter".

Utiliser des verbes actifs plutôt que des verbes passifs.

Eviter les structures de phrase complexes.

Robuste P1

1.2 (P1) Fournir des liens textuels redondants pour chaque zone sensible d'une image cliquable côté serveur.

Extrait de l'Aide du logiciel A-Prompt :

Selon la Web Accessibility Initiative (WAI), les développeurs de contenu Web doivent inclure des liens textuels redondants avecchaque image cliquable côté serveur.

Les images cliquables permettent aux auteurs Web de créer des liens multiples à partir d'une même image ou d'un même objet en définissant des régions spécifiques (par les coordonnées en pixels) comme zones sensibles ou "zones cliquables". Quoique les images cliquables soient utilisées à des fins de navigation, ces "zones cliquables" peuvent aussi être utilisées pourdéclencher des événements HTML et Javascript.

Il y a deux types d'images cliquables : côté client et côté serveur.

Côté client : Toute l'information (les coordonnées en pixels et les URL) est contenue dans le document HTML comme tel. Le navigateur client traite les événements déclenchés par l'activation des "zones sensibles" de l'image cliquable et les exécute.

Côté serveur : toute l'information réside sur le serveur et est traitée par lui à travers un script CGI distinct. Les images cliquables côté serveur dépendent de fichiers distincts qui doivent être téléchargés ce qui crée un trafic réseau additionnel.

La WAI recommande fortement aux auteurs Web d'utiliser des images cliquables côté client parce qu'elles offrent une plus grande accessibilité que les images cliquables côté serveur. Par exemple, les liens textuels équivalents sont habituellement non disponibles à ceux qui accèdent à une image cliquable côté serveur à moins que des liens textuels redondants aient été spécialement ajoutés au document.

Sans égard au type d'image cliquable, il est important de décrire la destination de chaque lien (i.e. Page d'accueil, Moteur de recherche, etc.) plutôt que l'image elle-même (i.e. "Ceci est l'illustration d'une maison"). Si le contenu visuel de l'image cliquable demande une explication, utilisez l'attribut "longdesc" ou un "lien-d" pour donner une description plus détaillée de chaque AREA.

6.1 (P1) Organiser les documents de manière à ce qu'ils puissent être lus sans feuilles de style. Par exemple, quand un document HTML est interprété sans les feuilles de style associée, il doit rester lisible.

Extrait de l'Aide du logiciel A-Prompt :

Selon la Web Accessibility Initiative (WAI), les auteurs Web qui utilisent des feuilles de style pour mettre en forme les documents doivent s'assurer que toute l'information demeure entièrement accessible même si les feuilles de style sont désactivées ou non supportées par certains navigateurs.

Lorsque vous utilisez le balisage pour appliquer un style à la page, assurez-vous de prévoir une méthode non visuelle pour transmettre la même information et organisez la structure de toutes les feuilles de style dans un ordre sensé et logique. Cela fera en sorte que le contenu soit affiché tel que prévu même sans feuille de style associée.

Par exemple, une feuille de style CSS a été utilisée pour mettre en forme et positionner le texte suivant:

C'était
la nuit avant
Noël

La feuille de style jointe apparaît dans le code HTML comme suit :
<STYLE TYPE="text/css"> <-- .line1 /* c'était */ { color: red; font-size: 24pt; margin-left: -350; margin-top: 40px; font-family: comic sans ms, fantasy, sans-serif } .line2 /* la nuit avant */ { color: blue; font-size: 18pt; margin-left: -30px; margin-top: 30px; font-family: arial, helvetica, sans-serif } .line3 /* Noël */ { color: red; font-size: 36pt; margin-left: 450px; margin-top: -150px; font-family: arial, helvetica, sans- serif } --> </STYLE>

Compte tenu que les positions verticales et horizontales ont été spécifiées, le contenu peut être présenté logiquement dans le fichier HTML: <DIV class=line1>c'était</DIV> <DIV class=line2>la nuit avant</DIV> <DIV class=line3>Noël</DIV>

Si un navigateur qui ne supporte pas les feuilles de style ou dont les feuilles de style sont désactivées rencontre l'exemple ci-dessus, il présentera la page comme suit : c'était la nuit avant Noël

Le résultat est un équivalent acceptable pour la version avec la feuille de style. Mais, si la position verticale (i.e. "margin- top") n'a pas été spécifiée, pour arriver au même résultat, le code HTML devrait être présenté comme suit : <DIV class=line1>c'était</DIV> <DIV class=line3>Noël</DIV> <DIV class=line2>la nuit avant</DIV>

Alors que pour les navigateurs visuels, les deux méthodes peuvent produire un résultat virtuellement identique, un navigateur qui ne supporte pas les feuilles de style devrait présenter l'exemple ci-dessus de la manière suivante : Noël c'était la nuit avant.

Le résultat (dans ce cas-ci) demeure intelligible, mais ce n'est certainement pas la façon dont Clement C. Moore a écrit son fameux poème de Noël ("'Twas the night before Christmas").

Les autres techniques pour s'assurer que le contenu généré par CSS demeure accessible comprennent :

fournir du texte équivalent pour toutes les images et les textes générés par des feuilles de style (i.e. par les propriétés "background-image", "list-style" ou "content"), s'assurer que le contenu vital pour la compréhension d'un document apparaît dans l'objet document lui-même. Par exemple, le texte généré par la feuille de style ne fait pas partie de la source du document et ne peut donc être accédé par les technologies d'adaptation qui extraient le texte du "Document Object Model Level 1" (DOM1).

Ainsi, gardez à l'esprit que bien que les barres horizontales et les bordures puissent indiquer une "séparation" du contenu aux utilisateurs visuels du Web, elles ne fournissent aucune indication de ce genre pour ceux qui dépendent de navigateurs non visuels. Si une barre horizontale est utilisée comme indice visuel pour indiquer la structure, soyez sûr qu'une façon non visuelle de communiquer cette structure est également utilisée (i.e. par le balisage structurel).

6.2 (P1) S'assurer que les équivalents pour le contenu dynamique soient mis à jour lorsque le contenu dynamique change.

Extrait de l'Aide du logiciel A-Prompt :

Selon la Web Accessibility Initiative (WAI), chaque fois que le contenu dynamique est mis à jour, les développeurs de contenu doivent aussi mettre à jour tous les textes équivalents.

Par exemple, quand l'élément OBJECT est utilisé pour générer un contenu dynamique, les règles de la WAI exigent qu'un texte équivalent soit inclus entre les balises d'ouverture et de fermeture. Si, à n'importe quel moment, le script change, le texte équivalent doit aussi être mis à jour pour refléter ce changement.

Exemple : <OBJECT classid="le script de programmation va ici" width="200" height="500"> …le texte équivalent pour le script devrait apparaître ici… </OBJECT>

Si un APPLET est utilisé pour générer un contenu dynamique, le texte équivalent peut être donné par l'attribut "alt" ou placé entre les éléments APPLET d'ouverture et de fermeture. la WAI recommande aux auteurs de contenu d'inclure les deux textes équivalents afin de s'assurer que tous les navigateurs seront en mesure d'accéder à l'information.

Exemple : <APPLET code="nom.class" width="200" height="500" alt="entrer l'équivalent textuel ici"> …la description apparaît ici… </APPLET>

Encore une fois, si le contenu de l'APPLET change, tous les textes équivalents doivent être mis à jour pour refléter ce changement.

Une autre méthode pour s'assurer que le texte équivalent demeure accessible et facile à mettre à jour est d'inclure une section NOSCRIPT dans les documents qui contiennent du contenu dynamique. Le texte équivalent est affiché chaque fois que les scripts de programmation sont désactivés ou non disponibles dans un navigateur.

Considérez, par exemple, un script Tcl conçu pour énumérer les températures maximum et minimum (en Celsius) dans le cadre d'un document donnant les prévisions de la météo pour les principales villes autour du monde. L'élément NOSCRIPT pourrait êtreutilisé de la manière suivante :

<SCRIPT type="text/tcl"> ...Le véritable script Tcl devrait apparaître ici... </SCRIPT> <NOSCRIPT> <p> Températures maximum/minimum (Celsius) et prévisions détaillées pour les principales villes</p> <dl>Londres 16°C (max.), 11°C (min.). <dd><a href="london_forecast.html">Prévisions complètes pour Londres, G.B.</a> ...Les autres villes devraient apparaître ici... </dl> </NOSCRIPT>

6.5 (P1) S'assurer que le contenu dynamique est accessible ou fournir une présentation ou une page alternative.

Extrait de l'Aide du logiciel A-Prompt :

Selon les règles d'accessibilité de la Web Accessibility Initiative (WAI), chaque FRAMESET doit comporter une section NOFRAMES valide pour assurer que les documents demeurent accessibles dans les navigateurs qui ne supportent pas les cadres.

Une section NOFRAMES valide doit comporter un texte d'au moins un mot ou du code HTML accessible et inclure tous les liens nécessaires pour naviguer sur le site. N'utilisez pas la section NOFRAMES pour informer l'utilisateur qu'il devrait mettre à niveau sont navigateur afin de supporter les cadres.

L'exemple suivant montre l'usage correct de l'élément NOFRAMES dans un FRAMESET :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Élément NOFRAMES dans un FRAMESET</ TITLE> </HEAD> <FRAMESET cols="25 %, 75 %" title="Entrer le nom du document ici"> <FRAME src="liens_nav.html" title="Liens de navigation"> <FRAME src="principal.html" title="Cadre principal - le contenu apparaît ici"> <NOFRAMES> <A href="liens_nav.html">Liens de navigation</A> ...Notez que tous les liens de navigation du document "principal.html", sont inclus dans la section NOFRAMES... </NOFRAMES> </FRAMESET>

6.3 (P1) S'assurer que les pages soient utilisables quand les scripts, les applets ou les autres objets programmatiques sont désactivés ou ne sont pas supportés. Si ce n'est pas possible, fournir une information équivalente sur une page alternative accessible.

6.3a SCRIPT sans section NOSCRIPT

Extrait de l'Aide du logiciel A-Prompt :

Selon les règles d'accessibilité de la Web Accessibility Initiative (WAI), les auteurs de contenu doivent vérifier que les documents Web sont pleinement accessibles quand les objets programmes sont désactivés.

Pour s'assurer que l'information demeure accessible même quand les scripts, les applets et les autres objets programmes sont désactivés ou non supportés, les développeurs Web doivent créer un substitut accessible ou un lien vers des pages textuelles avec un contenu équivalent.

Par exemple, il est impératif que les liens utilisés pour déclencher l'exécution de scripts fonctionnent toujours quand les scripts sont désactivés ou non supportés par le navigateur et qu'ils donnent accès à l'information appropriée. Si les développeurs de contenu sont incapables de rendre la page accessible quand les scripts ne sont pas fonctionnels, ils doivent fournir un texte équivalent en utilisant l'élément NOSCRIPT.

Une autre possibilité est d'utiliser des scripts côté serveur plutôt que côté client. En dernier recours, les auteurs de contenu pourraient créer un équivalent en format textuel pour l'ensemble du document. Gardez à l'esprit, toutefois, qu'un tel document doit être mis à jour aussi fréquemment que la page programmée.

Autres points à ne pas oublier :

évitez de créer un contenu localement, à la volée (i.e. créer un contenu dans le navigateur du client par une programmation côté client). Les personnes qui auront désactivé les scripts ou ceux qui utilisent un navigateur textuel n'auront pas accès à ce type de contenu,

évitez de créer des liens en utilisant du "javascript" comme URL (i.e. <A href="javascript:">…</A>). Cela créera un lien mort
dans les navigateurs qui ne supportent les scripts.

6.3b Page inutilisable sans SCRIPT

Assurez vous que les pages sont utilisables même si Javascript est désactivé ou non supporté.

6.3c Le contenu de la section NOSCRIPT doit être équivalent.

La section NOSCRIPT doit fournir un contenu équivalent aux scripts, y compris les liens qui deviennent inutilisables sans javascript parce qu'ils utilisent javascript comme URL ou parce qu'ils sont affichés de façon dynamique par le déclenchement d'événements javascript comme dans les menus déroulants.

6.3d Liens inutilisables sans SCRIPT

Assurez vous que les liens qui activent les scripts fonctionnent même lorsque ces derniers sont désactivés ou non supportés (par ex. Il ne faut pas utiliser "javascript:" comme cible des liens). Si vous ne pouvez construire une page utilisable sans scripts, placez une équivalence avec l'élément NOSCRIPT, ou utilisez un script côté serveur au lieu d'un script exécutable sur le poste client.

9.1 (P1) Fournir des images cliquables côté client au lieu des images cliquables côté serveur, sauf lorsque les zones sensibles ne peuvent être définies avec une forme géométrique disponible.

Extrait de l'Aide du logiciel A-Prompt :

Selon la Web Accessibility Initiative(WAI), les auteurs de contenu doivent convertir les images cliquables côté serveur en images cliquables côté client, chaque fois que possible.

Les images cliquables permettent aux auteurs Web de créer des liens multiples à partir d'une même image ou d'un même objet en définissant des régions spécifiques (par les coordonnées en pixels) comme zones sensibles ou "zones cliquables". Quoique les images cliquables soient utilisées à des fins de navigation, ces "zones cliquables" peuvent aussi être utilisées pour déclencher des événements HTML et Javascript.

Voici une définition des deux types d'images cliquables :

Côté client : toute l'information (les coordonnées en pixels et les URL) est contenue dans le document HTML comme tel. Le navigateur client traite les événements déclenchés par l'activation des "zones cliquables" de l'image cliquable et les exécute.

Côté serveur : toute l'information réside sur le serveur et est traitée par lui à travers un script CGI distinct. Les images cliquables côté serveur dépendent de fichiers distincts qui doivent être téléchargés ce qui crée un trafic réseau additionnel.

Les avantages des images cliquables côté client

Les images cliquables côté client sont préférables parce que, contrairement à celles côté serveur, tous peuvent y accéder : lesindividus qui ne peuvent voir les images, ceux qui ont choisi d'utiliser un navigateur non graphique ou sont incapable d'utiliser un périphérique de pointage traditionnel (comme une souris). Les équivalents textuels (textes "alt") ne sont pas disponibles à ceux qui accèdent à une image cliquable côté serveur à moins que des liens textuels redondants n'aient été créés dans le document.

Les images cliquables côté client affichent aussi l'information complète sur l'URL quand un visiteur rencontre une zone active. Les images cliquables côté serveur donnent uniquement les coordonnées en pixels. De plus, les images cliquables côté client n'ont pas besoin de revenir référer au serveur pour fonctionner parce qu'elles sont incorporées dans le document HTML. Ceci réduit la pression sur le serveur et améliore le temps de réponse.

11.4 (P1) Si, malgré vos efforts vous ne parvenez pas à produire une page accessible, donner un lien vers une autre page, qui utilise les technologies du W3C, est accessible, présente la même information (ou fonctionnalité) et est mise à jour aussi souvent que la page originale inaccessible.

Il s'agit donc d'une solution de dernier recours.

PRIORITÉS DE NIVEAU 2

Perceptible P2

2.2 (P2) S'assurer que les combinaisons de couleurs de premier plan et d'arrière-plan donnent suffisamment de contraste lorsqu'elles sont utilisées par des personnes ayant une déficience de perception des couleurs ou sur un écran noir et blanc. [Priorité 2 pour les images, Priorité 3 pour le texte]

Extrait de l'Aide du logiciel A-Prompt :

La Web Accessibility Initiative(WAI) suggère aux développeurs de contenu Web de s'assurer que les couleurs d'avant et d'arrière-plan utilisées dans le document offrent un contraste suffisant quand elles sont vues par quelqu'un qui a une déficience des couleurs (i.e. daltonisme) ou par ceux qui utilisent un moniteur monochrome.

Quoique la plupart des navigateurs actuels permettent aux utilisateurs de passer outre le choix des couleurs de l'auteur de contenu Web, un choix de couleurs pauvre présente tout de même un obstacle à une accessibilité complète, particulièrement pour ceux qui ont une déficience des couleurs (i.e. daltonismes). Les exemples ci-dessous montrent la différence entre un faible contraste et un bon contraste de couleurs.

Exemple : les deux exemples qui suivent vont de mauvais...

Ce texte est extrêmement difficile à voir!!!! (noir sur bleu)

...à pire!

Ce texte est virtuellement impossible à voir!!! (noir sur vert foncé)

Alors que...

Ce texte est relativement facile à voir pour tous! (noir sur vert pâle)

Quand vous réglez le contraste entre l'avant et l'arrière-plan, assurez-vous d'utiliser les valeurs hexadécimales ou RVB et non des noms spécifiques pour déterminer les couleurs.

Exemple : H1 {color: #000080} H1 {color: rgb(50 %,50 %,50 %)}
...évitez d'utiliser l'exemple désapprouvé ci-dessous...
H1 {color: blue}

N'utilisez pas d'éléments désapprouvés comme FONT pour régler la couleur. Utilisez plutôt les propriétés des feuilles de style CSS pour spécifier l'avant et l'arrière-plan comme illustré dans l'exemple suivant:

'color', pour régler la couleur d'avant-plan.
'background-color', pour régler la couleur d'arrière-plan.
'border-color', 'outline-color' pour les couleurs de bordure.

Si une couleur d'avant-plan est spécifiée, assurez-vous de spécifier aussi une couleur d'arrière plan (et vice versa).

3.3 (P2) Utiliser des feuilles de style pour contrôler la mise en page et la présentation.

Extrait de l'Aide du logiciel A-Prompt :

La Web Accessibility Initiative (WAI) recommande que les auteurs de contenu Web utilisent des feuilles de style pour appliquer tous les effets de style (i.e. couleur et taille des caractères, indentation des paragraphes, etc.) et contrôler la mise en page du contenu (i.e. le positionnement des éléments dans une page) pour tous les documents HTML.

Par exemple, au lieu d'utiliser des éléments désapprouvés comme BASEFONT et "FONT size" ou "FONT color" pour mettre en forme le texte, utiliser plutôt les propriétés "font" des feuilles de style CSS.

Exemple (élément FONT désapprouvé) : N'utilisez pas d'éléments désapprouvés dans le corps de votre document pour appliquer un style. <font size="5pt" color="blue">N'utilisez pas d'éléments désapprouvés dans le corps de votre document pour appliquer un style.</Font>

Exemple (feuilles de style) : Utilisez les feuilles de style pour contrôler la taille du texte et sa couleur.
<HTML> <HEAD> <TITLE>feuilles de style manquantes [vérification manuelle]</TITLE> <STYLE TYPE="text/css"> <-- .eg{color:green; font-size:150 %} --> </STYLE> </HEAD> <BODY> <SPAN class="eg">Utilisez des feuilles de style pour contrôler la taille du texte et sa couleur.</SPAN> </BODY> </HTML>

Les auteurs de contenu devraient aussi s'abstenir d'utiliser des éléments HTML (i.e. BLOCKQUOTE, UL, DD, TABLE, etc.) pour positionner le texte et mettre en page le contenu.

Exemple (HTML) :

L'utilisation de l'élément définition de terme <DD> pour indenter le texte devrait être évité.

Ainsi que...

Évitez d'utiliser l'élément TABLE pour mettre en page le contenu de votre document.

<TABLE> <TR> <TD bgcolor="#ccffff">Évitez d'utiliser l'élément TABLE pour mettre en page le contenu de votre document.</ TD> </TR> </TABLE>

Le même résultat peut être obtenu en utilisant les feuilles de style.

Exemple (feuilles de style) : Ce texte a été indenté en utilisant les feuilles de style
<STYLE TYPE="text/css"> <-- .ind{margin:4 %} --> </STYLE> <BODY> <SPAN class="ind">Ce texte a été indenté en utilisant une feuille de style. </SPAN></BODY>

Au lieu de dépendre des tableaux pour présenter le contenu, une fois encore, utilisez plutôt les feuilles de style.

Exemple (feuilles de style) :

Toute la mise en forme a été appliquée en utilisant une feuille de style.

<DIV style="border: double red 3px; margin-right:50 %; background:#ccffff">toute la mise en forme a été appliquée en utilisant une feuille de style.</DIV>

La WAI conseille aux auteurs de contenu d'utiliser les éléments HTML aux fins pour lesquelles ils sont prévus - pour définir la structure d'un document. Par exemple, utiliser l'élément BLOCKQUOTE ou la liste simple (UL) pour indenter le texte peut être déroutant autant pour les utilisateurs que pour les moteurs de recherche qui s'attendent à rencontrer une citation ou une liste d'items.

La mise en page et le positionnement du contenu peuvent être obtenus en utilisant les propriétés CSS, "floats" et "absolute positioning". Par exemple :

pour indenter le texte ou contrôler l'espacement des caractères ou des mots, utilisez les propriétés "text-indent", "word- spacing" et "font-stretch". Utilisez "text-align: center" plutôt que l'élément désapprouvé CENTER,

utilisez la propriété "margin" pour créer de l'espace autour d'un élément de contenu plutôt que des espaces insécables comme l'entité de caractère,

les propriétés "float", "position", "top", "right", "bottom" et "left" permettent aux utilisateurs de contrôler le positionnement de presque tous les éléments indépendamment de leur emplacement dans le document. (Il est important de structurer les documents d'une manière logique pour s'assurer qu'ils demeurent accessibles même si les feuilles de style sont désactivées.)

Il est aussi important d'éviter d'utiliser des images pour représenter du texte. Le texte est accessible à tous les utilisateurs (incluant ceux qui dépendent d'une synthèse vocale, d'un écran braille ou d'un navigateur non graphique) et il exige beaucoup moins de temps de téléchargement qu'un graphique.

Voici un exemple d'une image utilisée pour représenter du texte et de la feuille de style équivalente:

Exemple (image) :

Il était une fois une nuit sombre et orageuse...

La seule façon de réaliser l'image de la grande initiale est par un équivalent textuel. Alors que, l'exemple ci-dessous (qui utilise une feuille de style pour donner la mise en forme) est accessible à tous les utilisateurs, se télécharge plus rapidement et crée le même effet visuel que l'image.

Exemple (feuilles de style) : Il était une fois une nuit sombre et orageuse...

<STYLE TYPE="text/css">  </ STYLE> <p><SPAN class="dropcap">I</SPAN>l était une fois une nuit sombre et orageuse...</p>

10.2 (P2) Jusqu'à ce que les agents utilisateurs supportent les associations explicites entre labels et contrôles de formulaires, s'assurer que les labels sont correctement positionnés pour tous les contrôles de formulaire avec labels implicitement

Extrait de l'Aide du logiciel A-Prompt :

Pour garantir une association claire entre un contrôle de formulaire et son LABEL, la Web Accessibility Initiative (WAI) recommande que les auteurs de contenu s'assurent que le LABEL est placé correctement dans le balisage HTML.

Par exemple, s'il y a deux contrôles ou plus sur une même ligne, chaque LABEL devrait être placé immédiatement après le contrôle. Cette façon de faire établit une relation claire entre le LABEL et le contrôle.

Exemple 1 : Choisissez votre couleur préférée pour les géraniums.

Saumon | Orange | Blanc

Vous trouverez plus bas le code source pour l'exemple précédent. Notez comment chaque bouton radio est suivi par le LABEL qui l'accompagne. Un utilisateur de lecteur d'écran n'aurait eu aucun problème à établir quelle couleur (LABEL) était associé à quel contrôle (bouton radio).

<FORM method=post action="unepage.htm"> <INPUT TYPE="RADIO" NAME="couleurpref1" VALUE="Saumon">Saumon | <INPUT TYPE="RADIO" NAME="couleurpref1" VALUE="Orange">Orange | <INPUT TYPE="RADIO" NAME="couleurpref1" VALUE="Blanc">Blanc </FORM>

Une autre méthode pour établir une relation entre un contrôle et le LABEL qui l'accompagne est de placer le LABEL sur une ligne séparée précédant le contrôle.

Exemple 2 : Choisissez votre couleur préférée pour les roses. Pêche

Corail

Lavande

Vous trouverez plus bas le code source pour l'exemple précédent. Notez comment chaque bouton radio est précédé par le LABEL qui l'accompagne (Cette méthode permet seulement un LABEL et un contrôle par ligne.). Encore une fois, un utilisateur de lecteur d'écran n'aurait pas eu de difficulté à identifier quel LABEL appartenait à quel contrôle.

<FORM method=post action="unepage.html"> Pêche <INPUT TYPE="RADIO" NAME="couleurpref2" VALUE="peche"><BR> Corail <INPUT TYPE="RADIO" NAME="couleurpref2" VALUE="Corail"><BR> Lavande <INPUT TYPE="RADIO" NAME="couleurpref2" VALUE="Lavande"><BR> </FORM>

Ce dernier exemple illustre une disposition des LABEL et des contrôles qui pourrait créer de la confusion une fois interprétée par un lecteur d'écran.

Exemple 3 : Choisissez votre couleur préférée pour les pensées. Orange | Bleue | Jaune

Vous trouverez plus bas le code source pour l'exemple précédent. Notez qu'avec cette méthode, il n'y a pas d'association claire reliant un LABEL à un bouton radio spécifique. Un utilisateur de lecteur d'écran aurait eu de la difficulté à distinguer quel LABEL était associé à quel contrôle.

Orange | Bleue | Jaune
<FORM method=post action="unepage.html"> <INPUT TYPE="RADIO" NAME="couleurpref3" VALUE="Orange"> <INPUT TYPE="RADIO" NAME="couleurpref3" VALUE="Bleue"> <INPUT TYPE="RADIO" NAME="couleurpref3" VALUE="Jaune"> </FORM>

Bien que l'association explicite des contrôles de formulaire avec les LABEL ne soit pas largement supportée par la plupart des navigateurs actuels, les auteurs de contenu doivent commencer à inclure l'attribut "for" quand l'élément LABEL est utilisé dans un document. L'attribut "for" associe explicitement un LABEL à un contrôle de formulaire spécifique. De plus, des LABEL multiples peuvent être créés pour un contrôle particulier en utilisant l'attribut "for". (Note : L'attribut "for" doit avoir la même valeur que l'attribut "id" associé à l'élément contrôle du formulaire.)

L'exemple qui suit présente deux contrôles d'entrée de texte, chacun ayant un LABEL associé explicitement.

Exemple 4 : <FORM method="post" action="somepage.html"> <LABEL for="pnom">Prénom</LABEL> <INPUT type="text" name="prenom" id="pnom"> <LABEL for="nomf">Nom de famille</LABEL> <INPUT type="text" name="nom" id="nomf"> </FORM>

12.4 (P2) Associer les labels avec leurs éléments de contrôle de manière explicite.

Les étiquettes et les champs correspondants doivent être associés explicitement avec l'attribut « FOR » de l'étiquette qui reprend le « ID » du champ auquel il est associé.

Exemple de codage HTML d'un formulaire :

<FORM method="post" action="unepage.html"> <LABEL for="pnom">Prénom</LABEL> <INPUT type="text" name="prenom" id="pnom"> <LABEL for="nomf">Nom de famille</LABEL> <INPUT type="text" name="nom" id="nomf"> </FORM>

NNG La taille de police des menus et du texte principal doit être d'au moins 12pt, 1em, 100 %, 3 ou medium.

Des tailles de polices inférieures à 12pt, 1em, 100 %, 3 ou medium seront difficile à lire pour les persones ayant une limitation visuelle même mineure, ce qui inclus la majorité des personnes âgées de plus de 40 ans.

Utilisable P2

3.5 (P2) Utiliser les éléments d'en-tête pour spécifier la structure du document, et les utiliser en accord avec les spécifications.

3.5a En-têtes absents.

Extrait de l'Aide du logiciel A-Prompt :

La Web Accessibility Initiative (WAI) recommande aux auteurs de contenu d'organiser ou d'imbriquer les en-têtes (H1-H6) de leurs documents de façon ordonnée.

Plusieurs visiteurs dépendent des en-têtes de section pour parcourir rapidement les documents quand ils sont à la recherche de l'information pertinente. Les longs documents bénéficient particulièrement d'une subdivision en sections et sous-sections ou en thèmes et sous-thèmes.

3.5b En-têtes mal imbriqués.

Extrait de l'Aide du logiciel A-Prompt :

La Web Accessibility Initiative (WAI) recommande aux auteurs de contenu d'organiser ou d'imbriquer les en-têtes (H1-H6) de leurs documents de façon ordonnée.

Si les en-têtes d'un document sont utilisés de façon inappropriée (i.e. pour appliquer des effets de police de caractères) ou structurés de façon illogique, certaines personnes auront de la difficulté à naviguer dans votre document ou à interpréter correctement l'information. Dans l'exemple ci-dessous, notez comment les en-têtes ont été utilisés de façon aléatoire sans égard à la structure du document.

Exemple :
<H3>Livres ABC.com</H3> <H2>Liste des "best sellers"!</H2> <H1>Fiction</H1> <p>Liste à jour des "best sellers" dans la catégorie fiction</p> <H1>Non-Fiction</H1> <p>Liste des "best sellers" dans la catégorie non-fiction</p> <H1>Livres pour enfants</H1> <p>Liste des "best sellers" des livres pour enfants</p> <H1>Art</H1> <p>Liste à jour des "best sellers" dans la catégorie des beaux-arts. </p>

Dans cet exemple, les éléments d'en-tête ont été utilisés pour mettre en évidence certains passages et non pour appliquer une structure au document. Les en-têtes de section pour chaque catégorie (i.e. fiction, non-fiction, etc.) sont d'une taille de caractères plus grande (H1) que le titre "Liste des 'best sellers!'" (H2) qui est, à son tour, plus grand que "Livres ABC.com" (H3).

Les en-têtes devraient être ordonnés dans une séquence logique tel qu'illustré dans l'exemple ci-dessous :

Exemple :
<H1>La vitamine C peut aider à combattre le cancer</H1> <H2>La clinique Mayo réévalue les études</H2> <H3>Essais cliniques (1960s)</H3> <p>La première section apparaît ici</p> <H2>Les découvertes du Dr. Linus Pauling</H2> <H3>La vitamine C apparaît renforcer le système immunitaire</H3> <p>La deuxième section apparaît ici</ p> Et ainsi de suite...

Ainsi, n'utilisez pas d'éléments d'en-tête pour ajouter des effets de police de caractères aux mots ou aux phrases d'un document comme dans l'exemple suivant :

<p>Achetez trois livres et obtenez-en un<H3>gratuit!"</H3> chez Livres ABC.com <H6>(offre de durée limitée)</H6>

Plutôt que d'utiliser la taille par défaut des éléments d'en-tête pour créer de tels effets, utilisez les feuilles de style CSS pour donner une mise en forme au texte.

Avant de créer un document, identifiez d'abord la structure sous-jacente (titre, en-têtes de section, sous-sections, paragraphes, etc.), puis décidez comment présenter la page aux autres. Les balises HTML peuvent être utilisées pour améliorer la présentation générale (ex. séparation des sections par une barre horizontale), mais les marqueurs visuels seulement sont insuffisants pour subdiviser le contenu des documents.

3.6 (P2) Baliser les listes et les éléments de listes correctement.

Extrait de l'Aide du logiciel A-Prompt :

La Web Accessibility Initiative (WAI) recommande aux développeurs de contenu d'éviter d'utiliser des balises de listes pour créer des effets de mise en forme dans les documents.

Les éléments de liste HTML comme "UL" (liste à puces), "OL" (liste numérotée), "DL" (liste de définitions) et "LI" (élément de liste) devraient être utilisés seulement pour générer des listes dans un document Web - pas pour créer des effets de présentation comme l'indentation du texte.

Exemple :

Évitez d'utiliser des éléments de liste pour indenter les contenu comme c'est le cas de ce texte-ci.

<UL> <DT>Évitez d'utiliser des éléments de liste pour indenter les contenu comme c'est le cas de ce texte-ci.</DT> </UL>

Utilisez plutôt les feuilles de style CSS pour créer des effets de mise en forme.

Exemple : Ce texte est indenté en utilisant un balisage CSS tel que recommandé par la WAI.

<p style="text-indent: 3em">Ce texte est indenté en utilisant un balisage CSS tel que recommandé par la WAI.</p>

De plus, les auteurs de contenu Web devraient utiliser des listes numérotées plutôt que des listes à puces chaque fois que possible. Les listes numérotées aide les utilisateurs non visuels à naviguer sur les sites Web et structure l'information d'une façon plus logique. Les listes imbriquées et celles qui n'indiquent pas un niveau d'imbrication spécifique pour chaque élément devraient, notamment, inclure des indices contextuels à l'intérieur de leur balisage.

Une simple liste qui comporte un sous-ensemble de nombres (comme dans l'exemple ci-dessous) serait lue ainsi: 1, 1, 2, 1, 2, 3, 2, 1, etc. par un lecteur d'écran, ne donnant aucune indication à l'utilisateur sur l'ordre structurel ou la profondeur hiérarchique de la liste.

Exemple :

1.

1.

2.

1.

3.

2.

1.

Alors qu'une liste ordonnée qui inclut des nombres combinés (i.e. 1, 1.1, 1.2, 1.2.1, 1.3, 2, 2.1, etc.) fournit l'information sur la structure d'un document aux utilisateurs non visuels. Ce qui suit montre comment spécifier des nombres combinés pour les listes en utilisant un CSS.

Exemple : <STYLE type="text/css"> UL, OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, "."); counter-increment: item } </STYLE>

Les développeurs de contenu devraient aussi penser à donner des indices contextuels dans des listes à puces pour indiquer où une liste commence et où elle finit afin de guider les utilisateurs non visuels. Le CSS peut être utilisé pour indiquer la fin d'uneliste quand les feuilles de style ne sont pas supportées ou désactivées dans un navigateur et pour cacher le texte si les feuilles de style sont activées.

Exemple :
<STYLE type="text/css"> .findeliste {display: none} LI:before { content: counters(item, "."); counter-increment: item } </STYLE> <UL> <LI>Équipements d'entraînement pour contrôler le poids <UL> <LI>Bancs</LI> <LI>Machines</LI> <LI>Barres</LI> <LI>Plaques</LI> <span class="findelist">(Fin de Équipements d'entraînement pour contrôler le poids)</span> </UL></LI> <LI>Équipements aérobiques <UL> <LI>Vélo stationnaire</LI> <LI>Escalier d'exercice</LI> <LI>Machine à ramer</LI> <span class="findelist">(Fin de équipements aérobiques)</span> </UL></LI>
...et ainsi de suite...

Si vous avez des inquiétudes à propos d'une entrée de liste qui déborde sur la ligne suivante (ce qui peut poser problème avec certaines revues d'écran), ajoutez simplement un balisage similaire à la fin de chaque élément de liste.

6.4 et 9.3 (P2)
(6.4) Pour les scripts et les applets, s'assurer que les gestionnaires d'événements soient indépendants du périphérique d'entrée.
(9.3) En ce qui concerne les scripts, il importe de spécifier les gestionnaires d'événements logiques plutôt que des gestionnaires d'événements dépendants de l'interface.

Extrait de l'Aide du logiciel A-Prompt :

Le programme de traitement d'événements appelle un script quand certains événements se produisent (comme un clic de la souris). Si les développeurs de contenu utilisent des scripts dépendants d'un périphérique, la Web Accessibility Initiative (WAI) recommande qu'ils incluent également un mécanisme redondant (comme une entrée au clavier) pour assurer l'accessibilité du script pour ceux qui sont incapables d'utiliser un périphérique de pointage traditionnel.

Si, par exemple, un script était déclenché par un clic de la souris, les personnes qui dépendent de la commande vocale, d'une licorne ou de la commande au clavier seraient incapable d'activer le script. Pour rendre le script pleinement accessible, un événement au clavier doit être ajouté au code source tel qu'illustré ici :

Example : <button onclick="some_script"> …pour rendre ce script accessible, vous devez également ajouter un événement au clavier… <button onclick="some_script" onkeypress="some_script">

En principe, les traitements d'événements suivants devraient être pairés ensemble et inclus dans le même élément quand des attributs dépendants d'un périphérique sont utilisés :

- "onkeydown" avec "onmousedown",

- "onkeyup" avec "onmouseup",

- "onkeypress" avec "onclick",

Note: Il n'y a pas d'équivalent au clavier pour un double clic ("ondblclick") en HTML 4.01.

Les auteurs de contenu Web devraient toujours inclure un équivalent au clavier avec un traitement d'événement dépendant de la souris. Quoique les deux soient dépendants d'un périphérique, les scripts qui acceptent la commande au clavier sont généralement accessibles à ceux qui utilisent la commande vocale ou une interface de ligne de commande. Évitez d'utiliser les événements qui dépendent des coordonnées de la souris étant donné qu'ils excluent la possibilité d'une action indépendante d'un périphérique.

7.2 (P2) Jusqu'à ce que les agents utilisateurs permettent le contrôle du clignotement, éviter le clignotement du contenu (i.e., changement de la présentation à un taux régulier, comme ouvert et fermé).

Extrait de l'Aide du logiciel A-Prompt :

Compte tenu que les deux balises BLINK et MARQUEE ne sont pas des éléments standards (ils ne font partie d'aucune spécification du World Wide Web Consortium (W3C), la Web Accessibility Initiative (WAI) déconseille fortement leur utilisation dans les documents HTML.

En règle générale, la plupart des visiteurs Web trouvent le texte clignotant ou défilant nuisible à la concentration. Ils peuvent rendre une page illisible pour les personnes ayant des incapacités cognitives. Celles ayant une mobilité limitée peuvent avoir de la difficulté à répondre assez rapidement et précisément pour interagir avec les objets clignotants ou défilants.

Les développeurs de contenu qui insistent pour inclure des illustrations ou du texte clignotants dans un document Web devraient également fournir un mécanisme pour arrêter ce clignotement. Par exemple, l'utilisation des feuilles de style CSS pour produire le clignotement du texte (i.e. "text-decoration: blink") permet aux clients d'arrêter cet effet en désactivant les feuilles de style dans leur navigateur.

Plutôt que de vous en remettre à BLINK ou MARQUEE, utilisez d'autres méthodes pour appliquer des effets de style partout où cela est possible (i.e. gras, italique, tout en majuscules, soulignement, effets d'ombrage, etc.), si le contenu exige une mise en évidence particulière.

7.3 (P2) Jusqu'à ce que les agents utilisateurs permettent de figer le contenu mobile, éviter le mouvement dans les pages.

Si vous utilisez le mouvement, celui-ci ne doit pas capter l'attention, sinon les personnes ayant certains handicaps cognitifs ne pourront se concentrer sur votre contenu.

7.4 (P2) Jusqu'à ce que les agents-utilisateurs permettent de stopper les actualisations, éviter de créer des pages s'actualisant automatiquement.

Extrait de l'Aide du logiciel A-Prompt :

Jusqu'à ce que les les agents utilisateurs permettent aux clients d'arrêter l'actualisation automatique des documents, la Web Accessibility Initiative (WAI) recommande aux auteurs de contenu d'éviter de créer des pages qui se rechargent sans intervention de l'utilisateur.

Si le contenu d'un document est continuellement actualisé, informez les visiteurs qu'ils devraient recharger la page périodiquement pour s'assurer que l'information à l'écran demeure actuelle.

Il peut sembler raisonnable pour un développeur de contenu d'insérer une actualisation automatique dans un document qui suit l'évolution de données toujours changeantes — l'échange des actions sur le marché boursier par exemple. Mais, les documentsqui s'actualisent ou se rechargent peuvent être très désorientants, particulièrement pour les personnes ayant des incapacités.

Il est impossible de prédire combien de temps peut être nécessaire à quelqu'un pour extraire l'information d'un document Web. Plutôt que d'ordonner l'actualisation automatique de la page, permettez aux visiteurs d'actualiser ou de recharger la page à leur discrétion.

7.5 (P2) Jusqu'à ce que les agents utilisateurs fournissent la possibilité de stopper l'autoredirection, ne pas utiliser de balisage permettant la redirection automatique des pages. A la place, configurer le serveur pour effectuer les redirections.

Extrait de l'Aide du logiciel A-Prompt :

La Web Accessibility Initiative (WAI) recommande aux auteurs de contenu d'éviter d'utiliser un balisage qui redirige automatiquement les visiteurs vers d'autres documents Web. Les personnes ayant une limitation visuelle ou des incapacités cognitives n'ont souvent pas suffisamment de temps pour lire un document qui comporte une commande de redirection automatique.

Inclure une redirection automatique dans un document est non seulement désorientant, mais a également pour effet de perturber l'historique de navigation des pages visitées rendant difficile, pour le client, de retracer le chemin parcouru. Au lieu d'utiliser la redirection automatique, un lien doit être créé dans le document permettant au client d'avancer à la page suivante à sa discrétion.

12.2 (P2) Décrire la fonction des cadres et la manière dont ils interagissent les uns avec les autres, si ce n'est pas évident à la seule lecture des titres.

Extrait de l'Aide du logiciel A-Prompt :

Selon les règles d'accessibilité de la Web Accessibility Initiative (WAI), les auteurs de contenu ne doivent pas seulement inclure un attribut "title" pour chaque élément FRAME, mais doivent aussi évaluer chaque cadre pour déterminer si une longue description est également requise.

La Wai considère comme une exigence de priorité 1 l'inclusion d'un attribut "longdesc" dans un élément FRAME si celui-ci ne peut être adéquatement décrit avec l'attribut "title". Les auteurs de contenu Web doivent également considérer l'utilisation d'un attribut "longdesc" si la relation entre les cadres n'est pas claire.

Quand l'attribut "longdesc" est utilisé, chaque lien devrait conduire l'utilisateur à un même fichier contenant une description de tous les cadres se trouvant dans le document. Voici un exemple de l'attribut "longdesc" d'un élément FRAME pour le site fictif d'une librairie.

Exemple :

<FRAMESET cols="10 %,*,10 %"> <FRAMESET rows="20 %,*"> <FRAME src="navbar.html" name="menunav" title="menu de navigation" longdesc="frame_desc.html#navbar"> <FRAME src="speciaux.html" name="reductions" title="Livres à prix réduit" longdesc="frame_desc.html#speciaux"> </FRAMESET> <FRAME src="books.html" name="books" title="Contenu principal - listes et comptes rendus de livres" longdesc="frame_desc.html#livres"> <NOFRAMES> <p><a href="noframes.html">No frames version</a></p> <p><a href="frame_desc.html">Descriptions des cadres.</a></p> </NOFRAMES>

Le document frame_desc.html devrait inclure une description détaillée comme la suivante:

Menunav - ce cadre contient des liens vers toutes les sections de notre site, incluant les réductions en magasin et en ligne, les listes et les comptes rendus de livres, la recherche par titre/auteur, les magazines et périodiques, et l'information sur le serveur sécurisé.

Speciaux - ce cadre présente les réductions du mois sur les livres en magasin et en ligne. Les réductions pour janvier 2001 incluent des livres de J. K. Rowling, Lawrence Block, Scott Turow, Margaret Atwood, et Richard Simmons.

Livres - Ce cadre présente les titres et un résumé des livres listés par ordre alphabétique de titre ou d'auteur.

(Note : Il est important de se rappeler que si le contenu d'un cadre change, le texte équivalent ne pourra plus s'appliquer.)

12.3 (P2) Diviser les grands blocs d'information en groupes plus faciles à gérer lorsque c'est naturel et approprié.

Extrait des Techniques pour les règles d'accessibilité du contenu Web 1.0 :

Les mécanismes HTML 4.0 suivants groupent le contenu et le rendent plus facile à comprendre :

Utilisez FIELDSET pour grouper les contrôles de formulaire dans des unités sémantiques et décrivez le groupe avec l'élément LEGEND.

Utilisez OPTGROUP pour organiser les longues listes des menu d'options en groupes plus petits.

Utilisez les tableaux pour les données tabulées et décrivez le tableau avec CAPTION. Groupez les lignes et les colonnes des tableaux avec THEAD, TBODY, TFOOT, and COLGROUP.

Imbriquez les listes avec UL, OL, et DL.

Utilisez les entêtes de section (H1 - H6) pour créer des documents struturés et découpez de long morceux de texte.

Découpez les lignes de texte en paragraphes (avec l'élément P).

Tous ces mécanismes de groupement devraient être utilisés lorsque c'est approprié et naturel, c.à-d., quand l'information se prête elle-même à des groupements logiques. Les développeurs de contenu ne devraient pas créer des groupements de manière aléatoire, car cela désorientera les utilisateurs.

13.2 (P2) Fournir des métadonnées pour ajouter l'information sémantique aux pages et aux sites.

Extrait de l'Aide du logiciel A-Prompt :

La Web Accessibility Initiative (WAI) recommande que les auteurs de contenu incluent des métadonnées qui décrivent chaque document Web ou donnent de l'information spécifique à son propos.

Les métadonnées sont définies par la Wai comme "des données décrivant les ressources Web". Le fait de les inclure dans les documents Web, rend plus efficace l'exécution de plusieurs tâches. Par exemple, actuellement, la seule façon d'effectuer une recherche sur le Web est d'entrer des mots clés dans un moteur de recherche et de trouver les mots ou les phrases qui correspondent dans les documents Web disponibles.

Cette méthode de recherche de documents pour des informations spécifiques est assez imprécise et produit une somme de réponses pour des documents qui ne réfèrent qu'indirectement au sujet demandé. Toutefois, inclure des métadonnées permet aux auteurs de contenu d'ajouter une description plus détaillée à chaque document. Les collecteurs de données seront alors enmesure de faire des recherches plus précises et plus raffinées.

Les métadonnées d'un document peuvent aussi rendre disponibles d'autres informations utiles comme le classement de contenu, le plan du site, l'information sur l'auteur, les définitions de canaux pour le flot de données et les collections de la bibliothèque numérique. Quelques navigateurs (le navigateur textuel Lynx en est un exemple) peuvent même bâtir des liens de navigation à partir de l'information des métadonnées fournies par l'élément LINK et les attributs "rel" ou "rev" tel que montré ci-dessous:

Exemple 1:

<HEAD> <link rel="Précédent" href="document1.html"> <link rel="Index" href="contents.html"> <link rel="Suivant" href="document3.html"> </HEAD>

Lynx devrait créer une série de liens au début du document qui apparaîtront comme suit:

Précédent Index Suivant

13.3 (P2) Fournir des informations concernant la mise en page générale d'un site. (par ex. le plan d'un site, ou une table des matières).

Ces informations facilitent la navigation pour les personnes handicapées mais augmentent également la convivialité de votre site pour tous ses visiteurs.

COMPRÉHENSIBLE P2

10.1 (P2) Jusqu'à ce que les agents utilisateurs permettent aux utilisateurs de désactiver les fenêtres à ouverture automatique, ne pas créer de "pop-up" ou d'apparition d'autres fenêtres et ne pas changer la fenêtre courante sans en informer l'utilisateur.

Extrait de l'Aide du logiciel A-Prompt :

La Web Accessibility Initiative (WAI) recommande que les auteurs de contenu évitent de faire apparaître de nouvelles fenêtres à ouverture automatique ("pop-up") sans alerter les visiteurs.

Les liens <A> qui ouvrent de nouvelles fenêtres peuvent être désorientants pour certaines personnes, particulièrement celles ayant des incapacités cognitives ou visuelles. Jusqu'à ce que les navigateurs permettent à l'utilisateur de désactiver les fenêtres à ouverture automatique ("pop-up"), évitez d'ouvrir des fenêtres multiples ou de changer la fenêtre courante sans en informer le visiteur.

Les personnes peuvent ignorer qu'elles ont deux navigateurs actifs si une nouvelle fenêtre s'ouvre sans qu'elles en aient connaissance, particulièrement si ces deux fenêtres sont en plein écran. Cela peut engendrer de la confusion quand l'utilisateurtente de retourner à une page précédente en utilisant le bouton "Précédent". Pour prévenir l'ouverture d'une nouvelle fenêtre, évitez d'utiliser l'attribut "target", comme dans "_blank" et "_new", dans un élément ANCHOR. À la place, utilisez une fenêtre active comme cible de l'attribut "target".

13.1 (P2) Identifier clairement la destination de chaque lien.

13.1a Lien textuel manquant de sens

Extrait de l'Aide du logiciel A-Prompt :

La Web accessibility Initiative (WAI) recommande que les auteurs de contenu créent des liens textuels qui demeurent éloquentspour les clients, même lorsqu'ils sont lus hors contexte.

La clé pour créer des liens textuels éloquents est d'identifier clairement l'usage ou la fonction de chaque lien (i.e. décrire la destination du lien). De plus, il est également important que ces liens textuels demeurent concis.

Voici des exemples de liens textuels pauvres :

Exemple 1 : "Cliquez ici" pour participer à un tirage pour une croisière de vacances toutes dépenses payées dans les Caraïbes!Les liens textuels ambigus comme "cliquez ici" ne transmettent aucune information utile aux visiteurs. La référence à "ici" est vague (où est-ce exactement?) et n'indique ni l'usage, ni la destination du lien. De plus, le terme "cliquez" suggère que le lien estseulement accessible avec une souris ou un autre périphérique de pointage.

Exemple 2 : "Suivez ce lien pour participer à un tirage pour une croisière de vacances toutes dépenses payées dans les Caraïbes!" Évitez d'utiliser une phrase entière comme lien textuel et mettez plutôt en évidence quelques mots clés ou une expression à l'intérieur de la phrase. Les liens textuels excessivement longs ne sont pas nécessaires et peuvent au contraire créer de la confusion chez les visiteurs, particulièrement si le lien déborde sur une autre ligne à l'écran.

Le prochain exemple montre un lien textuel qui est concis et demeure éloquent même quand il est sorti de son contexte.

Exemple 3 : "Gagnez des vacances" en participant à un tirage pour une croisière toutes dépenses payées dans les Caraïbes. Le lien textuel "gagnez des vacances" n'est pas seulement bref mais explique aussi l'utilité du lien.

Les auteurs de contenu peuvent donner de l'information supplémentaire à propos d'un lien en incluant un attribut "title" dans l'élément lien, comme dans l'exemple ci-dessous :

Exemple 4 : <a href="#.html" title="Entrez pour gagner une croisière toutes dépenses payées">Lien vers ABC Voyages.com</a>

13.1b Liens pointant vers des cibles diffférentes mais utilisant la même identification.

Ne pas utiliser des liens d'apparence identique mais pointant vers des cibles différentes comme "Cliquez ici" ou "Pour en savoir plus", car lus hors contexte ils perdent tout leur sens.

13.4 (P2) Utiliser les mécanismes de navigation de manière cohérente.

Des mécanismes de navigation cohérents facilitent la navigation pour les personnes handicapées mais augmentent également la convivialité de votre site pour tous ses visiteurs.

Robuste P2

3.2 (P2) Créer des documents qui sont valides par rapport aux grammaires formelles publiées.

Extrait de l'Aide du logiciel A-Prompt :

La Web Accessibility Initiative (WAI) recommande que les développeurs de contenu Web débutent tous les documents par une déclaration de type de document (DOCTYPE) ou DTD. Le DOCTYPE informe un validateur de la version HTML qui est utilisée quand vous vérifiez la syntaxe d'un document.

Voici une brève description des DOCTYPES généralement utilisées :

HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd"> Ceci déclare que le document est du HTML 4.01 strict. HTML 4.01 strict est une version allégée du HTML 4.01 et met l'accent sur la structure plutôt que sur la présentation. Les éléments désapprouvés (comme la balise FONT) et les attributs (utilisés pour créer la plupart des caractéristiques de présentation) ainsi que les cadres et les "targets" pour les liens ne sont pas permis en HTML 4 strict.

HTML 4.01 Transitionnel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd">

Cet énoncé déclare que le document est du HTML 4.01 de transition. Le HTML 4.01 de transition inclut tous les éléments et attributs du HTML 4 strict, mais permet également les attributs de présentation, les éléments désapprouvés et les "targets" des liens. Le HTML 4 de transition - reconnaissant le support relativement pauvre des feuilles de style dans les navigateurs actuels - permet un grand nombre de caractéristiques de présentation à titre de transition vers le HTML 4 strict.

HTML 4 avec cadres
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/ html4/frameset.dtd">

Ceci déclare que le document est du HTML 4.01 avec cadres. HTML 4 avec cadres est une variante du HTML 4 de transition pour les documents qui utilisent des cadres.

HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Ceci déclare que le document est du HTML 3.2. HTML 3.2 est bien supporté par la plupart des navigateurs actuels. Toutefois, il n'offre qu'un support limité pour les feuilles de style et aucun support pour les caractéristiques du HTML 4 comme les cadres et l'internationalisation (compatibilité avec les langues autres que l'anglais).

Le Service de validation du World Wide Web Consortium (W3C) [http://validator.w3.org/] évalue les documents en rapport avec une vaste liste de grammaires publiées, incluant les déclarations de type DOCTYPE. Pour plus d'information, référez-vous au document "Choosing a DOCTYPE" du W3C [http://www.htmlhelp.org/tools/validator/doctype.html].

11.2 (P2) Éviter d'utiliser les fonctionnalités désapprouvées des technologies du W3C.

Les éléments suivants sont désapprouvés en HTML 4.01:

APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, MENU, S, STRIKE et U.

Notons particulièrement que les effets de présentation obtenus par l'utilisation de la balise FONT doivent être contrôlées par les feuilles de styles CSS.

3.7 (P2) Baliser les citations. Ne pas utiliser le balisage des citations pour des effets de mise en forme comme l'indentation.

Extrait des Techniques pour les règles d'accessibilité du contenu Web 1.0 :

Les éléments Q et BLOCKQUOTE balisent respectivement les citations au sein d'une phrase et sous forme de bloc textes.

Exemple.

Cet exemple balise une citation plus longue avec BLOCKQUOTE :

<BLOCKQUOTE cite="http://www.shakespeare.com/loveslabourlost"> <P>Remuneration! O! that's the Latin word for three farthings. --- William Shakespeare (Love's Labor Lost). </P> </BLOCKQUOTE>

5.3 (P2) Ne pas utiliser les tableaux pour la mise en page, à moins qu'ils n'aient un sens lorsqu'ils sont linéarisés. Si le tableau n'a pas de sens, fournir une alternative équivalente (qui peut être une version linéarisée).

Extrait de l'Aide du logiciel A-Prompt :

Si les tableaux sont utilisés pour positionner des images ou du texte, la Web Accessibility Initiative (WAI) recommande aux auteurs Web de s'assurer que le contenu demeure intelligible quand le tableau est linéarisé (i.e. le contenu du tableau est converti en paragraphes standards).

À mesure que le support des feuilles de style CSS sera amélioré dans les navigateurs, on attendra des développeurs de contenu qu'ils positionnent leur contenu en utilisant le balisage des feuilles de style. L'élément TABLE devrait être utilisé aux fins pour lesquels il avait été prévu à l'origine : pour présenter des données dans un format tabulaire plutôt qu'à des fins de mise en page. Quand les tableaux sont utilisés pour présenter le texte en colonnes parallèles avec retour à la ligne automatique, l'information peut devenir pêle-mêle lorsqu'elle est interprétée par un lecteur d'écran.

Considérez l'exemple suivant:

Les Ravens gagnent le La défense des Ravens Les amateurs de Football
XXXVe Super Bowl Les s'est montrée d'une force n'auront pas trop longtemps
Ravens de Baltimore, inébranlable opposée à à attendre la reprise du jeu,
conduits par le secondeur l'offensive des Giants la XFL de Vince McMahon
étoile Ray Lewis, ont et à leur quart-arrière, débute sa première saison
pulvérisé les Giants de Kerry Collins qui fut tout de suite après le tournoi
New York jusqu'à la intercepté quatre fois annuel Pro Bowl de la NFL à
conclusion de ce XXXVe Hawaii
Super Bowl avec
une disparité de 34 à 7.

Selon la taille des caractères, la résolution et la taille de l'écran (le retour automatique à la ligne s'effectue différemment pour chaque système), certains lecteur d'écran peuvent interpréter le texte ci-dessus comme suit:

Les Ravens gagnent le XXXVe Super Bowl Les Ravens de Baltimore, conduits par La défense des Ravens s'est montrée d'une force Les amateurs de Football n'auront pas trop longtemps à... etc.

Notez comment le tableau est lu d'une façon linéaire sur toute la largeur de l'écran de gauche à droite et de la première à la dernière ligne. Idéalement, les tableaux ne devraient pas être utilisés pour présenter du texte - mais s'ils sont utilisés - la structure des phrase et leur ordre doivent être conservés quand le tableau est linéarisé. Si cela n'est pas possible, les auteurs de contenu doivent soit réorganiser les cellules du tableau ou présenter un texte linéarisé équivalent, comme dans l'exemple suivant:

Les Ravens gagnent le XXXVe Super Bowl Les Ravens de Baltimore, conduits par le secondeur étoile Ray Lewis, ont pulvérisé les Giants de New York jusqu'à la conclusion de ce XXXVe Super Bowl avec une disparité de 34 à 7.

La défense des Ravens s'est montrée d'une force inébranlable opposée à l'offensive des Giants et à leur quart-arrière, Kerry Collins qui fut intercepté quatre fois.

Les amateurs de Football n'auront pas trop longtemps à attendre la reprise du jeu - la XFL de Vince McMahon débute sa première saison tout de suite après le tournoi annuel Pro Bowl de la NFL à Hawaii.

5.4 (P2) Si un tableau est utilisé pour la mise en page, ne pas utiliser de balisage structurel dans un but de formatage visuel.

Extrait de l'Aide du logiciel A-Prompt :

Si les tableaux sont utilisés à des fins de mise en page, la Web Accessibility Initiative (WAI) recommande aux auteurs de contenu d'éviter d'utiliser les balises de tableau pour appliquer un style au texte contenu dans des cellules de données.

Par exemple, évitez d'utiliser les éléments d'en-tête de tableau <TH> pour centrer le texte ou pour le mettre en gras. Utilisez plutôt les feuilles de style CSS pour mettre en forme le texte.

Exemple :
<TH>Évitez d'utiliser les balises HTML comme l'élément <TH> pour appliquer un style au texte.<TH> ...utilisez le CSS pour mettre le texte en gras, comme dans cet exemple... <TD><DIV style="font-weight: bold">Ce texte a été mis en gras en utilisant un CSS. </DIV></TD>

Pour s'assurer que les documents sont valides selon les standards HTML, il est important d'utiliser les balises de tableau (comme l'élément <TH>) aux fins pour lesquelles elles ont été prévues et non pour appliquer simplement une mise en forme visuelle au texte dans une cellule de tableau qui n'est pas une cellule d'en-tête.

3.4 (P2) Utiliser des unités relatives plutôt qu'absolues dans les valeurs d'attributs du langage et les valeurs de propriétés des feuilles de style.

Extrait des Techniques pour les règles d'accessibilité du contenu Web 1.0 :

Utilisez l'unité "em" pour définir les tailles de police.

Ut