  Accessibilité des sites web
[25 mn de lecture - paru le 4/16/2005 9:32:19 PM - Public : Confirmé]
|
|
Auteur
3. Résoudre les problèmes liés à l'accessibilité
3.1. Introduction
L’un des pièges classiques lorsque l’on développe un site web est de suivre à la lettre l’expression WYSIWYG (What you see is what you get, vous obtenez ce que vous voyez). En effet, qui n’a jamais eu le désespoir de voir son site « transformé » lors d’une visualisation sur un autre navigateur ou un autre terminal alors que l’affichage semblait parfait sur le PC de développement ?
Il est clair qu’étant donné la disparité des terminaux utilisés pour exploiter nos sites web, il est impossible d’obtenir rigoureusement un affichage universel. Il est donc ingérable pour tout webmaster, chevronné qu’il soit, d’obtenir un affichage identique sur les différentes plate-formes. Quand bien même il souhaiterait prévoir uniquement un affichage sur navigateur classique sur PC, sera-t-il confronté aux soucis liés aux différentes configurations utilisateur.
Nombreux sont les critères qui confirment ce constat : les tailles et résolutions d’écran, les systèmes d’exploitation, les navigateurs, la gestion des feuilles de style, les préférences (désactivation de JavaScript, Flash…).
Plutôt que d’essayer de bricoler un site utopique à l’affichage parfait, mieux vaut se concentrer sur le respect des spécifications W3C (standards du web, WAI) et fournir un site fluide, adaptable à son contexte d’affichage.
3.2. Les directives WCAG
Voici la liste des directives pour l’accessibilité aux contenus web WCAG 1.0. A partir du texte officiel, nous verrons pour chaque directive une explication sur la raison de cette dernière ainsi que des exemples de mise en application pratique. Afin de faciliter la compréhension du lecteur, seule une partie des points de contrôle seront développés ici.
3.2.1. Les images
La recommendation
« Fournir du contenu qui, présenté à l’utilisateur, fournit essentiellement la même fonction ou raison d’être que le contenu auditif ou visuel. »
La raison
Il est nécessaire de prendre en compte le fait que chaque utilisateur ne dispose pas d’un navigateur graphique où les images apparaissent correctement, il faut donc prévoir un texte alternatif décrivant chaque objet graphique ou document multimédia. Grâce à cela, un internaute utilisant par exemple un lecteur d’écran pourra être informé de la présence d’une image et de sa description.
La mise en application
- compléter efficacement et systématiquement la balise alt de vos images. Si votre image comporte du texte, il faut le retranscrire dans son intégralité à l’intérieur de cette balise. [Priorité 1]
- pour les images liées à la présentation de la page et n’ayant pas un intérêt lié au contenu du document, il faut les placer à l’intérieur des feuilles de style CSS en respectant ainsi les séparations présentation/contenu du code. [Priorité 1]
Remplacer ce code du document XHTML :
Par ce code :
Les contenus complexes peuvent être décrits plus longuement en utilisant l’attribut longdesc. [Priorité 1]
3.2.2. Les couleurs
La recommendation
« S’assurer que les textes et graphiques sont compréhensibles quand on les visualise sans couleur. »
La raison
Si la couleur véhicule une information, cela posera un problème pour les utilisateurs ne distinguant pas les couleurs ou ceux utilisant des navigateurs texte ou monochrome. De plus, un contraste marqué doit séparé chaque élément juxtaposé à un autre comme le texte et le fond de page ou 2 images disposées côte à côte.
La mise en application
- penser à tester si l’information garde son intégrité avec ou sans couleur [Priorité 1].
- veiller à ce que les combinaisons de couleurs entre les différents éléments fournissent un contraste suffisant. [Priorité 2]
Préférer :
A :
3.2.3. Les feuilles de style CSS
La recommendation
« Baliser les documents avec les éléments structurants appropriés. Contrôler la présentation avec des feuilles de style plutôt qu’avec des éléments et des attributs de présentation. »
La raison
Utiliser les balises XHTML dans un but de présentation restreint l’accessibilité. En effet, ces balises ne sont pas censées être utilisées pour remplir cette fonction, les détourner de leur utilité première freine les utilisateurs utilisant des logiciels spécialisés pour naviguer sur internet en compliquant le traitement de l’information.
La mise en application
- viser l’utilisation judicieuse des feuilles de style CSS pour contrôler la mise en page et la présentation. [Priorité 2]
Préférer :
A :
- veiller à utiliser les éléments à bon escient tout en respectant la structure logique du document. [Priorité 2]
Préférer :
A :
3.2.4. La langue
La recommendation
« Utiliser un balisage facilitant la prononciation ou l’interprétation du texte abrégé ou en langue étrangère. «
La raison
Le simple fait de préciser les changements de langage naturel dans un document permet aux logiciels spécialisés de passer d’un langage à l’autre automatiquement, restant ainsi transparent pour l’utilisateur final.
Cela permet également aux moteurs de recherche d’indexer correctement les documents dans la langue exacte.
La mise en application
- identifier les changements dans le langage naturel d’un document grâce à l’attribut lang. [Priorité 1]
- expliquer chaque abbréviation ou acronyme via les balises ABBR et ACRONYM. [Priorité 3]
- identifier le langage principal du document grâce à l’attribut lang. [Priorité 3]
3.2.5. Les tableaux
La recommendation
« Assurez vous que vos tables possédent les balises nécessaires pour être interprétées par les logiciels de consultation existants et autres agents utilisateurs. »
La raison
Contrairement aux usages détournés que l’on rencontre très souvent sur le Net, les tableaux ne sont pas à utiliser dans le cadre d’une présentation d’un document web. Un tableau doit servir uniquement à l’affichage de données tabulaires (pour présenter des données) et non pour la mise en page.
En cas de mauvaise utilisation des tables, les lecteurs d’écran se retrouveront face à de graves problèmes de traitement de l’information.
La mise en application
- identifier les en-têtes du tableau. [Priorité 1]
- associer les cellules de données et d’en-têtes à l’aide des balises THEAD, TFOOT et TGROUP (lignes), COL et COLGROUP (colonnes) dans le cas de tableaux de données à 2 rangs et plus. [Priorité 1]
- n’utiliser les tableaux que pour l’affichage de données tabulaires. [Priorité 2]
- ne pas détourner les balises structurelles dans un but de formatage visuel dans le cadre des tableaux utilisés pour la mise en page. [Priorité 2]
- créer des sommaires pour les tableaux. [Priorité 3]
3.2.6. Les nouvelles technologies
La recommendation
« S’assurer que les pages sont accessibles même lorsque les dernières technologies ne sont pas supportées ou interprétées. »
La raison
Il faut absolument garder à l’esprit que vous développez sur une plate-forme particulière et qu’elle sera forcément différente de celles de vos visiteurs pour différentes raisons : PC ou Mac, navigateurs modernes ou anciens, navigateurs graphiques ou textes, utilisation ou non d’un plug-in particulier (Flash), blocage du javascript… voilà pourquoi vos pages doivent rester visualisables même sur des plates-formes différentes de la votre.
La mise en application
- tester votre site en désactivant les feuilles de style, les scripts, les applets, les plug-ins et gérer les cas où une technologie pourrait être désactivée en proposant des contenus alternatifs. [Priorité 1]
3.2.7. Les changements de contenu
La recommendation
« S’assurer que les fonctions permettant de faire bouger, clignoter, défiler ou mettre à jour automatiquement des objets ou des pages puissent être mises en pause ou stoppées. »
La raison
Pour diverses raisons, il est à proscrire d’effectuer des effets dynamiques sur les textes dits « utiles » de votre site, c’est-à-dire ceux qui fournissent des informations liées à l’objet du site. Les lecteurs d’écran par exemple, ne peuvent pas lire les textes défilants.
- éviter tous les effets de clignotements ou défilements si ceux-ci ne peuvent pas être désactivés par l’utilisateur. [Priorité 1]
- éviter d’utiliser les systèmes de rafraîchissement automatique ou de redirection automatique. [Priorité 2]
La mise en application
Les codes suivants sont à proscrire :
3.2.8. Les interfaces utilisateur
La recommendation
« S’assurer que l’interface utilisateur respecte les principes d’accessibilité : accès aux fonctionnalités indépendant du type d’interface utilisateur, accès depuis le clavier, commandes vocales… »
La raison
Dans le cas où vous souhaitez développer des éléments indépendants comme des scripts ou des applets, vous devez veiller à ce que ceux-ci s’intégrent dans l’environnement utilisateur et que l’utilisateur puisse interagir sans contrainte sur ces éléments.
La mise en application
- Lors de l’utilisation d’événements dans un script ou un applet, préférez l’utilisation d’événements au niveau application plutôt qu’au niveau utilisateur. [Priorité 1]
- Pour les événements liés à un périphérique particulier (souvent la souris), pensez à utiliser des événements redondants. Dans l’exemple ci-dessous, les événements onclick et onkeypress ont la même fonction mais s’appliquent à la fois au clavier et à la souris. [Priorité 1]
3.2.9. Les accès indépendants de l’interface
La recommendation
« Utiliser des fonctions permettant l’activation des éléments d’une page grâce aux différentes interfaces d’entrée. »
La raison
Directement reliée à la recommendation précédente, cette directive a pour objectif de permettre à l’utilisateur d’accéder aux éléments d’une page par le biais de plusieurs périphériques d’entrée (clavier, souris, commandes vocales…). En effet, les personnes souffrant par exemple d’une vision déficiente ne pourraient accéder à un élément nécessitant un dispositif de pointage.
La mise en application
- rendre directement accessibles scripts et applets. [Priorité 2]
- mettre en place un ordre logique de tabulations permettant l’accès aux éléments importants de la page uniquement au clavier par exemple. [Priorité 3]
- utiliser les raccourcis clavier. [Priorité 3]
3.2.10. Les solutions intermédiaires
La recommendation
« Utiliser des solutions d’accessibilité intermédiaires, de manière à ce que les technologies d’assistance et les anciens navigateurs fonctionnent correctement. »
La raison
Parceque tous les utilisateurs ne disposent pas forcément des dernières technologies et navigateurs disponibles, il vous faut réfléchir à l’interopérabilité de votre site pour les différents systèmes.
La mise en application
- ne pas intervenir sur la fenêtre active sans prévenir l’utilisateur au préalable (ouverture de pop-up, redirection automatique…). [Priorité 2]
- documenter tous vos formulaires pour faciliter leur accès. [Priorité 2]
- gérer les contrôles vides de formulaire [Priorité 3]
- séparer les liens consécutifs par des caractères significatifs. [Priorité 3]
3.2.11. Le W3C
La recommendation
« Utiliser les technologies préconisées par le W3C (selon les spécifications), et respecter les directives d’accessibilité. Lorsque l’on ne peut pas utiliser une technologie du W3C, ou si en le faisant on ne peut obtenir un résultat qui se transforme de façon élégante, il faut prévoir une version alternative pour présenter le contenu. »
La raison
Utiliser les technologies préconisées par le W3C est un gage d’accessibilité pour un site. Les spécifications du W3C sont faites pour faciliter l’accessibilité et le respect des standards du web et prennent en compte les évolutions technologiques.
Dans le cas où vous souhaitez utiliser une technologie propriétaire comme le Flash, il vous faudra prendre en compte un contenu alternatif pour les personnes ne disposant du plug-in Flash ou n’ayant pas la configuration requise pour l’affichage d’une telle animation.
La mise en application
- préférer l’utilisation des technologies du W3C plutôt que des technologies équivalentes. [Priorité 2] Par exemple, ne plus utiliser la balise marquee pour faire défiler du texte mais utiliser les propriétés CSS pour obtenir l’effet équivalent.
- faire attention aux évolutions des directives du W3C en matière de normes XHTML et CSS par exemple, il ne faut plus utiliser les balises dites dépréciées. [Priorité 2]
Préférer :
A :
- prévoir un contenu alternatif accessible au cas où il vous serait impossible de rendre accessible votre page d’origine. [Priorité 1]
3.2.12. Les informations de contexte et d’orientation
La recommendation
« Fournir des informations relatives au contexte et à l’orientation pour que les utilisateurs puissent comprendre les éléments et les mises en page complexes. »
La raison
Certaines personnes peuvent avoir des difficultés à comprendre les relations entre les différents éléments de votre page, vous pouvez leur faciliter la visite du site en fournissant des informations contextuelles sur ces relations.
La mise en application
- identifier chaque page ou cadre par un titre significatif. [Priorité 1]
- documenter tous vos formulaires pour faciliter leur accès. [Priorité 2]
3.2.13. La navigation
La recommendation
« Prévoir des mécanismes de navigation clairs et cohérents – informations d’orientation, barres de navigation, carte du site… - de manière à ce qu’un utilisateur puisse trouver ce qu’il cherche sur le site. »
La raison
Une navigation claire, simple et accessible permet à tout un chacun de passer de page en page sans difficulté à l’intérieur du site. Un site n’attirera pas le visiteur si le système de navigation n’est pas intuitif et réfléchi et ce quelle que soit la qualité du contenu.
La mise en application
- créer des liens à la cible identifiable. [Priorité 1]
Préférer :
A :
- utiliser les balises de méta-données à bon escient. [Priorité 2]
- fournir un sommaire ou un plan du site. [Priorité 2]
- mettre en avant le système de navigation. [Priorité 3]
3.2.14. Les documents
La recommendation
« S’assurer que les documents soient clairs et simples, de manière à ce qu’ils puissent être facilement compris. »
La raison
Les personnes ayant des difficultés de compréhension ou des problèmes de vision doivent pouvoir visualiser facilement la structure de vos documents web.
De plus, il faut garder en mémoire le fait que le web est mondialement accessible, vos visiteurs ne parlent donc pas forcément la même langue que vous.
La mise en application
- utiliser le langage le plus simple et le plus clair possible. [Priorité 1]
- associer tous les contenus supplémentaires disponibles au profit de la compréhension de la page. [Priorité 3]
- utiliser une présentation cohérente sur l’ensemble du site. [Priorité 3]
|
13 Visites
Matthieu CARTON
[20 mn de lecture - paru le 4/15/2005 11:29:33 AM - Public : Débutant]
