Vous êtes ici : Accueil > Emplois et formation > Nouvelles technologies et accessibilité > Formation > Les règles à suivre
Emploi et formation : NTIC et accessibilité
Formation : Les règles à suivre
Documents de référence
Les informations suivantes sont tirées du site du WAI (Web Accessibility Initiative) qui est un programme du World Wide Web Consortium (W3C), à l'adresse : www.w3.org/WAI/
Il réfère aux documents suivants :
- Directives pour l'accessibilité aux contenus Web (version 1.0), du 5 mai 1999, dont la version originale anglaise s'intitule Web Content Accessibility Guidelines 1.0.
- Techniques pour les règles d'accessibilité du contenu Web 1.0, du 5 mai 1999, dont une version anglaise plus récente (6 novembre 2000) s'intitule Techniques for Web Content Accessibility Guidelines 1.0
Deux thèmes majeurs
Les règles d'accessibilité s'intéressent à deux thèmes généraux :
- assurer une transformation élégante,
- et rendre le contenu compréhensible et navigable.
Assurer une transformation élégante
En suivant ces règles, les développeurs de contenu peuvent créer des pages qui se transforment de façon élégante. Celles-ci restent accessibles malgré toutes les contraintes, y compris les handicaps physiques, sensitifs et cognitifs, les contingences professionnelles et les barrières technologiques. Voici quelques clés pour concevoir de telles pages :
Séparer la structure de la présentation (se référer à la différence entre contenu, structure et présentation).
Fournir du texte (y compris des équivalents textuels). Le texte peut être présenté de différentes façons par presque tous les navigateurs Web et est accessible à presque tous les utilisateurs.
Créer des documents qui fonctionnent même lorsque l'utilisateur ne peut pas voir et/ou entendre. Fournir de l'information ayant la même fonction que l'audio ou que la vidéo et s'adaptant aussi bien à différents canaux sensoriels. Cela n'implique pas la création d'une version audio préenregistrée d'un site Web complet pour le rendre accessible aux utilisateurs non-voyants. Ces derniers peuvent utiliser des technologies de lecture d'écran pour présenter toute l'information textuelle d'une page.
Créer des documents qui ne reposent pas sur un type particulier de matériel. Les pages devraient être accessibles à des personnes dépourvues de souris, utilisant de petits écrans, ou des écrans à basse résolution, en noir et blanc, ou encore sans écran, avec uniquement une sortie vocale ou texte, etc.
Le thème de la transformation élégante est traité principalement par les règles 1 à 11.
Rendre le contenu compréhensible et navigable
Les développeurs doivent s'attacher à rendre le contenu qu'ils créent compréhensible et navigable.
Cela implique non seulement de rendre le langage clair et simple, mais également de fournir des mécanismes compréhensibles pour naviguer à l'intérieur des pages et entre celles-ci. Fournir des outils de navigation et des informations d'orientation au sein des pages maximisera l'accessibilité et la facilité d'utilisation. Tous les utilisateurs ne sont pas en mesure d'utiliser des indices visuels comme les images cliquables, les barres de défilement proportionnelles, les cadres juxtaposés, ou les éléments graphiques qui guident les utilisateurs voyants des navigateurs graphiques. Les utilisateurs perdent également les informations contextuelles quand ils ne peuvent visualiser qu'une partie de la page, soit parce qu'ils y accèdent mot à mot (synthétiseurs vocaux ou écrans braille), ou section par section (petit écran ou écran en mode loupe). Sans information d'orientation, les utilisateurs peuvent ne pas être en mesure de comprendre de très grands tableaux, des listes, des menus, etc.
Le thème de la conception de contenu compréhensible et navigable est couvert principalement par les règles 12 à 14.
La signification des niveaux de priorité
Priorité 1 : Un développeur de contenu Web doit satisfaire à ce critère. Sinon, un ou plusieurs groupes seront dans l'impossibilité d'accéder aux informations contenues dans le document. La satisfaction de ce critère est un prérequis fondamental pour que certains groupes puissent utiliser des documents Web.
Priorité 2 : Un développeur de contenu Web devrait satisfaire à ce critère. A défaut, un ou plusieurs groupes aura des difficultés à accéder aux informations contenues dans le document. La satisfaction de ce critère lèvera des barrières significatives à l'accès aux documents Web.
Priorité 3 : Un développeur de contenu Web peut se préoccuper de ce critère. A défaut, un ou plusieurs groupes éprouveront quelques difficultés à accéder aux informations contenues dans le document. La satisfaction de ce critère améliorera l'accès aux documents Web.
Certains points à contrôler spécifient un niveau de priorité qui peut varier sous certaines conditions (précisées).
Les règles
Règle 1. Fournir des alternatives équivalentes au contenu visuel et auditif.
Règle 2. Ne pas s'en remettre seulement aux couleurs.
Règle 3. Utiliser le balisage et les feuilles de style, et cela de façon appropriée.
Règle 4. Clarifier l'utilisation du langage naturel.
Règle 5. Créer des tableaux qui se transforment de façon élégante.
Règle 6. S'assurer que les pages qui contiennent de nouvelles technologies se transforment de façon élégante.
Règle 7. Assurer à l'utilisateur le contrôle des changements du contenu lorsque ce dernier varie dans le temps.
Règle 8. Assurer un accès direct aux interfaces utilisateur intégrées.
Règle 9. Concevoir en respectant l'indépendance par rapport au périphérique.
Règle 10. Utiliser des solutions intérimaires.
Règle 11. Utiliser les technologies et directives du W3C.
Règle 12. Fournir de l'information de contexte et d'orientation.
Règle 13. Fournir des mécanismes de navigation clairs.
Règle 14. S'assurer que les documents sont clairs et simples.
Les points de contrôle classés par thème
Les 14 règles d'accessibilité se détaillent en 65 points de contrôle classés en trois niveaux de priorité. Dans la liste de vérification qui suit, les items marqués « +P3 » devraient être inclus avec les P1 et P2 pour un total de 53 points de contrôle assurant à vos pages Web un très bon niveau d'accessibilité.
Validité
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P2 | 3.2 | Créer des documents qui sont valides par rapport aux grammaires formelles publiées. | |||
| P2 | 11.1 | Utiliser les technologies du W3C lorsqu'elles sont disponibles et adaptées à une tâche. Utiliser les dernières versions supportées. | |||
| P2 | 11.2 | Éviter d'utiliser les fonctionnalités déconseillées des technologies du W3C. |
3.2 : La validité du code HTML et de la feuille de styles CSS constituent un premier pas vers l'accessibilité. En effet, HTML 4.01 prévoit déjà qu'une image doit comporter un attribut « alt ». D'autre part, un code mal écrit peut générer des problèmes d'accessibilité.
11.1 : Pour la présentation des équations mathématiques, il est préférable d'utiliser une technologie comme MathML plutôt que de produire un graphique décrit par un équivalent textuel.
11.2 : La balise « FONT » est un exemple de fonctionnalité déconseillée depuis HTML 4.01. Les effets de présentations doivent maintenant être obtenus par le biais de la feuille de styles CSS, ce qui permet de dissocier le contenu et sa structure de sa présentation. La feuille de styles CSS utilisée par l'auteur peut alors être remplacée par celle de l'utilisateur, ce qui permet d'obtenir une présentation mieux adaptée aux besoins de certaines personnes.
Navigation
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P2 | 13.2 | Fournir des métadonnées pour ajouter l'information sémantique aux pages et aux sites. | |||
| P2 | 13.3 | Fournir des informations concernant la mise en page générale d'un site. (p. ex. le plan d'un site, ou une table des matières). | |||
| P2 | 13.4 | Utiliser les mécanismes de navigation de manière cohérente. | |||
| +P3 | 13.8 | Placer des informations clés au début des en-têtes, des paragraphes, des listes etc. | |||
| P3 | 13.5 | Fournir des barres de navigation pour mettre en valeur et donner accès aux mécanismes de navigation. | |||
| P3 | 13.7 | Si des fonctions de recherche sont fournies, permettre différents types de recherche, pour des préférences et des niveaux de compétence différents. | |||
| P3 | 13.9 | Fournir de l'information à propos des ensembles de documents (i.e., des documents comprenant plusieurs pages.). |
13.2 : Par exemple, le « Dublin Core » est un ensemble de métadonnées de plus en plus répandu et permettant le catalogage des pages Web.
13.8 : Commencer chaque élément ou section du contenu par les informations clés est une règle de communication bien connue des journalistes. Cela permet de capter immédiatement l'attention et de transmettre l'essentiel du message dès les premières lignes. Les personnes ayant des limitations cognitives auront plus de chances d'en saisir le sens, les lecteurs dont ce n'est pas la langue maternelle apprécieront également.
Compréhension
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P1 | 14.1 | Utiliser le langage le plus clair et le plus simple approprié au contenu du site. | |||
| +P3 | 14.3 | Créer un style de présentation qui est cohérent de page en page. | |||
| P3 | 14.2 | Associer du contenu visuel ou audio au texte, lorsque cela peut faciliter la compréhension d'une page. |
14.1 : Il est souvent possible de dire les choses avec un vocabulaire plus simple et des phrases plus courtes. Quand un contenu s'adresse à un public large, c'est un règle de communication importante qui aidera grandement à la diffusion de votre message.
14.3 : La cohérence de la présentation facilite d'autant la navigation sur votre site, ce qui aidera les visiteurs à trouver ce qu'ils recherchent.
Couleurs
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P1 | 2.1 | S'assurer que toute information transmise par les couleurs est également disponible sans couleur, par exemple à partir du contexte ou du balisage. | |||
| P2 | 2.2 | 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] |
2.1 : Dans les consignes données ou les mécanismes de navigation, vous ne devez pas vous en remettre seulement aux couleurs. Une personne qui ne perçoit pas les couleurs doit pouvoir se fier sur des indices redondants comme la forme, la disposition ou des indications textuelles, la couleur étant un indice supplémentaire pour ceux qui la perçoivent. Par exemple, il ne suffit pas de mettre les champs obligatoires d'un formulaire en rouge. Ceux-ci doivent également être indiqués par une image ou un texte visibles pour tous.
2.2 : Le contraste des couleurs doit être suffisant pour permettre une bonne lisibilité aussi bien pour les couleurs de texte et de fond de la page que des images contenant du texte souvent utilisées pour le système de navigation. Le logiciel d'évaluation et de réparation A-Prompt offre une interface intéressante pour tester le contraste des couleurs. Sauvegardez le fichier couleur.html sur votre disque et soumettez-le à A-Prompt pour tester vos couleurs. Par défaut, A-Prompt ne vérifie que les valeurs de couleurs inscrites dans la balise BODY, mais vous devez tester tous les constrates des couleurs texte sur fond utilisés dans vos pages Web.
Langue
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P1 | 4.1 | Identifier clairement les changements de la langue naturelle du texte d'un document et de tout équivalent textuel (ex. les légendes). | |||
| +P3 | 4.3 | Identifier la langue naturelle première d'un document. | |||
| P3 | 4.2 | Spécifier la forme complète de chaque abréviation ou acronyme employés dans le document lors de la première utilisation. |
Les synthétiseurs vocaux utilisés par les personnes aveugles ou malvoyantes sont conçus pour une langue spécifique et deviennent à peu près incompréhensibles quand on les utilise dans une autre langue. Quand la langue principale de la page est correctement identifiée ainsi que les changements à l'intérieur du texte, le logiciel de lecture d'écran peut changer de synthétiseur automatiquement selon les besoins. L'attribut « lang="??" » peut être incorporé à la balise HTML de début de page ou à toute autre balise encadrant un passage dans une autre langue. Si le passage dans une autre langue ne correspond pas aux limites d'une balise, il vaut mieux utiliser la balise « SPAN lang="??" » pour délimiter ce passage. Les « ?? » doivent être remplacés par « FR » pour français et « EN » pour anglais.
Structure
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P2 | 3.5 | Utiliser les éléments d'en-tête pour spécifier la structure du document, et les utiliser en accord avec les spécifications. | |||
| P2 | 3.6 | Baliser les listes et les éléments de listes correctement. | |||
| P2 | 3.7 | Baliser les citations. Ne pas utiliser le balisage des citations pour des effets de mise en forme comme l'indentation. | |||
| P2 | 12.3 | Diviser les grands blocs d'information en groupes plus faciles à gérer lorsque c'est naturel et approprié. | |||
| +P3 | 9.4 | Créer un ordre logique de tabulation entre les liens, les contrôles de formulaire, et les objets. |
3.5 : Les éléments d'en-tête H1 à H6 constituent des points de repères extrêmement importants pour les personnes qui ne peuvent compter sur une vision globale de la page pour se faire une idée de son organisation. Les aveugles et les malvoyants pourront donc parcourir les en-têtes qui constitueront pour ainsi dire une table des matières de la page. Ces éléments d'en-tête ne doivent donc jamais être utilisés pour des effets de présentation qui doivent être obtenus par le biais de la feuille de styles CSS. D'autre part, les en-têtes doivent constituer une structure logique avec un seul H1, des H2 pour marquer le début des grandes sections et des H3 pour le début des sous-sections. N'utilisez de H4 que si votre page est longue et complexe.
3.6 et 3.7 : Les listes à puces ou numérotées ainsi que les citations sont aussi des éléments de structure importants qui permettent d'organiser le contenu de la page. Elles doivent donc être utilisées à bon escient et non pour créer un effet de retrait qui peut être obtenu par le biais de la feuille de styles CSS.
9.4 : Les personnes ayant des limitations motrices qui ne leur permettent pas d'utiliser une souris et les personnes aveugles naviguent sur le Web avec leur clavier. Vous devez donc vous assurer que l'ordre de tabulation dans la page et dans les formulaires est logique. Au besoin, vous pouvez corriger cet ordre en utilisant l'attribut « tabindex="?" » avec des numéros rétablissant un ordre plus approprié.
Mise en forme
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P1 | 6.1 | 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ées, il doit rester lisible. | |||
| P2 | 3.3 | Utiliser des feuilles de style pour contrôler la mise en page et la présentation. | |||
| P2 | 3.4 | Utiliser des unités relatives plutôt qu'absolues dans les valeurs d'attributs du langage de balisage et les valeurs de propriétés des feuilles de style. |
6.1 : Bien que les règles d'accessibilité recommandent l'utilisation des feuilles de styles CSS pour contrôler la mise en page et la présentation, vous devez vous assurer que vos pages demeurent lisibles sans feuille de styles. Pour ce faire, vous pouvez désactiver l'option « Spécification du style de la page » de l'onglet « Style de la page » dans les Préférences du navigateur Opera 6. Le but recherché est la compatibilité avec les anciens navigateurs toujours en usage et la possibilité de remplacer la feuille de styles du concepteur par celle de l'utilisateur pour obtenir un environnement visuel mieux adapté à certains types de limitations.
3.4 : L'utilisation d'unités relatives, pour les tailles de police ou les tableaux, en « em » ou en pourcentage, permet à ceux-ci de s'ajuster à la taille de la fenêtre, à la résolution de l'écran ou à la taille de la police de caractères utilisée.
Liens
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P2 | 13.1 | Identifier clairement la destination de chaque lien. | |||
| +P3 | 13.6 | Regrouper les liens de même nature, identifier le groupe (pour les agents utilisateurs), et jusqu'à ce que les agents utilisateurs le permettent, donner un moyen de passer le groupe. | |||
| P3 | 10.5 | Jusqu'à ce que les agents utilisateurs (y compris les technologies d'adaptation) indiquent les liens adjacents de façon distincte, inclure, entre les liens adjacents, des caractères imprimables (entourés par des espaces). |
13.1 : Le texte des liens doit être significatif même hors contexte. En effet, les logiciels de lecture d'écran en braille ou en synthèse vocale offrent une fonction de navigation dans la liste des liens où le texte des liens est extrait de son contexte. Les liens utilisant de façon répétitive le même texte comme « cliquer ici » ou « lire l'article » posent donc problème.
13.6 : Les menus présentant une longue liste de liens qui se répète de page en page sont fastidieux pour les utilisateurs d'un logiciel de lecture d'écran qui ne peuvent pas facilement aller au contenu principal en déplaçant simplement le regard. Pour pallier à cette difficulté, vous devriez incorporer au début du menu un lien visible ou non (sur un gif transparent, par exemple) conduisant au contenu principal de la page. Ce lien peut s'intituler simplement « Passer le menu ».
Éléments non-textuels
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P1 | 1.1 | 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. | |||
| P2 | 3.1 | Quand un langage de balisage approprié existe, utiliser des balises plutôt que des images pour transmettre l'information. | |||
| P3 | 13.10 | Fournir un moyen de passer une illustration ASCII de plusieurs lignes. |
1.1 : Tout contenu non-textuel doit avoir un équivalent textuel. Qu'il s'agisse d'une image fixe ou animée, d'un clip sonore ou vidéo ou d'un programme incorporé à une page, un texte équivalent doit être disponible. Quand il s'agit d'image purement décorative et sans signification, vous pouvez inscrire un équivalent vide « alt="" ». Pour les images utilisées comme bouton, il est important de décrire la fonction du bouton plutôt que son apparence (example: « Retour à la page d'accueil » plutôt que « Petite maison bleu au toit rouge ». Pour les images plus complexe comme les diagrammes ou les graphiques qui ne peuvent être décrites en 10 à 12 mots, incorporez un attribut « LONGDESC » pointant vers une page explicative qui reprendra tout le contenu visuel de cette image.
Images cliquables
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P1 | 1.2 | Fournir des liens textuels redondants pour chaque zone sensible d'une image cliquable côté serveur. | |||
| P1 | 9.1 | 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. | |||
| P3 | 1.5 | Jusqu'à ce que les agents utilisateurs interprètent les équivalents textuels pour les liens des images cliquables côté client, fournir des liens textuels redondants pour chaque zone sensible d'une image cliquable côté client. |
Vous devez utiliser des images cliquables côté client car elles permettent d'incorporer un équivalent textuel pour chaque zone sensible. Si vous devez malgré tout utiliser des images cliquables côté serveur, vous devez ajouter des liens textuels redondants.
Multimédia
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P1 | 1.3 | 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. | |||
| P1 | 1.4 | 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. |
Pour les contenus multimédias comme les vidéos, l'équivalent textuel doit prendre la forme de sous-titres et d'audio-description et être synchronisé avec le contenu. Pour plus d'information, consultez la site du National Center for Accessible Media. Notez qu'il s'agit d'une priorité de niveau 1.
tableaux
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P1 | 5.1 | Pour les tableaux de données, identifier les en-têtes de ligne et de colonne. | |||
| P1 | 5.2 | 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. | |||
| P2 | 5.3 | 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). | |||
| P2 | 5.4 | Si un tableau est utilisé pour la mise en page, ne pas utiliser de balisage structurel dans un but de formatage visuel. | |||
| +P3 | 5.5 | Fournir des sommaires pour les tableaux. | |||
| +P3 | 5.6 | Fournir des abréviations pour les étiquettes d'en-têtes. | |||
| P3 | 10.3 | Jusqu'à ce que les agents utilisateurs (y compris les technologies d'adaptation) rendent le texte en vis-à-vis correctement, fournir une alternative linéaire du texte (sur la page concernée ou sur une autre) pour tous les tableaux qui disposent le texte en colonnes parallèles avec retour à la ligne automatique. |
5.3 et 5.4 : Les tableaux utilisés à des fins de mise en page doivent pouvoir se linéariser de façon logique, c'est-à-dire qu'on doit pouvoir le lire de façon séquentielle, de gauche à droite, ligne par ligne. Une bonne façon de vérifier que le tableau a du sens une fois linéarisé est de désactiver, dans Opera 6, l'option « tableaux » de l'onglet « Style de la page » des Préférences. Par ailleurs, un tableau de mise en page, ne doit pas utiliser de cellules d'en-tête « TH » pour obtenir un effet de présentation qui doit être contrôlé par la feuille de styles CSS.
5.1 : Les tableaux de données constituent un environnement complexe pour les utilisateurs aveugles ou malvoyants parce qu'ils ne peuvent en avoir une vision globale qui leur permettrait d'en comprendre facilement l'organisation. Les règles d'accessibilité prévoient donc différentes façons d'ajouter de l'information de navigation qui les rendent plus accessibles. Pour un tableau simple, il s'agit simplement de distinguer les cellules d'en-tête « TH » des cellules de données « TD ». Les logiciels de lecture d'écran pourront ainsi indiquer à l'utilisateur le titre de la colonne ou de la ligne où il se trouve.
5.2 : Pour les tableaux de données complexes qui ont plus d'une ligne de titres ou plus d'une colonne de titres, vous devez associer explicitement les cellules de données avec toutes les cellules de titres correspondantes. Il faut donc d'abord assigner un attribut « ID » unique à chaque cellule de titre. Par la suite, il faut incorporer un attribut « headers="? ? ?" » à chaque cellule de données. Ce dernier placera entre guillemets et séparés par un espace, tous les « ID » des cellules de titre qui s'appliquent à la cellule courante. Ce travail doit habituellement être réalisé à la main directement dans le code, car les logiciels auteurs n'ont pas prévu d'interface pour ce faire. Voir l'exemple ci-dessous.
5.5 : Les tableaux de données ont besoin d'un sommaire et peuvent également bénéficier d'une légende. Le sommaire veut compenser le manque de vision globale de l'utilisateur aveugle en donnant une brève description de l'organisation du tableau. Il est inscrit dans l'attribut « SUMMARY » et peut être aussi long que nécessaire. La légende, quant à elle, est une information complémentaire qui vient chapeauter un tableau comme un titre. Elle s'inscrit dans l'élément « CAPTION » qui doit être placé immédiatement sous l'élément « table ». Voir l'exemple ci-dessous.
5.6 : Quand les titres des colonnes ou des lignes sont longs et qu'il serait fastidieux pour l'utilisateur d'entendre répéter cette information à de nombreuses reprises, il est préférable d'utiliser des abréviations. Considérez un tableau avec l'en-tête qui suit : <th>Estimation des dépenses pour les soins de santé par les agences du Gouvernement fédéral durant la prochaine décennie</th>. L'abréviation y serait inscrite comme suit : <th abbr="Estimation des dépenses">Estimation des dépenses pour les soins de santé par les agences du Gouvernement fédéral durant la prochaine décennie</th>.
Exemple de codage HTML d'un tableau complexe :
<table border="1" cellspacing="2" cellpadding="2" SUMMLY="Ce tableau présente les frais de deux voyages, les dépenses pour chaque date ainsi qu'un sous-total. Un grand total est présenté à la fin. Notez que la colonne des destinations comporte deux blocs de trois cellules fusionnées verticalement.">
<caption>Rapport des frais de voyage</caption>
<tr>
<th id="L1C1">Destination</th>
<th id="L1C2">Dates du déplacement</th>
<th id="L1C3">Repas</th>
<th id="L1C4">Hôtel</th>
<th id="L1C5">Transport</th>
<th id="L1C6">Total</th>
</tr>
<tr>
<th id="L2C1" headers="L1C1" rowspan="3">Attlanta</th>
<th id="L2C2" headers="L1C2 L2C1">25 août</th>
<td headers="L1C3 L2C1 L2C2">37</td>
<td headers="L1C4 L2C1 L2C2">112</td>
<td headers="L1C5 L2C1 L2C2">45</td>
<td headers="L1C6 L2C1 L2C2"> </td>
</tr>
<tr>
<th id="L3C2" headers="L1C2 L2C1">26
août</th>
<td headers="L1C3 L2C1 L3C2">27</td>
<td headers="L1C4 L2C1 L3C2">112</td>
<td headers="L1C5 L2C1 L3C2">45</td>
<td headers="L1C6 L2C1 L3C2"> </td>
</tr>
<tr>
<th id="L4C2" headers="L1C2 L2C1">Sous-total</th>
<td headers="L1C3 L2C1 L4C2">64</td>
<td headers="L1C4 L2C1 L4C2">224</td>
<td headers="L1C5 L2C1 L4C2">90</td>
<td headers="L1C6 L2C1 L4C2">378</td>
</tr>
<tr>
<th id="L5C1" headers="L1C1" rowspan="3">Boston</th>
<th id="L5C2" headers="L1C2 L5C1">27 août</th>
<td headers="L1C3 L5C1 L5C2">96</td>
<td headers="L1C4 L5C1 L5C2">109</td>
<td headers="L1C5 L5C1 L5C2">36</td>
<td headers="L1C6 L5C1 L5C2"> </td>
</tr>
<tr>
<th id="L6C2" headers="L1C2 L5C1">28 août </th>
<td headers="L1C3 L5C1 L6C2">35</td>
<td headers="L1C4 L5C1 L6C2">109</td>
<td headers="L1C5 L5C1 L6C2">36</td>
<td headers="L1C6 L5C1 L6C2"> </td>
</tr>
<tr>
<th id="L7C2" headers="L1C2 L5C1">Sous-total</th>
<td headers="L1C3 L5C1 L7C2">131</td>
<td headers="L1C4 L5C1 L7C2">218</td>
<td headers="L1C5 L5C1 L7C2">72</td>
<td headers="L1C6 L5C1 L7C2">421</td>
</tr>
<tr>
<th id="L8C1">Compilation</th>
<th id="L8C2">Grand total</th>
<td headers="L1C3 L8C1 L8C2">195</td>
<td headers="L1C4 L8C1 L8C2">442</td>
<td headers="L1C5 L8C1 L8C2">162</td>
<td headers="L1C6 L8C1 L8C2">799</td>
</tr>
</table>
Nouvelles technologies
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P1 | 6.2 | S'assurer que les équivalents pour le contenu dynamique soient mis à jour lorsque le contenu dynamique change. | |||
| P1 | 6.3 | 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. | |||
| 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. | |||
| P2 | 6.5 | S'assurer que le contenu dynamique est accessible ou fournir une présentation ou une page alternative. | |||
| P2 | 8.1 | Rendre les éléments programmes comme les scripts et les applets directement accessibles ou compatibles avec les technologies d'adaptation. [Priorité 1 si la fonctionnalité est importante et n'est pas présentée ailleurs, sinon Priorité 2.] | |||
| P2 | 9.2 | S'assurer que tout élément qui possède sa propre interface peut être utilisé de façon indépendante par rapport au périphérique. | |||
| P2 | 9.3 | Pour les scripts, spécifier des gestionnaires d'événements logiques plutôt que des gestionnaires d'événements dépendants du périphérique. |
6.2 : Les pages générées de façon dynamiques doivent inclure les équivalents textuels appropriés.
6.3 : Opera 6 vous permet de désactiver les scripts et de vérifier si la page demeure utilisable. Sinon, il faut inscrire dans la section « NOSCRIPT » un contenu équivalent à celui qui devient ainsi inaccessible.
6.4 et 9.3 : Vous devez vous assurer que les événements comme « onMouseOver » ou « onMouseOut » sont dédoublés avec des événements au clavier comme « onFocus » et « onBlur ». Le logiciel d'évaluation et de réparation A-Prompt peut faire cette réparation pour vous. Attention toutefois, vous devez tester la page corrigée car cette procédure échoue dans certaines situations et la page en ressort alors endommagée. Si cela se produisait, vous devriez faire les modifications de façon manuelle.
Exemple de codage d'événements redondants :
<a href="page.html" tabindex=1
onMouseOver="ChangeImage('image1.gif','image1b.gif')"
onFocus="ChangeImage('image1.gif','image1b.gif')"
onMouseOut="RetourImage('dehors')"
onBlur="RetourImage('dehors')"> <img src="image1.gif" border="0" width="200" height="23" alt="Page d'accueil"></a>
8.1 et 9.2 : Si vous incorporez des objets programmes à vos pages, ceux-ci doivent être accessibles avec les logiciels de lecture d'écran.
Formulaires
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P2 | 10.2 | 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 associés. | |||
| P2 | 12.4 | Associer les labels avec leurs éléments de contrôle de manière explicite. | |||
| P3 | 10.4 | Jusqu'à ce que les agents utilisateurs prennent en compte les champs vides correctement, placer du texte substituable dans les champs vides des formulaires de type zones d'édition simples et multilignes. |
10.2 : Les étiquettes doivent être placées à proximité immédiate des champs de formulaire correspondants : au-dessus ou à gauche pour les zones de texte ou de liste et à droite ou à gauche des cases à cocher et des boutons radio.
12.4 : De plus, vous devez associer explicitement les étiquettes et les champs correspondants avec l'attribut « FOR » qui reprend le « ID » du champ auquel il est associé. Cette association doit généralement être faite manuellement dans le code.
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>
Cadres
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P1 | 12.1 | Donner un titre à chaque cadre pour faciliter l'identification et la navigation entre cadres. | |||
| P2 | 12.2 | 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. |
12.1 : Donnez des titres significatifs aux cadres qui décrivent leur fonction, par exemple : Menu de navigation, Contenu principal, Bannière publicitaire. Les utilisateurs aveugles comprendront ainsi aisément l'organisation de l'information à l'écran.
12.2 : S'il y a plus de deux ou trois cadres ou si leur interaction est trop complexe pour être décrite seulement dans leur titre, utilisez l'attribut « LONGDESC » pour donner les explications requises.
Contrôle de l'utilisateur
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P1 | 7.1 | Jusqu'à ce que les agents utilisateurs permettent de contrôler l'oscillation, éviter de créer des phénomènes d'oscillations à l'écran. | |||
| P2 | 7.2 | 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é). | |||
| P2 | 7.3 | Jusqu'à ce que les agents utilisateurs permettent de figer le contenu mobile, éviter le mouvement dans les pages. | |||
| P2 | 7.4 | Jusqu'à ce que les agents-utilisateurs permettent de stopper les actualisations, éviter de créer des pages s'actualisant automatiquement. | |||
| P2 | 7.5 | 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. | |||
| P2 | 10.1 | 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. | |||
| P3 | 9.5 | Fournir des raccourcis clavier pour les liens importants (y compris ceux dans les images cliquables côté client), les contrôles de formulaire, et les groupes de contrôles de formulaire. | |||
| P3 | 11.3 | Fournir des informations afin que les utilisateurs puissent recevoir les documents selon leurs préférences. (p.ex. la langue, le type de contenu, etc.) |
7.1 à 7.3 : Le mouvement peut-être trop distrayant pour les personnes ayant des limitations cognitives. De plus, les effets stroboscopiques peuvent générer des crises chez certaines personnes épileptiques.
7.4 : L'actualisation automatique de la page est interprétée par les logiciels de lecture d'écran comme le chargement d'une nouvelle page, ce qui entraîne la relecture de la page à partir du début. Cela s'applique également à l'actualisation automatique d'un cadre de la page, car le logiciel de lecture d'écran considère la page dans son ensemble.
7.5 : La redirection automatique peut être déroutante parce qu'elle ne laisse pas à certains utilisateurs le temps nécessaire à la lecture complète de la page. Il vaut donc mieux désactiver cette fonction et offrir plutôt un lien vers la nouvelle page que l'utilisateur pourra activer à sa convenance.
10.1 : Les fenêtres « pop-up » à ouverture automatique sont une cause importante de désorientation pour les utilisateurs aveugles qui ne les voient pas surgir à l'écran et se retrouvent dans une nouvelle fenêtre sans en avoir connaissance. Évitez-les donc si possible. Sinon, ajoutez une avertissement au lien indiquant « Ce lien ouvrira une nouvelle fenêtre ».
Dernier recours
| Niveau | No | Point de contrôle | OUI | NON | NA |
|---|---|---|---|---|---|
| P1 | 11.4 | 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. |
11.4 : La création de pages alternatives souvent appelées « texte seulement », n'est recommandée qu'en dernier recours. En effet, il est tout à fait possible de créer des pages attrayantes visuellement tout en demeurant entièrement accessibles. L'offre d'un format alternatif a donc souvent l'air d'un constat d'échec et donne, qu'on le veuille ou non, une impression d'exclusion.
Quelques conseils de convivialité
Jakob Nielsen est reconnu internationalement pour ses études sur la convivialité. Les quelques conseils qui suivent sont tirés de l'étude de Kara Pernice Coyne et Jakob Nielsen intitulée « Beyond Alt Text » (http://www.nngroup.com/reports/accessibility/). Cette étude (en anglais seulement) utilisant une méthodologie rigoureuse est abondamment illustrée et les problématiques y sont bien décrites. C'est un excellent outil de sensibilisation sur les problèmes d'accessibilité et de convivialité rencontrés par les utilisateurs aveugles et malvoyants ou ayant des problèmes moteurs. Son prix élevé de 190 $ US en restreindra malheureusement la diffusion. Les conseils qui suivent ne résument que 13 de ses 75 recommandations.
- Ne pas utiliser de menus en cascade (comprenant des sous-menus) parce qu'ils sont difficiles à suivre pour les personnes ayant des problèmes visuels ou moteurs.
- Indiquer clairement les champs obligatoires des formulaires avec plus que la couleur ou un astérisque.
- De préférence disposer les formulaires en une seule colonne verticale.
- Placer les instructions avant les champs de formulaire et non après.
- Placer les étiquettes le plus près possible des champs de formulaire.
- Placer les boutons d'un formulaire le plus près possible du dernier champ.
- Multiplier par trois ou quatre le temps alloué pour compléter un formulaire ou désactiver cette fonction.
- Les boutons graphiques affichant du texte doivent utiliser une police minimale de 12 points. Partout où cela est possible, il vaut mieux remplacer les menus graphiques par des menus textuels qui pourront grossir quand l'utilisateur augmentera la taille de la police d'affichage.
- Souligner les liens textuels, car il s'agit d'une convention qui permet de les identifier facilement et de les distinguer du texte.
- Ne pas se fier sur une image de fond pour obtenir un bon contraste.
- Écrire avec concision et éliminer tout texte superflu.
- Utiliser une fonction de recherche qui pardonne les erreurs d'orthographe.
- Placer les boutons « Ajouter au panier » et « Régler la commande » le plus près possible du contenu auquel ils s'appliquent.
Table des matières du document
Nouvelles technologies et accessibilité
La Commission des partenaires du marché du travail contribue au financement des activités du
Comité d'adaptation de la main-d'oeuvre (CAMO) pour personnes handicapées.
Pour plus de renseignements sur le marché du travail et sur les programmes et services publics d'emploi, consultez le site d'Emploi-Québec.
