Faire un site web accessible

C'est quoi, un site accessible ?

Comme on peut s'en douter, un site web accessible, c'est un site qui peut être consulté par tous. Tous, c'est aussi bien un handicapé (visuel, moteur, auditif ou tout simplement dyslexique) que quelqu'un qui a du mal à s'habituer à la nouvelle technologie qu'est Internet (personne âgée, parents ou bien les débutants du web, tout simplement !).

Il va donc falloir concevoir votre site en vous posant la question suivante : est-ce que tous les visiteurs vont pouvoir voir mon site de la même façon ?

Pour cela, plusieurs points sont à considérer en plus des questions classiques, comme :

• mon site s'affiche-t-il correctement sur les écrans à petite résolution (800 * 600) ?
• est-ce que mon site est compatible avec tous les navigateurs et tous les systèmes d'exploitation ?

Certes, il faut que votre site réponde à ces critères mais il faut aller plus loin, beaucoup plus loin ; car ce n'est pas suffisant pour que tous vos visiteurs puissent naviguer correctement sur votre site.


Oui. Être accessible, c'est répondre aux besoins de ces personnes :

• ceux qui ne sont pas capables de voir, entendre, bouger ou qui ne peuvent pas accéder à l'information de manière classique ;
• ceux qui ont des difficultés pour lire ou comprendre un texte (on parlait tout à l'heure des dyslexiques par exemple) ;
• ceux qui ne peuvent pas utiliser de clavier ou de souris ;
• ceux qui utilisent un lecteur d'écran, un petit écran à faible résolution ou une connexion Internet lente ;
• ceux qui ne parlent pas la langue dans laquelle le document est écrit ;
• ceux qui sont dans des situations où leurs yeux, leurs oreilles ou leurs mains sont occupés (par exemple en conduisant ou en travaillant sur des chantiers bruyants) ;
• ceux qui ont un navigateur différent du vôtre, un navigateur audio par exemple, ou un système d'exploitation différent.

Traduction du guide à l'accessibilité (en) du W3C.

Toutes ces personnes ont elles aussi besoin d'accéder aux services que propose Internet et doivent donc pouvoir avoir accès à toutes les parties de votre site et y remplir les formulaires.

Ce qu'il faut donc comprendre, c'est que l'accessibilité ne concerne pas seulement les personnes handicapées comme on l'entend souvent, mais aussi toutes les personnes non habituées à cette nouvelle technologie, ou tout simplement une personne qui ne dispose pas d'un matériel classique (connexion ADSL, paramétrage du moniteur, absence de souris, etc.). Par ailleurs, les robots des moteurs de recherche sont aussi aveugles... Eh oui ! Google est aveugle.



Pour résumer, voici une citation de Roger Johansson :

Citation : Roger Johansson

Pourquoi faire un site accessible ?

Un des moyens mis en place par le W3C (World Wide Web Consortium) est le groupe de travail WAI (Web Accessibility Initiative), en charge de proposer des solutions techniques pour rendre accessible le web aux handicapés.

Dans leur présentation sur l'accessibilité du web (en), le WAI explique qu'il est important de créer des sites accessibles à tous pour que chacun puisse comprendre, naviguer et interagir avec le web. Car le web devient incontournable. On le retrouve ainsi présent dans l'éducation (inscription dans des écoles post-BAC, consulter ses notes, ...), l'emploi (recherche d'emploi, dépôt de CV, contacter une entreprise, ...), le gouvernement (déclarer ses revenus, voter, ...), le commerce (acheter des cadeaux, consulter son compte bancaire, acheter du matériel sur eBay, ...), la société (rencontrer des gens, apprendre, se cultiver, ...).

Nous avons vu précédemment pourquoi il est nécessaire de rendre son site accessible, voyons donc maintenant comment le faire.

Pour cela, je vous propose de vous poser quelques questions (certaines questions proviennent de pompage.net (fr).)

Le langage est-il facile à comprendre ?

Rendre son site accessible, c'est commencer par le normer pour qu'il puisse être interprété de manière similaire par tous les logiciels qui exécuteront vos pages (comme par exemple les nouveaux appareils connectés au web qui ne sont pas des PC). En effet, si vos scripts ne respectent pas ces normes, les navigateurs auront du mal à réorganiser votre site de la même façon que vous pensiez l'avoir fait. Au mieux, cela change l'affichage de votre page mais au pire, cela peut omettre certaines informations du site.

Pour cela, outre la nécessité de respecter la normalisation du langage utilisé, il est recommandé par le W3C de séparer la structure de la présentation (le HTML4 et (X)HTML strictes du CSS). Cette séparation a beaucoup d'avantages pour le développeur (clarté du code, modifications plus faciles du design, proposer plusieurs design pour un même site, etc.) et permet donc aux logiciels en question de distinguer les deux. De plus, le CSS a de nombreux avantages comme le support des écrans des navigateurs, celui de l'impression ou encore le support des écrans de télévisions (cf. la liste complète des propriétés CSS (en)).

Votre site est valide ? Vérifiez le grâce au validateur du W3C (en). Vérifiez aussi si votre feuille de style est valide : valider sa feuille de style (fr).

La page a-t-elle un sens sans la feuille de style ?

En séparant la structure de la présentation, on permet donc aux navigateurs de traiter indépendamment l'un de l'autre. Un bon test pour savoir si la structure de votre site est bien réalisée est de désactiver le CSS.

En procédant ainsi, vous devriez voir votre site hiérarchisé, cohérent et lisible.

Hiérarchisé, ça veut dire que les éléments les plus importants apparaissent en premier (lien vers le menu, lien vers le contenu, titre), puis les éléments secondaires (menu) suivi du contenu (articles, news, etc.) et pour finir, le pied de page (copyright, lien vers le haut de la page, etc.).

Cohérent, ça signifie que plus on va vers le bas de la page, plus la hiérarchie diminue ; donc, il serait par exemple incohérent de trouver un titre <h1> en fin de page.

Lisible enfin, ça se traduit par le positionnement du texte avec une absence totale de présentation (pas de tableau pour positionner le menu et le contenu, pas d'alignement à droite ou à gauche, etc.).

Les liens de la page sont-ils logiques ?

Dans une page web, les liens abondent. Vous êtes-vous seulement posé la question suivante : qu'est-ce qu'un lien ?

Un lien, comme son nom l'indique, c'est ce qui lie deux pages entre elles. Quand on clique dessus, c'est pour se rendre sur la page vers laquelle il pointe.

Concrètement, ça veut dire qu'il est inutile de faire un lien qui pointe vers la page actuelle (un exemple courant, c'est un lien qui envoie à la page d'accueil sur la page d'accueil !), à l'exception des ancres qui permettent quant à elles d'accéder directement à une partie de la page (menu, contenu, etc.).

Il faut aussi penser à montrer au visiteur où il est et où il a été. Un bon exemple : les liens de Google qui deviennent violets quand vous avez déjà visité le site. C'est pratique, non ? Alors pourquoi vous n'aidez pas vos visiteurs à naviguer plus efficacement sur votre site ?

Ce sont des conseils simples mais très utiles pour améliorer la navigation sur un site. N'avez-vous jamais été perdus sur un site abondant de liens menant tous à des endroits différents, finalement liés entre eux, et impossibles à retrouver lors de votre seconde visite ? Alors ne faites pas la même chose chez vous.

Utilisez-vous le texte alternatif ?

Longtemps je me suis demandé à quoi servait le texte alternatif. Peut-être vous aussi. En fait, son utilité est très importante pour les navigateurs, les robots des moteurs de recherche et les visiteurs. Autant dire que ça devrait être obligatoire de mettre un texte alternatif pour chaque image de votre site !

Ce texte est une alternative à l'image. Il est utile lorsque l'image ne s'affiche pas bien entendu, mais aussi quand le navigateur (ou le visiteur) désactive volontairement les images (connexion lente, logiciel de revue d'écran, robots...).


Pour savoir comment bien utiliser le texte alternatif, je vous propose la traduction d'un article de WebAIM (en) sur pompage.net : Bien utiliser le texte alternatif (fr).

Persiste-t-il des tableaux ?

Il faut bien comprendre qu'initialement, les tableaux ont été conçus pour présenter des données tabulaires.

Est-ce que, lorsque vous écrivez des messages ou des tutos sur le Site du Zéro, vous utilisez les tableaux pour positionner votre texte ? Ça vous paraît peut-être absurde, mais c'est ce que certains font pour leur site web ! J'avoue d'ailleurs l'avoir déjà fait.

Bref, maintenant c'est terminé et cela pour plusieurs raisons.

• Les tableaux ralentissent le chargement de la page, et utilisent donc plus la bande passante (qui est payante, soit dit en passant )
  
• Les tableaux ne sont pas pratiques pour gérer un design, comparé à ce qui est proposé par le CSS : c'est normal car ils ne sont pas faits pour ça : pourquoi faut-il utiliser des attributs comme colspan ou border="0" ? C'est dénaturer un tableau, alors autant prendre les bons outils !
  
• Ne plus utiliser les tableaux, c'est aussi garder une cohérence entre les différentes pages du site puisqu'elles seront gérées par une même feuille de style, au lieu de copier-coller des attributs de tableaux...
  
• Avez-vous déjà essayé d'imprimer une page web réalisée à coups de tableaux ? Eh bien pour éviter les dégâts, utilisez un langage qui supporte l'impression... le CSS, bien sûr !
  
• Pour finir, les tableaux ne sont pas considérés de la même façon par un moteur de recherche qui pense qu'il s'agit de tableaux de données tabulaires (grille des horaires des trains par exemple, ou prix d'un fromage dans différents supermarchés), et il a tout à fait raison ! Autrement dit, si le titre principal de votre site se trouve dans une cellule d'un tableau, les robots ne le considéreront pas comme un titre principal puisqu'il n'est pas à sa place. Sa place serait entre les balises <h1> et </h1>.
  

Alors qu'attendez-vous ? Le CSS vous tend les bras. Voici des tutos pour faire une mise en page sans tableaux (fr), pour vous aider à démarrer !

Reste-t-il des cadres (frames) ?

Les frames, ce n'est pas terrible. Pas terrible car même s'ils permettent au navigateur de ne pas avoir à recharger une partie de la page à chaque fois que le visiteur clique sur un lien interne, ils provoquent un mauvais accès à la page.

En effet, les frames ont pour conséquence que chaque page du site est représentée par une seule et même URL. C'est peut-être beau mais ce n'est pas accessible du tout.

De plus, les moteurs de recherche supportent mal les frames : ils ne peuvent donc pas référencer tout le site, et donc cela a plusieurs conséquences : une description du site non complète, non mise à jour et un mauvais lien vers le site puisque le moteur de recherche pointera vers une partie seulement de votre site (généralement la page d'accueil, celle par défaut) et non pas directement vers la recherche demandée par le visiteur.

Plus d'infos sur les frames (en).

Proposez-vous une navigation au clavier efficace ?

Proposer une navigation au clavier, c'est important pour ceux qui n'ont pas de souris, mais encore faut-il bien le faire.

Les deux moyens principaux sont l'accesskey (touches de raccourcis pour atteindre un lien sur votre site) ou le tabindex (ordonner les liens à sélectionner lorsqu'un visiteur se déplace avec la touche tab du clavier).

Le problème de tabindex c'est que même si ça parait accessible, ça ne l'est pas dans le sens où vous devriez concevoir ce problème sans avoir recours à cette astuce. Et voici un petit tuto sur l'histoire de tabindex (fr), pour expliquer tout ça !

Concernant l'accesskey, il s'agit tout simplement d'un échec car les combinaisons de raccourcis les plus simples sont déjà utilisées par le système d'exploitation. Voici un autre tuto expliquant l'échec de l'accesskey (fr).

La sémantique

Être plus accessible, c'est donc être plus compréhensible. La sémantique est là pour ça : donner au contenu de votre site un sens.

L'exemple-type, c'est lorsque vous mettez en gras un mot ou une phrase : c'est pour dire que ce que vous avez mis en gras est plus important que le reste. Vous utilisez pour cela la balise HTML <b> et </b>. Pourquoi ne pas tout simplement utiliser une balise qui dit : "ce qui est contenu entre ces deux balises est important" ? Utilisez donc la balise HTML <strong> et </strong> qui a beaucoup plus de sens que <b> et </b> puisqu'elle signifie : "ceci est important" et non pas : "ceci est gras". Important implique gras, mais gras n'implique pas forcement important !

En procédant ainsi, vous donnez un sens à ce qui est entre les deux balises et vous faites ainsi une distinction encore plus forte entre le contenu et sa forme.

Voici un article sur la sémantique (fr) de Openweb qui convaincra les plus réticents d'entre vous.

Pour plus d'info, vous pouvez aussi consulter le tuto abordant aussi la sémantique de neoxx78.

Transformer son site inaccessible en un site accessible !

C'est un travail qui peut demander beaucoup de temps si l'on s'y prend mal. Avant de modifier quoi que ce soit de son site, il faut avoir bien compris ce qu'est l'accessibilité : ainsi, les modifications seront efficaces et ça vous évitera de recommencer à chaque fois. Posez-vous bien les quelques questions abordées ci-dessus et voyez comment résoudre chacune d'entre elles.

Vos modifications seront efficaces à long terme, par exemple si les technologies des navigateurs ont changé ou s'il existe une législation qui le demande.

De toute façon, rien ne sera inutile puisque le web va de plus en plus dans ce sens ; alors autant prendre de l'avance et montrer l'exemple.

Conclusion

Rendre son site accessible n'est pas compliqué lorsque vous avez réellement compris la logique et les enjeux de l'accessibilité des sites. Un avantage non négligeable c'est qu'en respectant toutes ces règles, les moteurs de recherche arriveront à lire le contenu de votre site (textes, images, liens) beaucoup plus facilement !

Dans la dernière partie de ce tuto, je vous propose quelques liens vers d'autres sites qui parlent d'accessibilité. J'essaye aussi de vous donner mon avis sur le contenu proposé par ces sites.

• Introduction à l'accessibilité (fr)
  Un bon moyen pour comprendre l'accessibilité à partir de la base : quels sont les moyens utilisés par des personnes handicapées pour accéder au web ? Qui est en charge de sensibiliser les webmasters et leurs clients à rendre leurs sites accessibles ? Et enfin, quelle est l'importance de l'accessibilité ?
  
• Traduction : Mythes et Idées fausses sur l'accessibilité (fr)
  Traduction d'un article de Roger Johansson sur les fausses idées qu'on a sur l'accessibilité. Un article intéressant pour se rendre compte de l'importance de l'accessibilité à travers le web. Vous trouverez en plus d'autres ressources sur l'accessibilité en fin de page. Bonne lecture.
  
• 10 raisons expliquant pourquoi les clients n?ont que faire de l?accessibilité (fr)
  Tout est dans le titre : malgré l'importance de l'accessibilité, beaucoup de personnes n'en ont rien à faire, à commencer par de grosses entreprises. Pourquoi ?
  
• Comment l'accessibilité d'un site web peut améliorer son référencement ? (fr)
  Un article du JourDuNet (fr) montrant comment rendre son site accessible permet un meilleur référencement. Être accessible, c'est aussi être accessible (i.e. bien référencé) par les moteurs de recherche. C'est là que ce mot tant employé prend tout son sens !
  
• Les types de media CSS (fr)
  J'ai dit que le CSS supportait l'impression, alors pour mieux comprendre le pourquoi du comment, voici un article de Laurent Denis expliquant l'utilisation des medias (écrans, tv, imprimantes, etc.) via CSS.