Studio
de développement web

Accessibilité ? Mais lol quoi !

La question est de moi, la réponse est de … je crois qu’il vaut mieux taire son nom ! La question était sincère et la réponse tout autant. En général quand on me demande mon avis sur un nouveau projet web top moumouth qui vient de sortir, ah ! c’est plus fort que moi il faut que je fasse un audit ! Qualité du code (HTML/CSS/JS), petit test de performance et mon petit test préféré : une consultation du site en mode texte. L’idée peut paraître saugrenue ou même carrément … lol ? Et pourtant ça n’a que des avantages.

« En mode texte ?! T’abuses Fab » …

Je ne sais pas mais ce doit être le vocabulaire qui dérange, je pense que si je remplaçais ces termes par « je test le site comme un robot Google » mes interlocuteurs seraient plus attentif. D’ailleurs pour vous inciter à continuer à lire ce billet vous allez entendre parler de stratégie digitale, de référencement naturel, de bonnes pratiques SEO, de partage de contenu mais aussi de performance, de mobile, d’expérience utilisateur… et j’en oublie !

Tout ça juste en partant d’un simple test d’un site en mode texte ? Tu m’intéresses là.

Travailler sur un projet web est belle aventure … tout du moins pendant la phase dite « phase Bisounours« . C’est la partie où se mêlent les grandes idées, les conceptions graphiques hyper créatives, la toute dernière techno web qu’il FAUT utiliser pour prétendre à un petit « award » à mettre en pied de page … Cette phase prend fin quand le client s’en mêle (quelle idée aussi !) et qu’il demande des résultats (en réalité cette phase est beaucoup plus courte, mais allons à l’essentiel).

A un moment, tôt ou tard, vous devez rendre des comptes sur l’efficacité du projet. Rendre compte à votre client parce que vous lui avez vendu un site qui boosterait son chiffre d’affaire, mais aussi rendre des comptes à vous-même et à l’équipe en charge du projet. C’est essentiel. Il y a les engagements contractuels que vous pourriez avoir pris avec votre client.  Et pour peu que vous aimiez votre métier, il n’est pas concevable de pouvoir conserver une dynamique d’entreprise quand vous savez que personne n’a d’intérêt pour votre travail !

Il y a donc forcément un moment dans le processus de réalisation du projet où vous devez vérifier comment les moteurs de recherche vont « voir » le site.

Tester son site en mode texte : le référencement

Les moteurs de recherche, pour référencer les sites, envoient des petits robots pas très très malins il faut le dire. Ils ne savent pas lire le JavaScript, n’interprètent pas les styles CSS et comble de tout, ne font même pas la différence entre un texte en image et un texte « texte ». Finalement, ils lisent un peu une page web comme nous pourrions le faire si nous consultions les sites web en mode texte : pas d’images, pas de JavaScript, pas de CSS (mise en page).

Les préconisations de Google sont d’ailleurs claires :

Pour vérifier le fonctionnement de votre site, utilisez un navigateur texte tel que Lynx. La plupart des robots d’indexation de moteur de recherche visualisent en effet votre site de la même manière que Lynx. Si certaines fonctionnalités (JavaScript, cookies, ID de session, cadres, balises DHTML ou contenus Flash) vous empêchent d’afficher la totalité de votre site dans un navigateur texte, il est possible que les robots rencontrent des difficultés similaires lors de leur exploration.

Pour ma part, je vous conseille de faire comme moi, c’est plus simple : testez le site via Html2Text, un service en ligne fourni par le W3C. Le rendu est sensiblement similaire à une vue sous Lynx et c’est vraiment plus simple !

Petit test :

Capture d'écran ou l'on voit mon site en mode texte

Nous pouvons voir sur la capture ci-contre, la page « qui suis-je » de mon site. On y voit l’essentiel, la page tel que la voit les robots d’indexation des moteurs de recherche !

J’ai ajouté 2 petites annotations pour mettre en avant des liens de la page. Certaines portions de textes étant des liens, on peut voir les liens complets directement dans la page … et c’est ainsi que les robots parcourent l’ensemble du site.

C’est à ce stade que l’on se rend compte de l’importance qu’il y a à renseigner les attributs « alt » et/ou « title » des liens et des images. Essayez de retrouver en mode texte une image sans ces attributs. Peine perdue, elle n’apparaitra même pas dans la page ! Tout cela plus les soucis potentiels de contenus générés en JavaScript, Iframe, Flash et j’en passe, vous rendez-vous compte des informations perdus pour le moteurs de recherche ?!

Concernant mon exemple ci-dessus, mon site étant très light c’est presque agréable à lire en mode texte, testez quelques sites célèbres et je ne peux que vous souhaiter bon courage pour l’analyse ! En effet la « philosophie » du « Mobile first » (le « pensez mobile en premier ») n’étant pas une généralité (loin s’en faut !) les pages web sont bien trop lourdes, indigestes et finalement illisibles dans la majorité des cas.

L’expérience utilisateur et le « Mobile first »

Comme nous l’avons vu précédemment, la plupart des sites sont quasiment indéchiffrables en mode textes. Ce qui soulève un point particulier. Si une page web doit être très dense en informations (formulaires, menus, diaporamas, pubs, carrousels, textes,…), il est indispensable d’avoir un design et une ergonomie parfaitement pensée pour satisfaire la majorité des utilisateurs du site et éviter de les perdre en quelques secondes.

Si la page est illisible en mode textes, soyez persuadé qu’il y a forcément des problèmes d’ergonomie dans son mode « complet ».

Il est vrai que généralement un site web est pensé, imaginé par un groupe de quelques personnes pour potentiellement quelques milliards. En essayant de toucher « la masse » vous ou plus souvent, votre client, aurez toujours tendance à trop en mettre. « Ces 10 blocs doivent absolument être en page d’accueil ». La zone utile, communément admise, de 1024px de large offre beaucoup d’espace. L’expérience utilisateur peut rapidement devenir un vrai cauchemar.

La philosophie du « Mobile First », comme vous l’aurez deviné, consiste à démarrer un projet web en le pensant d’abord pour un écran d’appareil mobile (smartphone, tablette). A mon sens, le meilleur argument que présente ce concept est que nous avons besoin de penser chaque bloc de contenu d’une page, de la façon dont il doit fonctionner et réagir. En effet en partant sur un minimum de 320px de large, chaque pixels compte et nous oblige à des trésors d’inventivités pour offrir une bonne expérience utilisateur. Nous devons penser « simple« , « riche« , « ergonomique« .

Je vous invite à lire le livre de Luke WROBLEWSKI, « Mobile first ». Les études de cas sont très intéressantes et c’est une excellente initiation à cette « philosophie ». Mais au-delà même de cette notion « Mobile first », ce que vous découvrirez dans ce livre c’est tout simplement que vous devez absolument penser aux mobiles dès maintenant, les chiffres présentés sauront vous convaincre !

Pensez « Mobile first » et la consultation de votre site en mode texte n’en sera que plus cohérente. La lecture en mode texte et sur mobile est un peu similaire : linéaire, du haut vers le bas.

Elevons-nous

Je vous ai parlé de deux notions essentielles sur le web, le référencement et l’expérience utilisateur(ou ergonomie avancée). Nous avons vu qu’un simple test d’un site web en mode texte suffit pour mettre le doigt sur un certain nombre de problèmes potentiels, en systématisant ce type de test, vous acquerrez de quoi développer des argumentaires solides pour cadrer vos clients.

En outre, dans la stratégie digitale que vous proposez à vos clients/prospects une part importante de celle-ci s’appuie sur des principes techniques, en effet comment argumenter sur le référencement (naturelle et/ou payant) sans parler de sémantique HTML, des microformats/micro data, de sites adaptatifs, de performance, de cdn, etc… Voilà d’excellentes raisons pour vous inciter à regarder au-delà du rendu visuel de vos projets.

Conclusion

J’avoue, le titre de ce billet est quelque peu … racoleur, trollesque, et je l’avoue mon objectif était de parler … d’accessibilité ! Oui, en suivant ces quelques recommandations, vous rendrez votre projet web plus accessible. Bien évidement il y a encore du travail pour avoir un site conforme aux différents référentiels d’accessibilités mais allons-y doucement et fixons nous des objectifs … accessibles !

J’ai bon espoir que ce billet attirera ceux qui n’y attachent pas d’importance et leur fera voir que d’une certaine façon l’accessibilité n’est qu’une question de bon sens.

Quand à moi, sachez que je ne suis pas expert en accessibilité, et je sais pourquoi : aucune ligne « optimisation accessibilité » dans les devis. Alors quand les lignes « webmarketing » et/ou « référencement » sont tout en haut, j’y vois tout de même une référence à l’accessibilité et de bonnes raisons de mettre en pratique les règles de bases de l’accessibilité.

J’espère pouvoir continuer la discussion dans les commentaires ci-dessous ;)

10 thoughts on “Accessibilité ? Mais lol quoi !

  1. Nico

    Pour certains clients qui écoutent (enfin, surtout l’argument « Google voit comme ça ») : j’utilise soit une CSS alternative vide sur mon site perso (un click, c’est pratique), ou alors le combo « Désactiver les images » et « Désactiver les CSS » (dans cet ordre) avec la webdevelopper toolbar sur leur site chéri.

    L’effet est garanti en effet.

    Quand à dire que l’accessibilité, c’est du bon sens… oui et non.

    Je comprends ce que tu dis : aller chercher la solution la plus naturelle en général, ça aide bien à l’accessibilité (bref, utiliser des balises à bon escient).

    Ceci dit : rien n’est plus évident… que quand on le sait déjà : je ne suis pas daltonien, je ne sais pas qu’il y en a plusieurs sortes, je peux pas le deviner si on ne me le dit pas. :)

    Répondre
    1. fabien De

      Il est vrai que c’est très général, mais c’est le but, je tente de sensibiliser sur le sujet de manière détournée. Avec le secret espoir que cela donne envie d’aller plus loin.
      Sinon, pour le mode « bot Google view » l’avantage avec htmltotext c’est que ça permet de partager plus facilement (pas besoin d’avoir webdevelopper d’installé)

      Répondre
  2. William

    J’aime beaucoup cette approche, et je pense que l’accessibilité gagne à être oubliée en tant que contrainte. D’ailleurs, elle gagnerait à être oubliée tout simple… Elle devrait juste être intégré par défaut dans le projet dans sa globalité, sans forcément en parler ou juste en rappelant qu’il s’agit de contraintes de « qualité »…C’est plus vendeur.

    Je suis parfois étonné de voir les efforts financiers que peuvent faire certains clients pour avoir un site « Responsive », alors que quand on leur parle d’accessibilité : « Ho ça on verra plus tard, c’est pas ma cible »… « Mais si mon bon Monsieur, ça l’est, mais vous ne le savez pas encore ».

    En tout cas merci pour le HTML2Text, j’ai honte de l’avouer, mais je ne connaissais pas :)

    Répondre
  3. fabien De

    Je suis complètement d’accord sur l’idée de considérer l’accessibilité comme faisant partie intégrante de notre travail sans devoir la justifier. Mais il est vrai aussi qu’être conforme à, ne serait-ce que 70% ou 80% au RGAA par exemple, demande tout de même du travail. Au moins autant à nous qu’au client (pour les contenus).

    Tu l’auras remarqué, je profite du bouleversement lié au mobile pour tenter de recentrer notre métier sur l’essentiel : l’efficacité, pour tous.

    Une manière d’aborder l’accessibilité de manière décomplexé, comme nous l’incite Elie Sloïm ou Laurent Denis entre autre.

    Merci pour la participation sur le sujet en tout cas :)

    Répondre
  4. Christophe BENOIT

    Google même s’il conseille d’avoir un site lisible en mode texte seul sait désormais interpréter en partie le JS, lire les CSS et « voir » les grands blocs presque comme un humain. Cela lui permet de mieux comprendre les pages, de dézinguer une partie de ceux qui sur-référencent et de mieux suivre l’affichage de ses pubs (attention au matraquage de pubs au dessus du fold).

    Répondre
  5. Olivier Nourry (@OlivierNourry)

    J’aime bien le ton rigolo de l’article, et le titre m’a suffisamment accroché pour que je le lise (et le tweete, un peu à regret avec le recul), chose que je n’aurais sans doute pas faite sinon, car, oui, j’avoue, je suis un obsessionnel de l’accessibilité. J’en ai même fait mon métier, dis donc ! C’est pourquoi je me permets d’intervenir sur cet article pour établir ou rétablir un certain nombre de faits.
    Tu précises que tu n’es pas expert en accessibilité. Ça tombe bien, car du coup je me sens autorisé à prévenir tes lecteurs : si vous ignorez ce qu’est l’accessibilité, ou n’en avez qu’une très vague idée : ne considérez pas cet article comme une ressource qui vous mettra sur les bons rails. Je le dis sans méchanceté ni animosité aucune. Encore une fois je le trouve très sympathique sur la forme. Mais sur le fond il y a des points qu’il est important de corriger, sous peine de voir saper les efforts entrepris depuis des années par la communauté. Y compris par les gens que tu cites hors contexte, et dont le message se trouve déformé.
    D’abord, il est toujours instructif de visualiser un site en mode texte. Oui. Mais tout ce que ça indique, c’est une plus ou moins bonne structure sémantique. Ni plus, ni moins. Si notre travail s’arrêtait là, bon sang, ce que la vie serait simple ! Mais bien entendu, ce n’est pas le cas (tu le précises, mais c’est un peu trop petit en proportion du reste, je tente donc de rétablir l’équilibre). En tous cas pour l’accessibilité, c’est un test tellement mineur qu’en fait on ne prend plus la peine de le faire depuis longtemps, au profit d’une visu sans CSS comme le mentionne Nicolas. Sans être un expert en référencement ;-) j’émets aussi un doute sur le fait que ce soit un test si pertinent que ça pour le SEO. On va détecter les gros soucis, mais la tambouille de Google et consorts est suffisamment mystérieuse et complexe pour que des gens se fassent payer pour lire dans le marc de leur café. Mais je m’égare.
    Ce n’est pas (plus) un test que l’on fait, aussi parce que depuis 1999 (parution des premières recos d’accessibilité du W3C) on a pas mal évolué. Tant dans la compréhension des besoins des utilisateurs en situation de handicap, que des capacités des navigateurs et des technologies d’assistance. « Détail » gênant : à aucun moment tu ne mentionnes l’un de ces 3 piliers de l’accessibilité. Faire un article titré « accessibilité quelque chose » en faisant l’impasse là-dessus, relève soit de l’exploit, soit du contresens total.
    Fort heureusement, on a évolué, écrivais-je donc, et aujourd’hui aucun praticien sérieux ne peut prétendre se fier à une lecture sous Lynx pour rendre compte de la satisfaction ou non des besoins utilisateurs. Les lecteurs d’écran sont des machins extrêmement sophistiqués qui, bien alimentés, savent interpréter de l’Ajax, du Flash, du Silverlight, du contenu multimédia, et toutes ces choses dont on a trop longtemps dit qu’elles étaient interdites aux non-voyants. On a même aujourd’hui les specs, les navigateurs et les technos d’assistance qui nous permettent de faire de l’interface riche qui sera compréhensible et utilisable par un utilisateur aveugle, ou qui n’utilise pas de souris. C’est pas encore du gâteau, surtout du fait que tout ça est encore très nouveau, mais notre métier est en pleine puberté. Le test sous Lynx, c’était le touche-pipi qui nous amusait à l’école maternelle, mais là on en est à la phase où on distribue les préservatifs.
    Par ailleurs, il y a tellement, mais tellement de choses qu’aujourd’hui on vérifie, et qui n’ont rien à voir avec les besoins des utilisateurs aveugles… absence de souris, vision partielle ou déformée, difficultés de lecture ou de compréhension, perception auditive altérée, troubles cognitifs ou intellectuels… on se préoccupe de tout ça désormais, parce qu’on a passé 15 ans à écouter et étudier les utilisateurs, dans l’espoir de faire notre travail du mieux possible. Et que l’on continue et continuera encore. Clairement, le navigateur texte est tout sauf un outil dans ce contexte. Le seul outil qu’on n’a pas remplacé, mais simplement fait évoluer, c’est notre cerveau, en y accumulant connaissances, expériences, et jugeotte.
    Je rebondis également sur ton commentaire où tu écris très justement qu’atteindre 80% de conformité RGAA, c’est du travail. Vrai ! De même qu’un électricien doit bosser pour satisfaire 80% des normes de son art, ou qu’un expert sécurité qui travaille sur un dispositif d’accès et en garantit larobustesse à 80%. Mais dans les 2 cas, tu reconnaitras avec moi que ces gens-là sont des margoulins. Car satisfaisant à 80%, ce n’est pas satisfaisant.
    Cette histoire de score, c’est un piège pour nous autres qui tentons de faire de l’accessibilité. Tu peux avoir brillamment satisfait 101 des 102 critères Argent d’Accessiweb, si tu ne satisfais pas LE critère sur les pièges au clavier, ton site n’est pas utilisable par un internaute qui ne peut que naviguer au clavier. Va lui expliquer, à celui-là qui ne peut pas acheter sur ton site la bague de fiançailles qu’il allait offrir à sa douce, que tu as fait tout bon pour tout le monde, sauf pour lui… parce que c’était du travail ? Oui : c’était ton travail.
    Le vocabulaire de l’accessibilité s’est progressivement enrichi de termes comme « pragmatique », « décomplexé », « réaliste », « agile »… Termes accrocheurs, derrière lesquels se cache une complexité qu’il est tentant d’oublier. Si bien que ces mots sont victimes de leur séduction, et utilisés à tort et à travers, pour adoucir la brûlure des « contraintes » et « problèmes » d’accessibilité… Parlons alors d’« exigence », notion qui doit rester au cœur de notre approche de la question. Et qui réconciliera les utilisateurs et les faiseurs du Web, qui pourront revendiquer au lieu de subir, ce qui n’est qu’une composante de leur métier – j’allais dire, de leur mission.
    Voila, sans rancune j’espère, car mon propos n’est pas de créer une polémique ou de jeter l’opprobre sur qui que ce soit, et surtout pas sur toi. Pour tout dire, j’apprécie à sa juste valeur le fait que l’accessibilité soit discutée en dehors des cercles des professionnels de la profession. C’est qu’on est très menacé par la consanguinité! Donc quoi qu’il en soit, merci de donner une tribune à ce sujet souvent malmené, mal traité, en espérant que cela fait progresser le débat et la compréhension de toutes ces choses bien plus subtiles qu’elles ne paraissent.

    Répondre
  6. fabien De

    Olivier, merci pour ce point de vue. Evidemment ici je survol le sujet et encore je trouve avoir été trop long !

    Je savais que si cet article serait lu par des experts en accessibilité je me ferais taper sur les doigts, comme je me doutais que des experts en référencement me ferais des remarques sur les capacités des moteurs de recherche aujourd’hui.

    Je vois ma réalité, les projets web sur lesquels je travaille au quotidien (pour des clients « importants », je ne parle pas du site de l’électricien du coin, pour en revenir à lui) et je vois la tâche immense qu’il reste à faire. Autant en accessibilité, qu’en référencement (et je t’épargne les notions sur la mobilité et la pertinence des contenus).

    Dans tous les cas, je suis très content que cet article fasse réagir … c’est le but.

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>