Intervention de Open-S

Replaçons l'intervention de Open-S dans son contexte: amener le site du planetarium à la labellisation. Pour ce faire, j'ai accompagné le prestataire en charge de la réalisation (la société Montpellierraine OVEA) au début, au milieu, et à la fin du projet. Cet accompagnement a pris plusieurs formes:

  1. au début du projet par l'étude des contraintes propres au projet, ainsi qu'à celles liées à l'accessibilité. Nous avons passé en revue les grandes lignes de l'accessibilité comme la notion (globale) de contenu alternatif, les erreurs classiques à ne pas commettre (menu déroulant) et les choix à faire en matière de gabarits de page.
  2. en milieu de projet par un audit d'accessibilité. Ce premier audit a porté sur les gabarits de pages déjà disponibles. Il a permis d'identifier les points à corriger dans les modèles de pages (donc récurrents sur toutes les pages), ainsi que quelques points portant sur le contenu en lui-même (par exemple des intitulés de liens au sein d'articles).
  3. en fin de projet pour l'accession au label. Cette dernière étape a été découpée en un deuxième audit sur le site final (tous les gabarits et le contenu final), puis en une phase d'ajustements techniques. Ces ajustements/réparations ont permis de valider tous les critères AccessiWeb requis pour obtenir le label.

Difficultés techniques à relever

Dès le cahier des charges, le prérequis graphique était spécifié. Il fallait donc allier ce souhait de créativité visuelle et d'accessibilité. La séquence d'introduction Flash était elle aussi un prérequis pour amener l'internaute dans l'ambiance du planetarium.

Séquence Flash valide et accessible

Validité de la grammaire XHTML

Avant de travailler sur l'accessibilité de la séquence Flash, je voulais disposer d'une page XHTML conforme à sa grammaire. La direction à suivre nous était donnée par l'article Flash Satay sur A List Apart. En deux mots, l'astuce pour avoir un balisage conforme est d'utiliser une séquence Flash faisant office de conteneur, qui appelle à son tour la véritable introduction Flash.

Accessibilité du Flash

Etant dans de bonnes dispositions, nous pouvons maintenant passer à l'accessibilité de la séquence Flash. L'introduction est consitutée d'une animation d'objets, accompagnée d'une bande sonore, pour finir par une zone cliquable (le logo du planetarium) qui permet l'entrée dans le site.

Le tout premier point d'accessibilité consiste à proposer un lien de type skip, pour passer la séquence. Au risque d'écrire une évidence, rappelons que ce lien doit être dans le HTML et non dans le Flash (sinon comment y accéder si justement on n'a pas le plugin Flash ?).

Eléments perturbants de la séquence Flash

La présence d'éléments mouvants dans l'animation peut rendre difficile voire impossible la navigation à des personnes atteintes de déficience visuelle ou de trouble de la concentration. De même la bande son peut parasiter une navigation avec une synthèse vocale. En effet, si une bande son vient "par-dessus" la lecture de la synthèse vocale, on risque de ne pas tout comprendre. Par ailleurs, la bande son se déclenchant automatiquement l'utilisateur aveugle peut être surpris voire perturbé. Une fois la surprise passée, il est probable qu'il veuille couper le son de l'animation afin de se concentrer sur la synthèse vocale.

Solutions apportées pour l'accessibilité du Flash

Pour répondre à tous ces éléments, nous avons ajouté un lien "Stopper l'animation Flash" qui arrète l'animation visuelle et la bande son. Pour arriver à ce résultat, nous avons en fait créé une deuxième page identique en remplaçant l'animation Flash par une image (l'image finale de l'animation). Le lien "Stopper l'animation Flash" mène donc vers cette page.

Suivant le principe ceinture + bretelles, nous avons pris une précaution supplémentaire en décalant le démarrage de la bande son de quelques secondes (entre une et deux). Ainsi lors du chargement de la page, l'animation Flash est lancée mais le son de l'animation n'apparait qu'un peu après, ce qui laisse le temps à la synthèse vocale de lire les liens qui sont dessous.

Notion d'alternative au contenu Flash

La notion de contenu alternatif est une des clés de voute de l'accessibilité. Le Flash ne déroge pas à la règle, nous devions lui fournir une alternative, et donc servir les utilisateurs n'ayant pas le plugin Flash.

La première étape consiste ici à définir le contenu alternatif. Nous devons y placer d'une part les informations du Flash et d'autre part les actions possibles. Nous considérons que la séquence Flash du Planetarium ne véhicule pas d'information, et qu'elle n'offre qu'une action: celle d'entrer dans le site.

Le contenu alternatif étant défini, nous pouvons passer à sa mise en oeuvre. Le Flash Satay nous conseille d'utiliser la balise object à juste titre puisqu'elle permet de proposer un contenu alternatif. Face à une telle balise, un navigateur doit proposer un rendu pour le premier fils de la balise, et s'il n'y arrive pas passer au fils suivant. Ainsi notre contenu alternatif prend la forme d'une image-lien (<a href="..."><img src="..." /></a>) placée en deuxième fils du object. La seule action du Flash est maintenant accessible aux internautes n'ayant pas le plugin.

Créativité visuelle et accessibilité

Un des éléments graphiques important du site est l'image de fond. Ce qu'on appelle image de fond est en fait les bandes graphiques à droite et à gauche de la zone de contenu, accompagnées de la zone graphique supérieure incluant le titre "planetarium" sur fond de soleil.

Une contrainte graphique était la présence de l'arc de cercle supérieur (de part et d'autre du "soleil du planetarium"). A cause de cet arc et pour des questions de temps, il a été décidé d'utiliser une largeur fixe pour la zone de contenu. Par ailleurs, pour des questions d'équilibre visuel, la planète Saturne devait se trouver à cheval au dessus de la zone de contenu et de la bande graphique droite. De plus, il fallait que les bandes graphiques droite et gauche ne se répètent pas verticalement, et qu'il y ait une largeur suffisante de "contenu graphique" dans les zones droite et gauche.

Pour satisfaire l'ensemble de ces contraintes, c'est un tableau de mise en forme qui a été choisi. La non répétition du contenu des bandes graphiques est atteinte en utilisant deux images de 2500 pixels de haut, mises en image de fond de cellule. Ainsi, le contenu n'est pas répété même pour les très hautes résolutions, et n'est affiché que sur la longueur de la page. De plus, Saturne est découpé en deux parties (bandeau central et bande graphique droite) qui restent correctement alignées.

Proposer un tableau de mise en forme n'est pas contraire à l'accessibilité, sous réserve de respecter quelques points. Pour cela, la balise table possède un attribut summary vide, au même titre qu'une image de décoration possède un alt vide. En parallèle, nous avons veillé à ce que l'ordonnancement des cellules du tableau soit correct, de sorte que même linéarisé, le contenu soit toujours cohérent.

Outils utilisés

Bases libres

Des logiciels libres ont été utilisés massivement sur tout le déroulement du projet:

  • La plateforme d'hébergement s'appuie sur une architecture Linux Debian, Apache, PHP, MySQL.
  • Le CMS utilisé est ezPublish qui est un CMS industriel au même titre que Plone ou Typo3.
  • Parmi les outils on trouve l'environnement de développement Eclipse, l'inévitable Firefox accompagné de l'extension WebDevelopper.
  • Un des rares outils libres d'audit d'accessibilité: The Wave. A ma connaissance, The Wave est le seul outil libre de ce type (mais mon petit doigt me souffle que ça pourrait vite changer...).

L'utilisation des logiciels libres a permis les nécessaires adaptations au projet. De plus leur enclin naturel à respecter les standards a facilité la mise en oeuvre de l'accessibilité.

Outils d'accessibilité

En plus des outils libres déjà mentionnés, j'ai été amené à utiliser les outils suivants:

La mention de ces validateurs d'accessibilité est l'occasion de rappeler que l'accessbilité ne peut pas être validée de manière binaire, à l'opposé de la grammaire d'un langage comme le (X)HTML. Ceci s'explique par le fait que bon nombre de critères ne sont pas automatisables et nécessitent une appréciation humaine (en schématisant, ils s'agit de tous les critères contenant le mot pertinence).

Au final, les deux outils que je préfère le plus sont Ocawa (parce qu'il travaille directement sur les critères AccessiWeb) et The Wave pour son efficacité.

Conclusion

L'accessibilité étant devenue obligatoire de par le contexte législatif, elle fait désormais partie de bon nombre de cahiers de charges. Dans ce cadre, un des objectifs de Open-S est d'agir en facilitateur auprès des prestataires de services.

Une fois le projet planetarium terminé, on constate que l'accessibilité est simplement une composante à prendre en compte dans le projet au même titre que le graphisme, la sécurité ou la gestion d'un flux de publication. En ce sens, le double objectif de labellisation et d'accompagnement est pleinement atteint.