Référencement, Design et Cie

A lire sur Pouipoui Design, une traduction en français d'un article de Roger Johansson démontant les idées fausses les plus répandues sur l'accessibilité web : l'accessibilité ne concerne que les aveugles, les sites accessibles sont moches, l'accessibilité coûte cher, une version texte suffit...

Je ne peux m'empêcher de rapprocher cet article de "pourquoi les clients se fichent de l'accessibilité", ainsi que de "accessibilité: l'heure de l'auto-critique a-t-elle sonnée ?" par Matthieu Faure.

Un nouveau plugin est né pour les utilisateurs de Dotclear soucieux de l'accessibilité de leur blog : KiwiAccess permet ainsi d'automatiser la vérification de la longueur des liens, des titres, des attributs title et alt, ainsi que l'unicité des titres des billets.

Ce plugin est le fruit du travail conjoint de Matthieu Faure, Sébastien Delorme et Jérôme Mulsant.

Les directives d'accessibilité au contenus web au point de contrôle 14.1 recommandent d'utiliser le langage le plus clair et le plus simple possible, tout en étant adapté au contenu du site.

Mais juger objectivement la lisibilité d'un écrit n'est pas chose facile : ce qui est lisible pour une personne ne l'est pas forcément pour une autre. C'est pourquoi des méthodes algorithmiques ont été développées pour permettre d'estimer (grossièrement) la lisibilité d'un texte.

L'indice Gunning Fog, du nom de son inventeur Robert Gunning, est une des méthodes les plus connues : pour l'obtenir, Il suffit simplement d'additionner le pourcentage de mots de plus de trois syllabes et le nombre moyen de mots par phrase, puis de multiplier ce résultat par 0.4 (ou plus simplement d'utiliser un outil comme Textalyzer). L'indice obtenu est censé correspondre au nombre nécessaire d'années de scolarité pour lire le texte. Un indice élevé sera donc le signe d'un texte plus difficile d'accès.

Mais plus que la valeur absolue de l'indice, c'est la valeur relative de cet indice qui est intéressante. Voici donc les résultats d'une étude (inspirée de celle de Philip Chalmers) montrant les indices Gunning Fog pour différents types d'écrits francophones :

Gunning Fog	Type d'écrit
8-9	Littérature junior et ado, Paris Match, Elle
10-11	Télérama, Libération
14-15	Marcel Proust, Le Monde Diplomatique, L'Express
16-17	Rapports parlementaires
17-18	Article universitaire d'Olivier Ertzscheid
22 et plus	Directives européennes

L'indice moyen des articles de ce blog tourne autour de 11 (10.5 pour ce billet), un indice comparable à ceux de magazines comme Télérama ou Libération, des lectures accessibles au plus grand nombre. Je considère que cet valeur est satisfaisante : il ne s'agit pas de produire un texte le plus simple possible (et donc avec un indice faible), mais de produire le texte le plus efficace possible en fonction de son auditoire, en éliminant les complications superflues. Et vous, quel est votre indice ?

Note méthodologique : J'ai utilisé pour établir ces indices des échantillons de texte d'au minimum 100 mots (250 en général), débarassés des titres et de tout ce qui pouvait "polluer" les résultats : liens de navigation, légendes, notes etc. Pour les textes courts, une moyenne a été faite sur environ 7 articles choisis aléatoirement. Pour les textes longs, comme Proust (Du coté de chez Swann), la moyenne a été faite sur 7 passages aléatoires. C'est très empirique je l'avoue, et je laisse le soin au professeur Veronis de me corriger ou d'ajouter tout précision qui lui semblerait utile ;)

A lire sur Pompage, la traduction d'un article de Roger Johansson sur l'évaluation de l'accessibilité des sites web.

Initialement publié sur 456 Berea Street, cet article fait partie d'une trilogie, dont les traductions devraient arriver prochainement. A suivre...

Edit du 17/10 : la seconde partie de la série est en ligne.

L'accessibilité, longtemps négligée, commence à avoir le vent en poupe : on vante ses avantages en matière d'interropérabilité, de référencement, de réduction des coûts... en oubliant parfois de mentionner que les directives d'accessibilité (les WCAG) visent avant tout les personnes handicapées, comme le rappelle judicieusement Catherine Roy dans un commentaire qui m'a interpellé.

L'accessibilité n'est pas équivalentes à la notion de "Web pour tous", même si elle y participe. Le texte d'introduction des WCAG le précise bien : "ces recommandations expliquent comment rendre les contenus web accessibles aux personnes handicapée (...) Le but premier des ces recommandations est de promouvoir l'accessibilité. Toutefois, le fait de suivre ces recommandations rendra également le web plus simple d'accès pour tous les utilisateurs". Les WCAG visent donc un public spécifique.

Même chose concernant le référencement et l'accessibilité : si de nombreuses recommandations des WCAG favorisent un bon référencement, ce n'est pas le but initial des WCAG, et un certain nombre de recommandations n'ont rien à voir avec le référencement ou l'interropérabilité, ce qui montre bien qu'elles sont destinées en priorité à des utilisateurs particuliers.

Il y a bien une convergence entre accessibilité, interroperabilité, et même référencement, on pourrait dire une certaine "transversalité". Mais chacune de ces disciplines poursuit des buts qui lui sont propres, tout en s'inscrivant dans le cadre plus général de l'accès pour tous.

Ce billet poursuit la série sur les rapports entre les recommandations Accessiweb et le référencement :

Critère 9.1 : Est-ce que la structuration de l'information est cohérente par rapport au contexte général du site ?

La structuration de l'information est nécessaire à la bonne compréhension par les utilisateurs de celle-ci. Elle peut également être un atout pour les moteurs. Un contenu bien structuré, utilisant un langage simple et clair, des titres informatifs, faisant bon usage des techniques de "front loading" aura tendance à être naturellement optimisé pour les moteurs.

Critère 9.2 : La page web est-elle structurée de manière cohérente ?

Le code HTML comporte un certain nombre de balises dites "sémantiques" car porteuses de sens : <h1> à <h6> pour les titres, <p> pour les paragraphes, <em> et <strong> pour les emphases, <ul> et <ol> pour les listes, etc. Ces balises sont prises en compte par les navigateurs, ainsi que par les aides à la navigation, mais sont également prises en compte par les moteurs. Les mots-clés présents dans un titre balisé comme tel se verront par exemple reconnaître un poids plus fort que si ce titre avait balisé avec un simple <div>, balise qui n'est pas porteuse de sens.

Critère 9.3 : Y a-t-il un plan du site ?

Le plan du site favorise l'accès à l'information pour les utilisateurs comme pour les moteurs, en fournissant des liens directs vers les pages profondes du site. Le plan améliore donc l'indexabilité du site, et participe à la redistribution du PageRank.

Critère 10.1 : Le contenu de la page est-il séparé de sa présentation ?

La séparation du contenu et de la présentation force à écrire un code HTML propre et des contenus bien structurés au lieu de produire une "soupe de tags" où les balises sont choisies pour leur rendu plutôt que pour leur signification, ce qui est plutôt bon pour les moteurs de recherche. Le code s'en trouve également allégé, ce qui pour certaines pages lourdes permet de voir davantage de contenu indexé.

Critère 10.2 : Avec les feuilles de style désactivées, l'information est-elle toujours présente ?

Tout comme le critère 10.1, la non-dépendance aux feuilles de style force à créer des contenus logiquement et sémantiquement structurés, ce qui reste un avantage du point de vue de l'accessibilité comme du référencement.

Critère 11.2 : Les textes associés aux champs de formulaires donnent-ils leur fonction exacte ?

Des intitulé explicites sont un avantage du point de vue de l'usabilité comme du référencement puisque ceux-ci auront une tendance naturelle à contenir des mots-clés.

Critère 12.3 : Existent-ils des barres de navigation qui facilitent l'accès pour la navigation interne dans le site ?

Les barres de navigation ou "chemins de fers", en plus de permettre un repérage et une navigation faciles au sein d'un site participent également à son référencement, en fournissant des liens aux robots d'indexation, et en comportant des mots-clés explicites, par exemple "Catalogue > Habillement > Homme > Chemises".

Critère 13.2 : "Si une redirection automatique est présente, s'effectue-t-elle sans l'intermédiaire d'un script ?"

Il est parfois nécessaire de rediriger automatiquement un utilisateur. Plusieurs solutions techniques existent, que ce soit au niveau serveur, par une balise meta refresh, ou par javascript. Les redirections à base de javascript posent problème : le navigateur utilisé peut ne pas interpréter javascript, et les moteurs ne l'interprètent de toute façon pas. Les balises meta refresh sont très peu appréciées des moteurs. Les redirection serveurs sont donc préférables à tout point de vue, avec s'il s'agit d'une redirection permanente une redirection de type 301, et s'il s'agit d'une redirection temporaire une redirection de type 302.

Critère 13.4 : "Y a-t-il une alternative équivalente au script qui déclenche l'ouverture de nouvelles fenêtres ? "

Il est parfaitement possible de créer des popups accessibles aux utilisateurs et aux moteurs, en utilisant des liens href "enrichis" d'un évènement onclick. Le contenu de la page en popup sera ainsi référencé.

Critère 13.6 : "Lorsqu'un fichier peut être téléchargé, y a-t-il des formats alternatifs équivalents ?"

Si les moteurs indexent une variété de plus en plus grande de fichiers, tous les formats ne leur sont pas accessibles. Et dans le cas où le format leur est accessible, comme le PDF, il n'est pas forcément souhaitable que l'utilisateur accède directement au document hors du contexte du site. On a donc tout intérêt à proposer ce type de contenus également dans une version HTML quand cela est possible, ce qui augmentera le potentiel de visibilité du site.

Critère 13.8 : "La présentation de la page est-elle réalisée sans détourner certaines balises de leur fonction d'origine ?"

Comme évoqué pour les critère 9.2 et 10.1, les balises HTML ne devraient être utilisée que pour leur signification et non pour leur rendu. Respecter la fonction d'origine des balises assure non seulement une meilleure accessibilité des contenus web, mais également un traitement optimal de ces contenus par les moteurs de recherche.

Voila qui clôt cette série de trois billets consacrée aux points de contact entre critères Accessiweb et référencement. J'espère que cette trilogie aura permis de faire comprendre que si les deux disciplines ne servent pas exactement les même objectifs, celles-ci affichent quand même une similarité dans la méthode, et convergent sur de nombreux points.

Suite de mon billet d'hier sur les rapports entre les recommandations Accessiweb et le référencement :

Critère 2.3 : Y a t-il une balise NOFRAME ?

Disons-le tout de suite : utiliser des frames (cadres) est une très mauvaise idée tant au niveau de l'ergonomie que du référencement. Si toutefois on persiste à les utiliser, la balise noframe permet de fournir aux moteurs de recherche un contenu alternatif qui sera indexé.

Critère 2.4 : Le contenu de la balise NOFRAME est-il pertinent ?

Un frameset ne comprenant souvent aucun contenu propre, une balise noframe correctement renseignée devrait comprendre un paragraphe décrivant globalement le contenu du site, un texte expliquant que le site utilise normalement les frames, et une liste de liens vers les différentes pages du site.

Critère 4.1 : Est-il possible de récupérer les informations fournies dans les supports multimédias d'une autre manière ?

Les moteurs de recherche web ne savent lire ni les vidéos, ni les fichiers audio. Comme pour les images (critère 1.1), il faut donc fournir un équivalent textuel à ces fichiers. Selon le contexte, il pourra s'agir d'un transcript ou d'une description du contenu multimedia. Ces contenus textes comprendront naturellement des mots-clés pertinents, qui amélioreront la trouvabilité des éléments multimédias et du site en général.

Critère 5.6 : Dans un tableau de mise en forme, le contenu est-il correctement ordonné ?

Le contenu situé haut dans le code a tendance à se voir accorder une importance plus grande par les moteurs. Or certaines mises en page à base de tableaux font que le contenu se situe dans le code après des éléments plus accessoires pour le référencement, comme des éléments de navigation. Il faut donc veiller à une utilisation judicieuse des tableaux de mise en page, et limiter le recours aux tableaux imbriqués, qui ont tendance à destructurer l'information. Mieux encore : passez à une mise en page intégralement gérée par CSS.

Critère 6.1 : L'intitulé des liens fait-il moins de 80 caractères ?

Des intitulé de liens relativement courts favorisent l'accessibilité mais forcent également à rédiger des liens à la fois denses et pertinents, chose appréciée par les moteurs.

Critère 6.2 : Les liens sont-ils explicites ?

Les moteurs tiennent fortement compte des intitulés des liens pointant vers une page pour juger de la pertinence de cette page. Des liens explicites aident donc au positionnement, du fait des mots-clés qu'ils contiennent. Si vous vendez des vêtements en ligne par exemple, préférez "Notre catalogue de vêtements" à "Produits".

Critère 6.5 : Chaque intitulé de lien identique amène t-il vers la même destination ?

Cette recommandation participe aux liens explicites évoqués plus haut, et aide encore davantage à positionner la page liée sur les mots-clés présents dans l'intitulé du lien.

Critère 6.7 : Y a-t-il moins de 40 liens actifs dans la page, hors liens nécessaires à la navigation ?

Un nombre réduit de liens sur une page a tendance à augmenter la quantité de PageRank transférée à chacune des pages liées, ce qui favorise le référencement. Attention cependant, il ne faudrait pas tomber dans le travers qui serait de construire son site autour du PageRank : d'une part le site doit être pensé pour l'utilisateur en priorité (tout en tenant compte de référencement), d'autre part des liens nombreux aident les moteurs à indexer le site en profondeur.

Critère 7.1 : Si un script nécessite une alternative pour être accessible, l'information donnée par cette alternative est-elle équivalente à l'information fournie par le script ?

Javascript n'étant pas interprété par les moteurs, toute information affichée par un script ne sera pas lue par les moteurs de recherche. Une version alternative accessible (en HTML) de cette information garantie que celle-ci sera bien indexée.

Critères 7.2 : Des actions peuvent-elles être accomplies même si le périphérique pour lequel elles sont prévues est désactivé ?

La non-dépendance aux périphériques (souris, clavier, écran...) renforce l'indexabilité de la page par les moteurs : un moteur sait interpréter un lien href, mais ne va pas cliquer, et il ne dispose pas non plus d'écran.

Critère 8.2 : L'attribut LANG est-il présent au début du code source de la page pour identifier clairement la langue utilisée ?

Cet attribut en spécifiant la langue d'une page peut l'aider à se positionner pour les requêtes restreintes à une langue donnée. Il est aussi probable que cet attribut soit utilisé à des fins sémantiques, pour une analyse plus fine des contenus.

Critère 8.3 : Des éléments de description de la page sont-ils présentes en début de code source ?

Les balises meta description et meta keywords apportent des informations utiles aux moteurs puisque porteuses de sens. Le charset permet un affichage correct du titre des pages et de leur description dans les pages de résultats des moteurs de recherche. Ces éléments participent donc à la bonne prise en compte de vos pages par les moteurs.

Critère 8.5 : Le contenu de la balise TITLE est-il explicite ?

La balise <title> est pour les moteurs de recherche un des critères les plus importants pour juger de la pertinence d'une page. La balise <title> doit décrire précisément l'objet de la page dans un langage à la fois clair et riche en expressions-clés.

Critère 8.6 : Le contenu de la balise TITLE est-il différent d'une page à l'autre ?

Le point 8.5 prévoyant un <title> explicite, chaque page du site devrait donc posséder un <title> qui lui est propre. Cette diversité de titres augmentera de façon significative les possibilités de positionnement dans les moteurs de recherche, du fait de la variété des mots-clés y figurant.

Accéder à la troisième partie de l'article

Comme le laissait pressentir mon dernier billet, je vous propose d'étudier en détail dans une série de billets les 36 critères Accessiweb ayant une relation directe avec le référencement. Il ne s'agit pas de voir l'accessibilité sous le seul angle du référencement : l'accessibilité s'adresse avant tout aux utilisateurs, et c'est là son objectif principal. L'objet de cet étude est davantage de mettre en évidence la convergence dans la méthode entre les deux démarches, les moteurs de recherche pouvant être vus comme des utilisateurs particuliers, avec des handicaps technologiques.

Critère 1.1 : Chaque élément graphique possède-t-il une alternative textuelle ?

Les moteurs sont avant tout des machines à indexer du texte, et sont incapables de lire le contenu d'une image. Les attributs alt permettent de fournir un contenu texte alternatif aux éléments graphiques, pour les utilisateurs comme pour les moteurs.

Critère 1.2 : Pour chacune des images de la page ayant une alternative, les textes dans l'attribut ALT sont-ils appropriés par rapport au contexte dans lequel l'image se trouve ?

Le référencement vise à favoriser l'accessibilité à l'information. On pourrait aussi parler de"trouvabilité". L'information convoyée par l'image peut varier selon le contexte, et l'image peut dans certain cas ne convoyer aucune information : c'est le cas des images purement décoratives. Un attribut Alt non pertinent constituerait autant de bruit supplémentaire pour les moteurs. L'attribut Alt doit donc être adapté afin d'augmenter le rapport signal/bruit des pages.

Critère 1.4 : Pour chacune des images de la page, les textes dans l'attribut ALT font-ils moins de 60 caractères ?

L'objectif de cette recommandation est purement ergonomique. Toutefois, un des bénéfices de sa mise en oeuvre concerne le référencement, puisque elle force à décrire le contenu en un minimum de mots-clés, ce qui favorise la trouvabilité du site (et de l'image) sur ces mot-clés.

Critère 1.5 : Les commentaires associés à chacune des zones réactives d'une image map sont-ils pertinents ?

L'information graphique convoyée par une image map peut être textuelle, elle peut aussi être abstraite ou symbolique. Des attributs alt décrivant précisément chaque zone permettent aux moteurs de se faire une idée du contenu de la page contenant l'image map et des pages liées.

Critère 1.8 : Pour chacune des images texte de la page, le contenu de son alternative est-il au moins équivalent au texte inscrit dans l'image ?

Comme expliqué pour le critère 1.1, les moteurs étant incapables de lire les images, l'attribut alt doit au minimum reprendre le texte de l'image, en le précisant éventuellement. Par exemple pour une image sur un site de vêtements affichant "catalogue", utiliser comme attribut alt "notre catalogue de vêtements" ce qui favorise le référencement et la compréhension du lien vu ou entendu hors de son contexte visuel normal.

Critère 1.9 : Il convient de remplacer un texte sous forme d'image par un texte mis en forme. Cette règle est-elle respectée ?

Si les attributs alt permettent de fournir une alternative textuelle aux images, il est préférable pour les utilisateurs comme pour les moteurs d'utiliser du texte mis en forme via CSS : ce texte sera plus facilement manipulable par les utilisateurs et mieux pris en compte par les moteurs.

Critère 1.10 : Quand une image nécessite une description détaillée, un commentaire texte lui est-il associé ?

L'attribut alt est parfois insuffisant pour décrire une image qui demande une explication plus détaillée. En lui adjoignant un commentaire texte, vous fournissez davantage de contenu riche en mots-clés aux moteurs, ce qui améliore encore la trouvabilité du site. Du point de vue du référencement, le texte dans la page est cependant préférable à l'attribut longdesc.

Critère 1.11 : Si une description détaillée de l'image est présente, son contenu est-il pertinent ?

La description de l'image se doit d'être précise : qu'est-ce qui est représenté ? Quelle est l'idée transmise ? les différents éléments affichés ? En répondant à ces questions, vous écrirez naturellement un texte riche en mots-clés, et donc bénéfique pour votre référencement.

Critère 1.12 : Pour chacune des images liens, le texte contenu dans l'attribut ALT donne-t-il la fonction du lien ?

Les moteurs de recherche prennent en compte les intitulés des liens pointant vers une page pour juger de la pertinence de cette page par rapport à un mot-clé donné. C'est pourquoi il est important que les liens sous forme d'images soient dotés d'un attribut alt décrivant le contenu de la page liée.

Accéder à la seconde partie et à la troisième partie de l'article.