Saviez-vous que 15 à 20 % de la population souffrait d’un handicap, qu’il soit visuel, moteur ou encore auditif ? Dans une société connectée telle que la nôtre, il est plus que crucial de veiller à bien optimiser l’accessibilité de votre site.
L’accessibilité web se définit par l’ensemble des techniques et pratiques ayant pour objectif de rendre votre site e-commerce accessible au plus grand nombre (dont les personnes en situation de handicap) et donc de toucher un public beaucoup plus large. Cela permettra par la suite d’augmenter le trafic et les conversions sur les différentes pages qui composent votre site.
Un site bien préparé vous permettrait de ne pas passer à côté de millions de visiteurs potentiels. De plus, l’accessibilité numérique d’un site améliore votre référencement SEO !
Découvrez comment développer votre activité e-commerce à l’international
Posséder un site e-commerce accessible aux personnes en situation de handicap ou encore aux personnes âgées pouvant présentées une baisse de leurs facultés, c’est respecter certaines règles :
- Pour les non-voyants/mal voyants : il est nécessaire de pouvoir faire écouter son contenu grâce à un navigateur vocal, par exemple.
- Pour les handicapés moteurs : il est important de leur laisser la possibilité de naviguer sur votre site sans souris.
Ces éléments sont importants et à prendre en compte si vous souhaitez rendre votre site e-commerce accessible au plus grand nombre. Il y a de nombreuses choses à mettre en place.
Voici donc 7 astuces qui vous aideront à rendre votre site plus accessible.
Pensez à la meilleure ergonomie
La norme ISO 9241 définit de cette façon l’utilisabilité : « Un produit est dit utilisable lorsqu’il peut être utilisé avec efficacité, efficience et satisfaction. »
L’esthétique sur un site ne suffit pas. L’ergonomie web est primordiale pour obtenir un bon site e-commerce. En effet, cette partie ne doit pas être négligée. En plaçant l’expérience utilisateur au premier plan, vous augmentez vos chances que votre site soit apprécié et que les utilisateurs reviennent et en parlent autour d’eux. C’est avant même le commencement du développement de votre site que vous devez procéder à une étude approfondie de son ergonomie. Cela passe par l’interface de vos pages mais aussi par la présentation de vos menus qui facilitera l’expérience des utilisateurs. Une navigation simple augmente votre vivier de futurs clients potentiels !
Utilisez la structure la plus adéquate
Une grande partie des contenus web peut devenir accessible facilement en s’assurant de bien utiliser le langage HTML. Une page web est composée de nombreuses balises qu’il est possible de retrouver et modifier directement dans le code de la page en question. Il existe toutes sortes de balises. Chacune d’entre elles a une signification et un effet sur la structure de votre page. Toutes les balises ont un sens. Utilisez-les de la bonne façon !
Dissociez bien la forme du contenu
Pour que votre site e-commerce soit bien accessible, pensez à bien différencier votre fichier HTML contenant vos contenus (textes, images, menus…) de votre/vos fichier(s) CSS comprenant la mise en forme. Cela permet de rendre votre architecture plus claire mais aussi d’imaginer plusieurs types de designs. De ce fait, vous pourrez proposer un accès sans mise en forme, qui sera très utile pour certains handicaps, mais aussi un accès avec du texte écrit en plus gros, du contenu plus adapté à un smartphone ou encore à une tablette…
N’oubliez pas le texte alternatif pour vos images
Le texte alternatif est une brève description d’une image. Il s’intègre au code HTML et permet à un utilisateur ayant un handicap visuel de savoir ce que l’image représente sans la voir.
Il est tout d’abord important de différencier les 3 types d’images existantes :
- Les images apportant une simple information comme un bouton
- Les images apportant des informations plus complexes comme un graphique. Ces images peuvent utiliser un paramètre qui renverra vers une page HTML qui expliquera en détail le contenu de l’image.
- Les images « lambda » qui habillent votre site e-commerce mais n’apportent pas plus d’intérêt en termes d’informations comme une puce ou bien un encadrement
Pour un site e-commerce avec des fiches produits, il est plus que nécessaire de privilégier des textes alternatifs pour mieux guider vos utilisateurs dans le cas où ils seraient non-voyants.
Ce texte alternatif n’est pas à négliger. Il contribue à améliorer votre référencement.
Ajustez bien les couleurs et les contrastes
Choisissez des couleurs suffisamment différentes afin d’assurer une lecture simple et confortable. Optez pour une combinaison simple comme du texte foncé sur fond clair car il est primordial de conserver un contraste fort entre les textes et le fond de vos pages.
Il est indispensable de se rendre compte que les couleurs affichées sur votre écran ne sont pas forcément les mêmes chez tous les utilisateurs. Cela dépendra du calibrage de l’écran mais aussi de la faculté visuelle de l’utilisateur.
Un conseil : respectez les standards d’accessibilité HTML en vous tournant vers des typos accessibles à tous.
Précisez vos liens hypertextes
Moins il y a d’ambiguïté, plus votre site sera accessible !
Un lien peut manquer de précision quant à la page vers laquelle il renvoie. Tous les boutons/liens composant votre site doivent impérativement avoir un intitulé précis et différent des autres pour que les utilisateurs comprennent bien où ils vont.
Pour mieux comprendre
Un visiteur non-voyant souhaite accéder à son suivi de livraison. Il n’est pas recommandé de créer des boutons « cliquez ici ». Certains visiteurs utilisent une plage braille ou une synthèse vocale pour naviguer entre vos différentes pages. Privilégiez donc un bouton avec une mention plus précise comme « voir votre suivi de commande » qui sera tout de suite plus parlant pour l’utilisateur.
Évitez l’ouverture de nouvelles fenêtres
Bien qu’une fenêtre pop-up soit très utile pour annoncer une nouveauté ou bien un événement et que ce soit pratique pour certains utilisateurs d’avoir une vue sur toutes ses pages ouvertes, cela reste parfois très perturbant pour d’autres (notamment les mal-voyants). En effet, une nouvelle fenêtre peut « casser » le rythme de la navigation et perdre l’utilisateur. Si possible, laissez-lui donc le choix par un simple clic droit, d’ouvrir une autre page ou non. Si toutefois vous n’avez pas le choix, pensez à l’indiquer à l’aide de l’attribut qui convient dans votre code HTML.
Rendre son site e-commerce accessible et plus inclusif permet de répondre aux besoins de tous les utilisateurs et donne la possibilité de bénéficier d’un meilleur trafic et d’une plus grande e-réputation. Alors qu’attendez-vous pour mettre à jour le vôtre ?
