Suite et fin du dossier consacré au e-commerce et à l’accessibilité.
Les 15 étapes pour rendre son site accessible
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 :
1. Une étude ergonomique est indispensable
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.
2. Utilisez la bonne sémantique
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.
3. Différenciez la forme du contenu
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.
4. Pensez au texte alternatif des images
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” />).
5. Prévoyez un alternatif aux éléments sonores et vidéos
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.
6. Pensez aux couleurs et aux contrastes
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.
7. Permettez l’arrêt des animations
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.
8. Précisez vos liens hypertextes
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.
9. Les tableaux ne doivent pas servir pour la mise en page
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”.
10. Vérifiez vos formulaires
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).
11. Evitez l’ouverture de nouvelles fenêtres (ou pire, de pop-up !)
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>)
12. Pensez aux balises de compréhension
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>).
13. Utilisez des formats de fichiers standards
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.
14. Prévoyez la possibilité de naviguer au clavier
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>).
15. N’oubliez pas l’aide à la navigation
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 !
