Enfin j’ai pris le temps de m’intéresser à  l’accessibilité. En cherchant sur le net les définitions et des exemples de méthodologie pour réaliser des tests d’accessibilité, je suis tombée sur les billets de Roger Johansson sur Pompage.net. Ces explications et son approche m’ont été d’une grande utilité pour comprendre l’importance de l’accessibilité. Je me suis permise de faire une synthèse de ces 3 billets afin de pouvoir faire un test rudimentaire sur mes prochains Ergotest. « Test rudimentaire » ? Oui, car vu l’étendu, l’évolution et les différentes approches de l’accessibilité… Cela est impossible pour ma part de m’y consacrer à  plein temps.

« Mettre le Web et ses services à  la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales. » Tim Berners-Lee directeur du W3C.

1. Validation de la structure

• CSS et (X)HTML : L’utilisation du CSS et du (X)HTML permet de séparer la structure du contenu. Cela permet d’avoir une rigueur et une sémantique utilisant des balises qui facilitent l’accessibilité du site web. Un code valide W3C est important pour assurer un site aux standards mais cela ne signifie pas pour autant son accessibilité à  certaines déficiences visuelles. Toutefois, le premier pas est déjà  là  !
• Eviter les frames (cadres) : L’utilisation des frames fait perdre toute signification et hiérarchisation visuelle du contenu d’un site web. D’un point de vue d’utilisabilité, les frames sont inefficaces et risque de contraindre certain utilisateur lambda. Je vous invite à  lire le billet « Pour en finir avec les cadres » de Denis Boudreau sur OpenWeb qui explique davantage ce problème.
• Utiliser les tableaux : Les tableaux ne doivent pas être utilisés comme élément de mise en page. Leur principale fonction est d’afficher des données tabulaires. Le W3C déconseille l’utilisation de table pour les mises en pages mais ne l’interdit pas forcément : une page construite d’un tableau peut-être valide en XHTML Strict.

• Comment faire ? L’extension Web Developer pour Firefox permet de valider le CSS, le (X)HTML, de rendre visible les frames ou les tableaux. Sinon pour la validation du CSS et (X)HTML il y a validator.w3.org et jigsaw.w3.org/css-validator

2. Vérifier la sémantique du code

• Désactiver les CSS : La sémantique est très importante. Elle permet de présenter le contenu selon sa priorité dans la page. Pour que cette page soit accessible, elle doit être hiérarchisée, cohérente et avoir une structure lisible. Les moteurs de recherche facilite leur indexation grâce aux balises sémantique. Une des méthodes rudimentaires pour vérifier la sémantique est la désactivation du CSS d’un site. Si la lecture de la page est cohérente alors les balises de type titre (h1 à  h6), listes (ul, li…), etc. sont utilisées correctement.

• Comment faire ? Désactiver le CSS grâce à  l’extension Web Developer pour Firefox.

3. Image, texte et contraste

• Images et texte alternatif : Le texte alternatif contenu dans l’attribut alt (obligatoire pour les balise img et area) sert à  renseigner l’utilisateur sur le contenu de l’image lorsqu’elle ne s’affiche pas. Cet attribut se doit d’être rempli correctement et le plus logiquement possible par rapport à  son contenu respectif.
• Augmenter la taille du texte : La taille du texte doit toujours être spécifiée dans l’unité « em » ou en « % ». Cela permet un texte redimensionnable avec tous les navigateurs. Si l’unité est mentionnée en pixel, les utilisateurs d’Internet Explorer sur Windows devront se servir des préférences de l’application pour modifier la taille du texte.
• Le contraste des couleurs : Si le contraste des couleurs entre le texte et son arrière-plan n’est pas assez tranché, les utilisateurs auront des difficultées à  lire le contenu.

• Comment faire ? Pour effectuer des tests sur les couleurs et contrastes, vous pouvez utiliser : Color Contrast Check, qui vérifie les couleurs du premier plan et d’arrière-plan. Il existe aussi une extension Firefox « Color Contrast Analyser« . Sinon, il y a aussi Graybit.com, qui bascule une page HTML en niveau de gris.

P.S: A lire aussi « 36 critères d’accessibilité qui comptent pour le référencement » de Sébastien Billard.

Le 8 août dernier, Etienne Mineur écrit un billet très intéressant sur l’avenir des graphistes : Peut-on encore être concepteur graphique ou graphiste auteur au pays des Templates ? Au lieu de poster un commentaire sur son site, je préfère lui répondre en postant à  mon tour un billet sur ma propre expérience.

« L’ergonomie et les aspects techniques rentrent désormais en compte. Nos productions vont être de plus en plus un mixte entre image, typographie, image en mouvement et objet manipulable par l’intermédiaire d’une souris, d’un écran tactile ou autres interface d’entrées. Les logiques employées vont se situer à  la convergence du design graphique et du design objet.[…] Mais pour cela les designers graphiques doivent s’impliquer techniquement afin de mieux appréhender les possibilités et les contraintes de ces nouveaux outils. » Etienne Mineur

Internet offre aux graphistes la chance et la liberté de modifier ou d’améliorer leur conception graphique à  volonté. Dans le domaine du Print, quand le magazine est imprimé, c’est trop tard !

Aujourd’hui, entant que graphiste web, je commence à  me soucier de mon devenir, et décide de m’apprivoiser à  l’ergonomie web et l’expérience utilisateur. Du haut de mes 3 ou 4 années d’expériences professionnelles (c’est peu mais déjà  pas mal), je me suis bien rendue compte de l’évolution de cette profession artistique face aux nouvelles technologies, et à  l’évolution fulgurante du web. J’ai vite compris que je ne devais pas avoir peur des lignes de codes, et que je dois y faire face en m’y intéressant si je souhaite garder le contrà´le d’un projet en collaboration avec des développeurs ou intégrateurs. Attention, je ne dis pas que j’ai la science infuse face aux codeurs, mais je comprend davantage certaines facettes de leur métier et certains termes techniques qui m’étaient inaccessibles auparavant.

« De toute façon si les graphistes et designers n’occupent pas la place et démontrent les possibilités créatives de ce support, d’autres le feront. » Etienne Mineur

A la fin de mes études, nos professeurs nous dirigeaient davantage vers le logiciel Flash pour la conception de nos sites. Ce logiciel était plus instinctif et offrait une certaine liberté de création graphique. Au cours de mon cursus, je fus confrontée à  certains problèmes liés à  Flash tel que l’accessibilité, les mises à  jour, etc. Maintenant avec l’apparition de l’actionscript 3 ou de Flex, les graphistes vont se heurter à  un nouveau mur comme pour le CSS et XHTML. Si Etienne Mineur dit « d’autres le feront » je pense qu’il parle des générations à  venir qui seront davantage flexible et actif à  l’utilisation de ces nouvelles technologies. Donc, plus efficace par rapport à  d’autres graphistes qui resteront sans doute sur la touche.

« Il faut tout de même signaler qu’il est beaucoup plus facile pour un ingénieur/développeur de devenir un bon designer que le contraire » Etienne Mineur

C’est vrai. Toutefois, si notre profession existe c’est que nous avons une approche plus artistique et sensible à  l’image. L’ingénieur ou le développeur n’aura pas forcément les bases du graphisme (qui me semble très importantes), du goût ou de la sensibilité pour concevoir une identité visuelle ou harmoniser des couleurs malgré tous ces sites existants tel que kuler, colourlovers, etc. Aujourd’hui, nous sommes davantage confronté à  des sites qui se ressemblent et non qui se distinguent.

« la vision de R. U Sirius, cofondateur de Mondo 2000 «.. on doit être constamment en alerte et sur nos pieds. C’est important d’acquérir une connaissance sophistiquée de ces outils. Il n’est pas possible de simplement tourner le dos et ignorer, il faut apprendre à  utiliser le Cyberespace, cet espace o๠nous sommes. Et si nous sommes concernés par la politique et les considérations sociales qui régissent ce monde, il faut agir au mieux dans cet espace ? C’est notre territoire, celui que nous devons assumer et dont nous devons préserver la liberté ». Personnellement sans être aussi CyberPunk 😉 je pense qu’investir ces nouveaux espaces électroniques est essentiels, même si cela veut dire perdre un peu du contrà´le et du pouvoir que nous avions sur la formalisation des choses. Investir, expérimenter, chercher, utiliser le détournement, le Hack, et accepter les accidents… » Etienne Mineur

Si un graphiste souhaite survivre et vivre de sa profession dans le domaine du multimédia et de l’Internet, je crois que ce dernier ne doit pas hésiter à  mettre la main à  la pâte et en aucun cas croire que sa mission s’arrête à  la conception d’un visuel. Il doit s’informer au maximun des nouvelles technologies, des derniers sites qui sont en vogue et savoir pourquoi. Ne pas oublier aussi de jeter un oeil sur les sites de marketing car bien souvent nous y découvrons des campagnes très bien ficelées alliant ingéniosité, graphisme et marketing virale. Et bien sûr, toujours regarder les portfolios des autres graphistes.

Conclusion, le graphiste doit toujours rester en veille et doit accepter de se remettre en question sur l’évolution de sa profession !

Les tests traditionnels d’ergonomie

Il existe 3 tests d’ergonomie couramment utilisés :

• Informel : Inviter un proche dans un environnement de travail et faîtes lui faire un programme de taches prédéfinies. Observez-le et prenez note sur sa manière de naviguer sur le site.
• Semi-formel : Même procédure que le test informel à  la différence qu’il n’y a pas qu’une seule personne mais plusieurs individus sélectionnés selon certains critères bien définis.
• Formel : Même procédure que le test semi-informel sauf que le test formel est organisé par des experts en psychologie comportementale. Ces tests s’exécutent dans des locaux spécialisés : observation à  travers des vitres sans tain, séance filmée, utilisation du « Eyetracking »…

Sachez que ces tests ne nous dévoilent jamais la solution pour concevoir un site parfait, mais seulement une meilleure garantie d’utilisation pour les internautes. Ils servent à  trouver les failles du site testé ainsi que la véritable navigation de l’utilisateur, et non celle que les concepteurs pensent. Ces tests doivent aussi conclure à  des solutions pour garantir une facilité d’utilisation et éviter ainsi des risques lors du lancement du site.

Questions à  se poser lors de la conception d’un site :

• L’utilisateur accède-t-il facilement à  l’information recherchée ?
• L’utilisateur exécute-t-il ce que vous avez prévu ?
• Le visiteur revient-il de lui-même ?
• Votre site est-il utile ?
• Votre site est-il agréable visuellement ?

A lire :
Exemple et explication d’un test réalisé par l’agence Sqli sur leur blog Ergonomic Garden

Mon approche

En général, les tests d’ergonomie mettent de cà´té le graphisme car ce dernier n’est que subjectif et touche l’affect selon la culture de l’internaute, son expérience du web… Toutefois, n’oublions pas que le design graphique est le reflet d’une personnalité, d’une identité propre au site, à  la marque ou à  l’entreprise. La première impression que le visiteur se fait d’un site web est lié à  son impact visuel. Une émotion s’en dégage instantanément. Si cette émotion est positive face à  un design graphique agréable et attirant, il aura alors du plaisir à  naviguer sur le site. Dans le cas contraire, cela va affaiblir les chances d’appréciation du site et aura sans doute des répercussions sur la navigation.

L’esthétique joue un rà´le important dans notre quotidien, et ne peut se dissocier de l’utilisabilité d’un site web. Ces deux notions sont liées au confort de navigation de l’utilisateur et si leur complémentarité est bien exploitée, elles garantiront la fidélité de l’internaute.

Cette approche sera la mienne lors de mes futurs billets. En aucun cas je ne séparerais ces deux notions. Aujourd’hui, le web offre une telle liberté de création que le problème majeur pouvant ralentir les webdesigners reste bien souvent la gestion de l’ergonomie.

A lire :
Livre de Donald Norman : Emotional Design: Why We Love (or Hate) Everyday Things
Interview de Jakob Nielsen, spécialiste de l’utilisabilité web, sur le Journal du Net