{"id":4799,"date":"2021-01-04T09:23:58","date_gmt":"2021-01-04T08:23:58","guid":{"rendered":"https:\/\/www.textmaster.com\/blog\/?p=4799"},"modified":"2021-01-04T10:17:00","modified_gmt":"2021-01-04T09:17:00","slug":"7-astuces-pour-rendre-votre-site-e-commerce-accessible","status":"publish","type":"post","link":"https:\/\/fr.textmaster.com\/blog\/7-astuces-pour-rendre-votre-site-e-commerce-accessible\/","title":{"rendered":"7 astuces pour rendre votre site e-commerce accessible"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Saviez-vous que <strong>15 \u00e0 20 % de la population souffrait d\u2019un handicap<\/strong>, qu\u2019il soit visuel, moteur ou encore auditif ? Dans une soci\u00e9t\u00e9 connect\u00e9e telle que la n\u00f4tre, il est plus que crucial de veiller \u00e0 bien <strong>optimiser l\u2019accessibilit\u00e9 de votre site<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">L\u2019accessibilit\u00e9 web se d\u00e9finit par l\u2019ensemble des techniques et pratiques ayant pour objectif de <strong>rendre votre site e-commerce accessible au plus grand nombre<\/strong> (dont les personnes <strong>en situation de handicap<\/strong>) et donc de toucher un public beaucoup plus large. Cela permettra par la suite d\u2019<strong>augmenter le trafic et les conversions<\/strong> sur les diff\u00e9rentes pages qui composent votre site.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Un site bien pr\u00e9par\u00e9 vous permettrait de ne pas passer \u00e0 c\u00f4t\u00e9 de <strong>millions de visiteurs potentiels<\/strong>. De plus, l\u2019<strong>accessibilit\u00e9 num\u00e9rique d\u2019un site am\u00e9liore votre r\u00e9f\u00e9rencement SEO<\/strong> !<\/span><b><\/b><\/p>\n<hr \/>\n<p><a href=\"https:\/\/fr.textmaster.com\/blog\/developpement-activite-ecommerce-international\/\"><b>D\u00e9couvrez comment d\u00e9velopper votre activit\u00e9 e-commerce \u00e0 l\u2019international<\/b><\/a><\/p>\n<hr \/>\n<p><b><\/b>Poss\u00e9der un site e-commerce accessible aux personnes en situation de handicap ou encore aux personnes \u00e2g\u00e9es pouvant pr\u00e9sent\u00e9es une baisse de leurs facult\u00e9s, c\u2019est respecter certaines r\u00e8gles :<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Pour les <strong>non-voyants\/mal voyants<\/strong> : il est n\u00e9cessaire de pouvoir <strong>faire \u00e9couter son contenu<\/strong> gr\u00e2ce \u00e0 un navigateur vocal, par exemple.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Pour les <strong>handicap\u00e9s moteurs<\/strong> : il est important de leur laisser la possibilit\u00e9 de <strong>naviguer sur votre site sans souris<\/strong>.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Ces \u00e9l\u00e9ments sont importants et \u00e0 prendre en compte si vous souhaitez rendre votre site e-commerce accessible au plus grand nombre. Il y a de nombreuses choses \u00e0 mettre en place.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Voici donc <strong>7 astuces qui vous aideront \u00e0 rendre votre site plus accessible<\/strong>.\u00a0<\/span><\/p>\n<h2><b>Pensez \u00e0 la meilleure ergonomie<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">La<strong> norme ISO 9241<\/strong> d\u00e9finit de cette fa\u00e7on l\u2019utilisabilit\u00e9 : <\/span><i><span style=\"font-weight: 400;\">\u00ab Un produit est dit utilisable lorsqu\u2019il peut \u00eatre utilis\u00e9 avec efficacit\u00e9, efficience et satisfaction. \u00bb<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">L\u2019esth\u00e9tique sur un site ne suffit pas. L\u2019<strong>ergonomie web est primordiale<\/strong> pour obtenir un bon site e-commerce. En effet, cette partie ne doit pas \u00eatre n\u00e9glig\u00e9e. En pla\u00e7ant l\u2019<\/span><strong><a href=\"https:\/\/go.textmaster.com\/lp-fr-ux-contenu-international?utm_source=blog&amp;utm_medium=referral\">exp\u00e9rience utilisateur <\/a><\/strong><span style=\"font-weight: 400;\">au premier plan, <strong>vous augmentez vos chances que votre site soit appr\u00e9ci\u00e9 et que les utilisateurs reviennent et en parlent autour d\u2019eux<\/strong>. C\u2019est avant m\u00eame le commencement du d\u00e9veloppement de votre site que vous devez proc\u00e9der \u00e0 une<strong> \u00e9tude approfondie de son ergonomie<\/strong>. Cela passe par l\u2019<strong>interface de vos pages<\/strong> mais aussi par la<strong> pr\u00e9sentation de vos menus<\/strong> qui facilitera l\u2019exp\u00e9rience des utilisateurs. Une navigation simple augmente votre vivier de futurs clients potentiels !<\/span><\/p>\n<h2><b>Utilisez la structure la plus ad\u00e9quate<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Une grande partie des contenus web peut devenir accessible facilement en s\u2019assurant de bien utiliser le <strong>langage HTML<\/strong>. Une page web est compos\u00e9e de nombreuses balises qu\u2019il est possible de retrouver et modifier directement dans le code de la page en question. Il existe toutes sortes de balises. Chacune d\u2019entre elles a une signification et un effet sur la structure de votre page. <strong>Toutes les balises ont un sens<\/strong>. Utilisez-les de la bonne fa\u00e7on !<\/span><\/p>\n<h2><b>Dissociez bien la forme du contenu<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Pour que votre site e-commerce soit bien accessible, pensez \u00e0 bien<strong> diff\u00e9rencier votre fichier HTML <\/strong>contenant <strong>vos contenus<\/strong> (textes, images, menus\u2026) de<strong> votre\/vos fichier(s) CSS <\/strong>comprenant <strong>la mise en forme<\/strong>. Cela permet de rendre votre architecture plus claire mais aussi d\u2019imaginer plusieurs types de designs. De ce fait, vous pourrez proposer un acc\u00e8s sans mise en forme, qui sera <strong>tr\u00e8s utile pour certains handicaps<\/strong>, mais aussi un acc\u00e8s avec du texte \u00e9crit en plus gros, du contenu plus adapt\u00e9 \u00e0 un smartphone ou encore \u00e0 une tablette\u2026<\/span><\/p>\n<h2><b>N\u2019oubliez pas le texte alternatif pour vos images<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Le texte alternatif est une <strong>br\u00e8ve description d\u2019une image<\/strong>. Il s\u2019int\u00e8gre au code HTML et permet \u00e0 un utilisateur ayant un handicap visuel de <strong>savoir ce que l\u2019image repr\u00e9sente sans la voir<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Il est tout d\u2019abord important de diff\u00e9rencier les 3 types d\u2019images existantes :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Les images apportant une<strong> simple information<\/strong> comme un bouton<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Les images apportant des <strong>informations plus complexes<\/strong> comme un graphique. Ces images peuvent utiliser un param\u00e8tre qui renverra vers une page HTML qui expliquera en d\u00e9tail le contenu de l\u2019image.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Les images <strong>\u00ab lambda \u00bb<\/strong> <strong>qui habillent votre site e-commerce<\/strong> mais n\u2019apportent pas plus d\u2019int\u00e9r\u00eat en termes d\u2019informations comme une puce ou bien un encadrement<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Pour un site e-commerce avec des fiches produits, il est plus que n\u00e9cessaire de privil\u00e9gier des textes alternatifs pour <strong>mieux guider vos utilisateur<\/strong>s dans le cas o\u00f9 ils seraient non-voyants.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ce texte alternatif n\u2019est pas \u00e0 n\u00e9gliger. Il contribue \u00e0 <strong>am\u00e9liorer votre r\u00e9f\u00e9rencement<\/strong>.<\/span><\/p>\n<h2><b>Ajustez bien les couleurs et les contrastes<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Choisissez des <strong>couleurs suffisamment diff\u00e9rentes<\/strong> afin d\u2019assurer une lecture simple et confortable. Optez pour une combinaison simple comme du <strong>texte fonc\u00e9 sur fond clair<\/strong> car il est primordial de conserver un <strong>contraste fort<\/strong> entre les textes et le fond de vos pages.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Il est indispensable de se rendre compte que les couleurs affich\u00e9es sur votre \u00e9cran ne sont pas forc\u00e9ment les m\u00eames chez tous les utilisateurs. Cela d\u00e9pendra du <strong>calibrage de l\u2019\u00e9cran<\/strong> mais aussi de la <strong>facult\u00e9 visuelle de l\u2019utilisateur<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Un conseil<\/strong> : respectez les standards d\u2019accessibilit\u00e9 HTML en vous tournant vers des typos accessibles \u00e0 tous.<\/span><\/p>\n<h2><b>Pr\u00e9cisez vos liens hypertextes<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Moins il y a d\u2019ambigu\u00eft\u00e9, plus votre site sera accessible !<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Un lien peut manquer de pr\u00e9cision quant \u00e0 la page vers laquelle il renvoie. Tous les boutons\/liens composant votre site doivent imp\u00e9rativement avoir un <strong>intitul\u00e9 pr\u00e9cis et diff\u00e9rent des autres<\/strong> pour que les utilisateurs comprennent bien o\u00f9 ils vont.<\/span><\/p>\n<h4><b>Pour mieux comprendre<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Un visiteur non-voyant souhaite acc\u00e9der \u00e0 son suivi de livraison. Il n\u2019est pas recommand\u00e9 de cr\u00e9er des boutons <strong>\u00ab cliquez ici \u00bb<\/strong>. Certains visiteurs utilisent une <strong>plage braille ou une synth\u00e8se vocale<\/strong> pour naviguer entre vos diff\u00e9rentes pages. Privil\u00e9giez donc un bouton avec une <strong>mention plus pr\u00e9cise<\/strong> comme <strong>\u00ab voir votre suivi de commande \u00bb<\/strong> qui sera tout de suite plus parlant pour l\u2019utilisateur.<\/span><\/p>\n<h2><b>\u00c9vitez l\u2019ouverture de nouvelles fen\u00eatres<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Bien qu\u2019une <strong>fen\u00eatre pop-up<\/strong> soit tr\u00e8s utile pour <strong>annoncer une nouveaut\u00e9 ou bien un \u00e9v\u00e9nement<\/strong> et que ce soit pratique pour certains utilisateurs d\u2019avoir une vue sur toutes ses pages ouvertes, cela reste parfois <strong>tr\u00e8s perturbant<\/strong> pour d\u2019autres (notamment les mal-voyants). En effet, une nouvelle fen\u00eatre peut <strong>\u00ab casser \u00bb le rythme de la navigation<\/strong> et <strong>perdre l\u2019utilisateur<\/strong>. Si possible, laissez-lui donc le choix par un simple clic droit, d\u2019ouvrir une autre page ou non. Si toutefois vous n\u2019avez pas le choix, pensez \u00e0 l\u2019indiquer \u00e0 l\u2019aide de l\u2019<strong>attribut qui convient dans votre code HTML<\/strong>.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Rendre son site e-commerce accessible et plus <strong>inclusif<\/strong> permet de <strong>r\u00e9pondre aux besoins de tous les utilisateurs<\/strong> et donne la possibilit\u00e9 de <strong>b\u00e9n\u00e9ficier d\u2019un meilleur trafic<\/strong> et d\u2019une <strong>plus grande<\/strong> <strong>e-r\u00e9putation<\/strong>. Alors qu\u2019attendez-vous pour mettre \u00e0 jour le v\u00f4tre ?<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><!--HubSpot Call-to-Action Code --><span id=\"hs-cta-wrapper-092f8a27-65b8-488c-8f53-d8a7cdfb81df\" class=\"hs-cta-wrapper\"><span id=\"hs-cta-092f8a27-65b8-488c-8f53-d8a7cdfb81df\" class=\"hs-cta-node hs-cta-092f8a27-65b8-488c-8f53-d8a7cdfb81df\"><!-- [if lte IE 8]>\n\n\n<div id=\"hs-cta-ie-element\"><\/div>\n\n\n<![endif]--><a href=\"https:\/\/cta-redirect.hubspot.com\/cta\/redirect\/2680086\/092f8a27-65b8-488c-8f53-d8a7cdfb81df\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" id=\"hs-cta-img-092f8a27-65b8-488c-8f53-d8a7cdfb81df\" class=\"hs-cta-img\" style=\"border-width: 0px;\" src=\"https:\/\/no-cache.hubspot.com\/cta\/default\/2680086\/092f8a27-65b8-488c-8f53-d8a7cdfb81df.png\" alt=\"Comment Petit Bateau a centralis\u00e9 sa gestion des traductions avec TextMaster\" width=\"750\" height=\"200\" \/><\/a><\/span><script charset=\"utf-8\" src=\"https:\/\/js.hscta.net\/cta\/current.js\"><\/script><script type=\"text\/javascript\"> hbspt.cta.load(2680086, '092f8a27-65b8-488c-8f53-d8a7cdfb81df', {}); <\/script><\/span><!-- end HubSpot Call-to-Action Code --><\/p>\n","protected":false},"excerpt":{"rendered":"<p><span style=\"font-weight: 400;\">Saviez-vous que <strong>15 \u00e0 20 % de la population souffrait d\u2019un handicap<\/strong>, qu\u2019il soit visuel, moteur ou encore auditif ? Dans une soci\u00e9t\u00e9 connect\u00e9e telle que la n\u00f4tre, il est plus que crucial de veiller \u00e0 bien <strong>optimiser l\u2019accessibilit\u00e9 de votre site<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">L\u2019accessibilit\u00e9 web se d\u00e9finit par l\u2019ensemble des techniques et pratiques ayant pour objectif de <strong>rendre votre site e-commerce accessible au plus grand nombre<\/strong> (dont les personnes <strong>en situation de handicap<\/strong>) et donc de toucher un [&#8230;]<\/p>\n","protected":false},"author":22,"featured_media":4810,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/fr.textmaster.com\/blog\/wp-json\/wp\/v2\/posts\/4799"}],"collection":[{"href":"https:\/\/fr.textmaster.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fr.textmaster.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fr.textmaster.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/fr.textmaster.com\/blog\/wp-json\/wp\/v2\/comments?post=4799"}],"version-history":[{"count":4,"href":"https:\/\/fr.textmaster.com\/blog\/wp-json\/wp\/v2\/posts\/4799\/revisions"}],"predecessor-version":[{"id":5063,"href":"https:\/\/fr.textmaster.com\/blog\/wp-json\/wp\/v2\/posts\/4799\/revisions\/5063"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fr.textmaster.com\/blog\/wp-json\/wp\/v2\/media\/4810"}],"wp:attachment":[{"href":"https:\/\/fr.textmaster.com\/blog\/wp-json\/wp\/v2\/media?parent=4799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fr.textmaster.com\/blog\/wp-json\/wp\/v2\/categories?post=4799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fr.textmaster.com\/blog\/wp-json\/wp\/v2\/tags?post=4799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}