Comme à mon habitude, je vous mets à disposition le PDF (13 pages) du dossier sur l’accessibilité et le e-commerce que j’ai publié cette semaine.
J’espère que ce dossier vous aura sensibilisé sur l’importance du respect des normes du web et vous aura donné quelques notions sur l’accessibilité numérique. N’hésitez pas à partager ce pdf.
Suite et fin du dossier consacré au e-commerce et à l’accessibilité.
Avant de passer aux différentes étapes qui vous permettront de rendre votre site accessible, je tenais à vous donner deux informations importantes. Tout d’abord, il est impératif de bannir l’utilisation de logiciel dits WYSIWYG (logiciel qui permet de créer directement à l’écran votre site internet sans passer par du code). En effet, les logiciels de ce type ne pourront générer un code propre et respecter (de façon intelligente) les standards du W3C.
Deuxième point, il est difficile à l’heure actuelle de faire un site e-commerce accessible de bout en bout. La raison ? La page de paiement hébergée par la banque ! Les organismes bancaires ont encore beaucoup de progrès à faire dans ce sens et il n’y a que très peu de systèmes vous permettant d’intégrer leur solution dans vos pages…
Voici donc, concrètement, 15 étapes pour rendre son site accessible :
Avant même le commencement du développement web, il est très important de prévoir une étude poussée de l’ergonomie. C’est à dire bien réfléchir à l’interface du site et à la présentation des menus pour que l’utilisateur puisse trouver ses repères rapidement. La navigation est facilitée pour l’internaute, le site est donc plus accessible.
Les pages web sont composées de balises que l’on peut trouver dans le code de la page. Chaque balise a un sens et une répercution dans la structure et la mise en forme de la page. Il existe donc des balises pour définir un titre de page, renforcer le texte (gras, italique), ouvrir et fermer un paragraphe ou une liste… Ces balises ont un sens et il est donc important de les utiliser de façon convenable dans le code de sa page.
C’est un point essentiel pour obtenir un site accessible. Votre fichier HTML doit uniquement contenir les informations et votre (ou vos) fichier(s) CSS la mise en forme. En plus de rendre votre code plus clair, cela permet également d’imaginer plusieurs présentations différentes. Vous pourriez ainsi proposer un accès sans mise en forme (utile pour certains handicap ou pour les connexions très lentes), un accès avec le texte écrit plus gros, un accès pour téléphone mobile avec une présentation minimaliste, etc.
Il est important de dissocier 3 types d’images différentes.
- Les images de présentation de la page (par exemple une puce ou un cadre) qui n’apportent pas d’intérêt particulier en terme d’informations. Pour éviter par exemple qu’un synthétiseur vocal ou qu’un plage braille ne lise cette information au visiteur, il est d’usage de mettre un texte alternatif vide (ex : <img src=”votreimage.jpg” alt=” ” />).
- Les images apportant une courte information comme un bouton ou un logo par exemple doivent obligatoirement mettre un texte alternatif (ex : <img src=”logo-wizishop.jpg” alt=” Wizishop” />).
- Les images qui apportent beaucoup d’informations comme un graphique de statistiques ou un plan par exemple peuvent utiliser le paramètre “longdesc” de la balise image. Ce paramètre permettra de renvoyer l’internaute vers une page HTML complète qui lui expliquera en détail le contenu de l’image (ex : <img src=”stats.jpg” alt=” Statistiques” longdesc=”stat2008.html” />).
Pour ce type de média, il est important de penser à ceux qui ne peuvent pas écouter (absence de hauts-parleurs ou déficience auditive). Pour les sons, comme pour l’image, il est possible d’utiliser les mêmes paramètres “alt” et “longdesc”. Pour les vidéos, il convient d’ajouter des sous-titres synchronisés avec la bande son.
Il est très important de conserver un contraste fort entre les textes et le fond de la page. Dans le cas contraire, la fatigue visuelle risque de faire fuir votre client potentiel. Attention, il est indispensable de bien comprendre que les couleurs affichées sur votre écran ne correspondent pas forcément à ce que verront vos visiteurs (cela dépend du calibrage de chaque écran). Donc un contraste que vous jugez suffisant sur votre écran, ne le sera peut être pas chez l’utilisateur…
Autre exemple, imaginons un formulaire avec les champs obligatoires en rouge et les champs facultatifs en noir. Une personne daltonienne ou malvoyante ne verra pas les mêmes contrastes que vous et ne pourra pas faire la distinction. Préférez donc une distinction sur la forme comme une * sur les champs obligatoires par exemple.
D’une manière générale, toutes les animations peuvent perturber votre visiteur en attirant l’œil ce qui peut l’empécher de se concentrer. Il convient donc de lui laisser la possibilité de les stopper.
Pour les animations flash ou les vidéos, prévoyez simplement un bouton “pause”. Pour les gifs animés, prévoyez un arrêt automatique de l’animation au bout de quelques secondes.
Il est important d’enlever toutes les ambiguités pour une meilleure accessibilité. Ainsi, il faut penser à formuler des libellés très explicites pour vos liens. Il est donc tout à fait exclu de faire un lien “Cliquez ici” ! En effet, certains de vos visiteurs peuvent utiliser une plage braille ou une synthèse vocale pour naviguer sur vos pages. Ils ne sauraient donc pas ce qu’ils vont trouver avec un lien pareil. Alors qu’un lien sur “Accès à votre suivi de commande” est tout de suite beaucoup plus parlant.
Un tableau permet de présenter des données. Jusque là, tout va bien. Malheureusement, pendant bien longtemps, les tableaux permettaient également de mettre en page rapidement son site internet. Là, c’est beaucoup plus grave ! Imaginez une synthèse vocale essayant de décrypter le site en lisant à un mal voyant chaque colonne les unes après les autres.
Pour les tableaux de données, il est recommandé d’ajouter un résumé qui expliquera en quelques mots la fonction du tableau. Pour cela utilisez l’attribut “summary” de la balise “table”.
Pas de site marchand sans formulaire. La transition est toute trouvée pour vous expliquer qu’un formulaire mal construit ne pourra pas être validé par vos clients et qu’ils ne pourront donc pas finaliser leur commande ! Il y a plusieurs points à contrôler :
- La sectorisation des éléments, c’est à dire le regroupement de plusieurs champs d’un même thème via l’attribut Fieldset (par exemple le Fieldset Etat Civil regrouperait la civilité, le nom et le prénom du client)
- La mise en place des balises Label, ces balises permettent d’associer le titre de l’information requise au champ en question que l’utilisateur doit remplir. De plus il est préférable de placer le label juste avant le champ du formulaire et sur la même ligne.
- Le contrôle des champs, avec la mise en place de script indiquant clairement à l’utilisateur si il a mal complété le formulaire ou si il a oublié un élément. L’erreur doit être mise en évidence (par exemple le champ oublié apparait dans une certaine couleur).
Cette pratique peut être très perturbante pour certains utilisateurs, notamment mal voyant. En suivant un lien, ils se retrouveraient brusquement dans une nouvelle fenêtre et ne pourraient pas faire précédent (ils sont obligés de fermer la fenêtre ce qui casse la navigation). Les navigateurs permettent tous, par un simple clic droit sur le lien, d’ouvrir la page dans une nouvelle fenêtre ou un nouvel onglet. Laissez donc le choix à votre visiteur de le faire ou non !
Si vous êtes vraiment obligé de passer par l’ouverture d’une nouvelle fenêtre, précisez le à l’aide de l’attribut “title” (ex : <a href=”votrelien.html” target=”_blank” title=”Ouverture dans une nouvelle fenetre”>votre lien</a>)
Certaines balises sont très importantes pour la compréhension du site. Notamment l’indication de la langue (ex: <html lang=”fr”>), les abréviations (que vous devez expliquer à vos visiteurs, ex: Taille en <abbr title=”centimètre”>cm</abbr>) et les acronymes (idem que pour les abréviations, ex: <acronym title=”Appareil Photo Numérique”>APN</acronym>).
Ne mettez pas des fichiers .doc sur votre site par exemple, préférez toujours des formats standards que tout le monde pourra ouvrir et consulter facilement. Par exemple du RTF pour du texte ou du PDF pour des présentations.
Tout le monde ne peut pas forcément naviguer à la souris (aptitude physique - exemple : personne atteinte de la maladie de Parkinson - ou matériel ne disposant pas de souris). Pour assurer une bonne accessibilité, il est donc nécessaire de prévoir une navigation au clavier. Il convient de vérifier que l’utilisateur peut passer d’un élément à un autre via la touche Tab, que la validation d’un lien fonctionne bien lorsqu’il appuie sur Entrée et que les pages défilent avec les flèches. Il convient également de mettre en place des combinaisons de touches pour un accès rapide aux divers éléments de la page (ex: alt + 5 pour aller aux menus de la page, alt + 3 pour accéder au plan du site, etc.) grâce à l’attribut accesskey (ex: <a href=”contact.html” accesskey=”t”>Contact</a>).
Dernier point, prévoyez une aide ou une politique d’accessibilité qui permettra d’expliquer toutes les spécificités d’utilisation de votre site e-commerce. Vous pourrez notamment expliquer à vos visiteurs comment utiliser les touches d’accès rapide (Exemple de politique d’accessibilité sur le site Enfant Ti Age).
Rien à voir avec le sujet mais je souhaitais en remettre une couche : rendez vous mardi 1er Juillet à 10h10, j’ai une révélation importante à vous faire !
Voici la suite de mon dossier consacré à l’accessibilité et le e-commerce.
“Amener le web à son plein potentiel”
C’est avec ce Leitmotiv que le W3C (World Wide Web Consortium) se présente comme l’organisme régulateur de l’Internet mondial. La philosophie des 400 membres (de tous les continents) qui composent le W3C est de “mettre les avantages de la technologie internet à la disposition des individus, quels que soient leur matériel, logiciel, infrastructure de réseau, langage naturel, culture, emplacement géographique ou capacité physique ou mentale”.
Pour cela, l’organisme a mis aux points une liste de standards et de recommandations. Cette approche vise clairement à rendre le web plus accessible. Un projet a d’ailleurs été mis en place spécifiquement pour les personnes souffrant de handicap. Il s’agit de la Web Accessibility initiative (WAI).
La WAI a 5 domaines d’action :
La WAI a donc mis en place un certain nombre de recommandations (ou directives) servant de référence en matière d’accessibilité. On les appelle les Web Content Accessibility Guidelines (WCAG) ou, pour ceux qui restent attachés à notre belle langue française : les Directives pour l’accessibilité des contenus web.
Si on traduit le document officiel de la WAI, on peut lire :
“en suivant ces directives, le contenu Web s’en trouvera plus accessible à tous les utilisateurs, [...] On permettra également aux utilisateurs de trouver de l’information sur le Web plus rapidement. Ces directives ne cherchent pas à décourager l’utilisation par les créateurs de contenu d’images, de vidéos, etc., mais expliquent plutôt comment rendre les contenus multimédias plus accessibles à une large audience.”
Comme je le disais dans le premier billet de ce dossier, clairement, si l’accessibilité est orientée à l’origine vers les personnes souffrant de handicaps, elle reste un concept utile à tous !
Il y a plusieurs niveaux de conformité pour l’accessibilité des sites web.
Priorité A : Permet d’assurer une accessibilité minimale. Personnellement, je pense que tout site marchand devrait tenir compte de ce niveau de priorité.
Priorité AA : Si cette priorité n’est pas respectée, certaines personnes handicapées pourraient ne pas accéder à toutes les parties du site.
Priorité AAA : Le plus haut niveau d’accessibilité. Mais ce n’est pas fondamental pour un site de e-commerce (à moins de cibler prioritairement un public qui aurait certains handicaps).
Bon, tout cela peut vous paraitre un peu flou alors je vous résume les points essentiels…
Le W3C est un organisme chargé de réguler internet. Il a créer une liste de recommandations et il est très important pour vous que votre site marchand suivent la grande majorité de ces règles.
Si vous souhaitez aller encore plus loin en terme d’accessibilité, le W3C a créé un groupe de travail nommé WAI qui a mis au point un certain nombre de règles (appelés WCAG). Vous avez 3 façons plus ou moins poussées pour appliquer ces règles et je vous conseille la priorité A, qui est déjà un très bon point de départ.
Avec ces quelques notions vous pouvez aller voir votre agence web et leur demander de prendre en compte l’accessibilité dans leur développement.
Le prochain billet sera un peu plus concret avec quelques conseils pour rendre son site e-commerce accessible.
Pour aller plus loin :
J’ouvre aujourd’hui un nouveau dossier consacré à un domaine qui me tient particulièrement à coeur : l’accessibilité.
Il y aura 3 chapitres :
Avant de répondre à cette question, il est important de bien comprendre ce que l’on entend par accessibilité…
On parle de site accessible lorsque n’importe quelle personne peut accéder à l’information de façon équivalente quels que soient :
Internet est, par nature, peu accessible. Il nécessite un matériel couteux (ordinateur, connexion internet) et nécessite un apprentissage important.
Avant d’aller plus loin, je tiens à bien insister sur le fait que l’accessibilité nous concerne tous et ne se réduit pas à une notion de handicap. Tous les internautes que nous sommes avons déjà eu une mauvaise expérience avec un site qui ne s’affiche pas à cause d’un “plugin manquant”, non ?
Imaginez donc la réaction de votre visiteur si votre site de vente en ligne ne s’affiche pas correctement ! La conséquence sur le chiffre d’affaires sera directe…
Notion importante, il n’est pas possible de faire un site totalement accessible. Le but du jeu est donc de mettre tout en oeuvre pour offrir une accessibilité maximum à ses visiteurs mais il y a forcément des compromis à faire.
L’accessibilité est une obligation nationale
La loi de 1991 fixe un cadre précis à l’accessibilité. Concrètement cette loi concerne l’accessibilité des bâtiments, des voiries et des infrastructures de transports. Le web n’existait pas alors. L’accessibilité physique aux lieux publics est alors présentée comme une condition fondamentale de la liberté et de la citoyenneté !
Concrètement, pour internet, il n’y a que la loi sur le handicap (adoptée le 3 février 2005) qui rende obligatoire l’accessibilité des sites Internet de l’Administration. Pour les autres sites, il n’y a pas de règles précises.
Pourquoi l’accès à l’information présente sur la toile ne serait pas une condition toute aussi fondamentale de liberté ? Pourquoi l’accès à une boutique physique ferait l’objet d’une loi mais pas l’accès à une boutique en ligne ?
Je pense donc qu’au delà de la loi, l’accessibilité a un intérêt civique et moral ! Il ne faut pas se le cacher, c’est également un enjeu marketing important et un atout indiscutable pour l’image de votre entreprise.
Un site accessible augmente votre potentiel client
Et c’est bien là le plus important. Pourquoi se priver de certains utilisateurs ? Pourquoi se priver d’un internaute qui a un petit écran ? Pourquoi se priver d’un internaute malvoyant ou malentendant ?
Toutes ces personnes sont des clients potentiels, alors autant les chouchouter !
Il ne faut surtout pas croire que les personnes handicapées par exemple ne correspondent pas à votre marché. Au contraire. Grâce à certaines subventions, les personnes handicapées sont mieux équipées que la moyenne.
Autre point très important, les moteurs de recherche. Il faut les imaginer comme des non voyants. Ils sont capables de lire des mots et suivre des liens, c’est tout. Si votre site est accessible, les robots auront accès à toutes les informations de vos pages. Votre site sera donc mieux référencé, c’est à dire qu’il ressortira plus facilement dans les résultats des moteurs de recherche. C’est donc un avantage concurrentiel très important qui peut vous permettre d’augmenter vos visites de façon naturelle ! Et si vos visites augmentent, vos ventes aussi 
Quelques idées reçues sur les sites accessibles
On pense souvent que les normes sont très compliquées à mettre en place. Il suffit pourtant de suivre certaines règles simples et de s’adresser à la bonne agence. Imposez le dans votre cahier des charges !
On pense également que l’accessibilité coûte cher. En effet, si l’accessibilité n’est pas envisagée lors de la création d’un site marchand, son coût est important. Mais si elle est prévue à l’origine, le coût est quasi nul ou, dans le pire des cas, s’équilibre rapidement (plus de visibilité donc plus de gains).
Enfin, on pense parfois que l’accessibilité ne permet pas d’avoir un site très graphique. Mais en réalité, cela n’a aucune influence sur la charte graphique et pour un visiteur lambda, il est impossible de faire la différence entre site aux normes et site n’en tenant pas compte…
Quelques exemples de sites marchands ayant une politique d’accessibilité (juste histoire de vous prouver que ça ressemble à un site marchand classique) :
Si vous avez d’autres exemples, n’hésitez pas à les partager.
Sans aucun rapport, je rappelle à tous ceux qui n’avaient pas suivi que je dévoilerais un projet innovant concernant le e-commerce, sur lequel je travaille depuis plus d’un an et demi, mardi prochain à 10h10 sur ce blog. Je vous donne donc rendez vous à tous.
Depuis quelques mois, je n’avais plus passé de site “à la moulinette”. Il est donc temps de reprendre les bonnes habitudes. L’étude de cas de la semaine se porte sur un site de vente en ligne de bière, nommé Saveur Bière.
J’ai décidé de découper cette étude en 3 partie :
1. Rassurer le client
Cette phase est primordiale pour tout site de e-commerce ! Pour convertir un visiteur en client, il faut lui ôter toutes ses inquiétudes. L’exemple d’une boutique en ligne de bière est donc frappant. Imaginez les à priori que peut avoir le client. Que se passe t-il si mes bouteilles de bière cassent pendant le transport ? Comment savoir si cette bière va me plaire ? Ce fût est-il compatible avec telle tireuse ? Combien de bouteilles dois-je acheter pour être livré ?…
Pour rassurer le client il faut d’une part répondre à ses besoins et d’autre part répondre à ses questions…
Sur Saveur Bière, le visiteur va pouvoir se faire une idée sur le catalogue proposé en un coup d’œil. Le menu est explicite et déroule lors du survol de la souris. C’est un bon moyen pour montrer les différents choix possibles à son visiteur sans qu’il ait besoin de cliquer.
Mais d’un point de vue ergonomique, ce genre de menus peut être dangereux. Tout d’abord, dans le cas de Saveur Bière, les 6 menus ne déroulent pas tous. Voilà de quoi dérouter certains utilisateurs. Pour éviter cela, les menus déroulant sont marqués d’une petite flèche.
L’autre point faible de ce type de menu se situe au niveau de l’accessibilité. Si par exemple le visiteur n’autorise pas le javascript, le déroulé ne s’affichera pas. Si il clique sur Bières, le visiteur atterrira sur les bières à l’unité. Et là, ça peut poser problème… Les sous menus sont uniquement dans le menu déroulant et le visiteur ne pourra pas les retrouver à d’autres endroits… Donc un internaute qui n’aurait pas javascript (certaines entreprises peuvent l’interdire) ne pourra jamais acheter d’assortiment de bières ou de mini-fûts ! Ce n’est pas grand chose à modifier et je conseille donc toujours de doubler ce type de menu déroulant à une navigation plus traditionnelle pour une meilleure accessibilité. Sinon un autre moyen consisterait à proposer une page intermédiaire lorsque l’on clique sur le menu. Elle récapitulerait les différents choix possibles…
Une bière peut faire l’objet d’un cadeau original. Saveur Bière a fait le pari de donner à cet espace cadeau autant d’importance qu’à leur sélection de bières et de tireuses. Je trouve que c’est tout à fait approprié et que cela répond aux attentes des visiteurs. On va l’assister en lui mâchant le travail et en lui proposant de multiples offres (coffrets, assortiments, mètres de bières, chèques cadeaux…).
Pour faire sauter tous les freins à l’achat, Saveur Bière a mis le paquet. Je pense qu’il peut servir d’exemple pour beaucoup de cas. Dès l’entête de la page, on trouve une assistante en ligne et le logo d’un magazine connu. Cette association permet de bénéficier de l’image de marque du magazine, un bon moyen pour rassurer son visiteur et crédibiliser sa boutique.
Enfin, sur la droite de toutes les pages sont affichées, fièrement, toutes les garanties du site : délais de livraison, paiement sécurisé, témoignages clients, contact…
Si on veut aller chercher la petite bête, on peut juste regretter que toutes les garanties ne soient pas expliquées en détail. Il y a par exemple un lien sur le paiement sécurisé mais pas sur le fait que la commande soit traitée en 24h. Rien ne distingue les deux phrases ce qui est perturbant ou frustrant au choix.
On peut également regretter les doublons (notamment au niveau de la livraison). Peut être faudrait il regrouper tous les arguments sur ce sujet dans un seul pavé ? Enfin, pourquoi afficher les logos de CB et visa et ne pas mettre celui de la banque ?
En conclusion de ce premier chapitre, je dirais que Saveur Bière répond bien à la problématique étudiée. L’offre est immédiatement identifiable et le visiteur trouvera rapidement la réponse à ses questions. Deux critères indispensables pour réussir dans le commerce électronique…
. Maintenant je reste quand même pour la solution JUCQSYC...Le blog WiziShop utilise WordPress | Contact | Partenaires | S'abonner au fil RSS
