{"id":4818,"date":"2021-01-14T12:00:16","date_gmt":"2021-01-14T11:00:16","guid":{"rendered":"https:\/\/www.textmaster.com\/blog\/?p=4818"},"modified":"2021-01-14T12:00:16","modified_gmt":"2021-01-14T11:00:16","slug":"7-tips-to-help-you-make-your-e-commerce-website-accessible","status":"publish","type":"post","link":"https:\/\/www.textmaster.com\/blog\/7-tips-to-help-you-make-your-e-commerce-website-accessible\/","title":{"rendered":"7 tips to help you make your e-commerce website accessible"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Did you know that <strong>15 to 20 percent of the population are affected by a disability of some kind<\/strong>, be it visual, movement related or auditory? In a connected, online society such as ours, it&#8217;s absolutely essential to <strong>optimise your site&#8217;s accessibility<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Web accessibility can be defined in terms of the range of techniques and practices used <strong>to make your e-commerce website accessible to as many people as possible<\/strong> (including people <strong>affected by a disability<\/strong>) and thus reach a much wider audience. This will then enable you to <strong>increase traffic and conversions<\/strong> across the various different pages that make up your site.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A well-prepared site will prevent you missing out on <strong>millions of potential visitors<\/strong>. Additionally, <strong>having a digitally accessible website will improve your SEO ranking<\/strong>!<\/span><b><\/b><\/p>\n<hr \/>\n<p><a href=\"https:\/\/www.textmaster.com\/blog\/e-commerce-business-international-tips\/\"><b>Discover how to grow and develop your e-commerce business internationally<\/b><\/a><\/p>\n<hr \/>\n<p><b><\/b>Having and maintaining an e-commerce website accessible to disabled individuals or elderly persons, whose physical or mental faculties may be reduced, means adhering to certain rules:<\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">For the <strong>blind\/visually impaired<\/strong>: there needs to be a way of <strong>listening to your content in audio form<\/strong>, such as through the use of a voice browser for example.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">For <strong>those with a movement related disability<\/strong>: it&#8217;s important to offer them the possibility of <strong>browsing your website without using a mouse<\/strong>.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">These are important aspects to take into account if you want to make your e-commerce website accessible to as many people as possible. There are many things that need to be put in place. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">So here are <strong>seven tips that will help you make your website more accessible<\/strong>. <\/span><\/p>\n<h2><b>Think about the best way to make it ergonomic and user-friendly<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">The <strong>ISO 9241 standard<\/strong> defines usability as follows: <\/span><i><span style=\"font-weight: 400;\">&#8220;The extent to which a system, product or service can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction.&#8221; <\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">It&#8217;s not enough to simply have an aesthetically pleasing website. <strong>Ergonomics and user-friendliness are essential<\/strong> to the design of a quality e-commerce site. In fact, these are aspects that must not be neglected or overlooked. By putting the <\/span><strong><a href=\"https:\/\/go.textmaster.com\/lp-en-ux-content-international-scale\">user experience <\/a><\/strong><span style=\"font-weight: 400;\">first, <strong>you increase the chances that your site will create a positive impression and that users will return to it and tell their friends and family about it<\/strong>. You should even <strong>carefully think about and plan the ergonomics of your website<\/strong> before you actually begin developing it. This involves looking at both <strong>how your pages interface with the user<\/strong> and <strong>how you present your menus<\/strong>, which can all help to make for an easier user experience. Making your website simple to browse will expand your pool of potential customers!<\/span><\/p>\n<h2><b>Use the most appropriate structure<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">A great deal of web content can easily be made accessible by simply ensuring the proper use of <strong>HTML<\/strong>. Webpages are made up of numerous tags that can easily be located in the page code and immediately edited. There are many different types of tags. Each has its own meaning and its own particular effect on the webpage structure. <strong>All tags have a specific purpose<\/strong>. Use them in the right way!<\/span><\/p>\n<h2><b>Keep the form and the content separate<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">If you want your e-commerce site to be highly accessible, remember to<strong> keep your HTML file <\/strong>containing <strong>your content<\/strong> (text, images, menus, etc.) separate from<strong> the CSS file(s)<\/strong> used to define <strong>your website&#8217;s style and format<\/strong>. Doing this both renders the structure of your site more clear and allows you to create multiple different types of design. This will enable you to offer not only text-only versions, which will be <strong>useful for people with certain kinds of disabilities<\/strong>, but also versions with larger text and content better adapted for use with smartphones or tablets, etc.<\/span><\/p>\n<h2><b>Don&#8217;t forget to give your images an alt text (alternative text)<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Alt texts are <strong>short image descriptions<\/strong>. They form part of the HTML code and allow visually impaired users to <strong>find out what images depict without actually seeing them<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As a first step, it&#8217;s important to differentiate between the three different types of images that exist:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Images that provide<strong> a simple piece of information<\/strong>, such as buttons<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Images that provide <strong>more complex information<\/strong>, such as charts or graphs. These kinds of images may use a parameter that links to an HTML page explaining the image content in detail.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Decorative<\/strong> images<strong>, which add visual decoration to e-commerce websites<\/strong> but don&#8217;t add interest in terms of information like a bullet or a frame does.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">For e-commerce sites with product sheets, it&#8217;s essential to use alt texts to <strong>help guide your user<\/strong>s in case they happen to be visually impaired.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These alt texts are an important point to consider. They help to <strong>improve your SEO ranking<\/strong>.<\/span><\/p>\n<h2><b>Correctly adjust the colours and contrasts<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Opt for <strong>colours that are sufficiently different<\/strong> to ensure an easy, comfortable reading experience. Choose a simple combination such as <strong>dark text on a light background<\/strong>: it is critically important to maintain a <strong>strong contrast<\/strong> between the texts and your page backgrounds.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It&#8217;s essential to be aware of the fact that the colours displayed on your screen will not necessarily be the same for all users. This will all depend both on the <strong>screen settings<\/strong> and the <strong>user&#8217;s own eyesight<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>Useful tip<\/strong>: comply with HTML accessibility standards by using universally accessible fonts and typography etc.<\/span><\/p>\n<h2><b>Provide clear information about your hypertext links<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">The less ambiguity there is, the more accessible your website will be!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Links can sometimes lack precision with respect to the pages they lead to. All the buttons and links included in your site need to have an <strong>accurate description<\/strong> so that users know where they lead.<\/span><\/p>\n<h4><b>Example<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">A visually impaired visitor wants to access the order tracking feature to track their order. It&#8217;s not a good idea to create <strong>&#8220;Click here&#8221;<\/strong> buttons. Some visitors will be using <strong>braille terminals or speech synthetisers<\/strong> when browsing the pages of your website. So try to use a button with a <strong>more precise description<\/strong> such as <strong>&#8220;Track the progress of your order&#8221;<\/strong>, which will immediately be more informative to the user.<\/span><\/p>\n<h2><b>Avoid opening new windows<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Though a <strong>pop-up window<\/strong> can be very useful for <strong>advertising something new or an event of some kind<\/strong>, and some users find it convenient to be able to see all the pages they have open, it can still nevertheless be a <strong>serious hindrance<\/strong> to others (particularly the visually impaired). A new window can essentially <strong>&#8220;break&#8221; the browsing rhythm<\/strong> and <strong>cause the user to lose their way<\/strong>. If possible, therefore, give them the choice of opening another page or not by requiring them to make a simple right click. If you have no choice and have to do it, however, remember to inform the user by using <strong>the appropriate attribute in your HTML code<\/strong>. <\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Making an e-commerce website accessible and more <strong>inclusive<\/strong> both enables you to <strong>meet the needs of all users<\/strong> and offers the potential advantages of <strong>increased traffic<\/strong> and <strong>a stronger<\/strong> <strong>e-reputation<\/strong>. So why wait any longer? Start updating your website today!<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><!--HubSpot Call-to-Action Code --><span id=\"hs-cta-wrapper-d758ae99-256c-424f-8ebd-cc03e86a6df4\" class=\"hs-cta-wrapper\"><span id=\"hs-cta-d758ae99-256c-424f-8ebd-cc03e86a6df4\" class=\"hs-cta-node hs-cta-d758ae99-256c-424f-8ebd-cc03e86a6df4\"><!-- [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\/d758ae99-256c-424f-8ebd-cc03e86a6df4\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" id=\"hs-cta-img-d758ae99-256c-424f-8ebd-cc03e86a6df4\" class=\"hs-cta-img\" style=\"border-width: 0px;\" src=\"https:\/\/no-cache.hubspot.com\/cta\/default\/2680086\/d758ae99-256c-424f-8ebd-cc03e86a6df4.png\" alt=\"How Petit Bateau centralised its translation management with 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, 'd758ae99-256c-424f-8ebd-cc03e86a6df4', {}); <\/script><\/span><!-- end HubSpot Call-to-Action Code --><\/p>\n","protected":false},"excerpt":{"rendered":"<p><span style=\"font-weight: 400;\">Did you know that <strong>15 to 20 percent of the population are affected by a disability of some kind<\/strong>, be it visual, movement related or auditory? In a connected, online society such as ours, it&#8217;s absolutely essential to <strong>optimise your site&#8217;s accessibility<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Web accessibility can be defined in terms of the range of techniques and practices used <strong>to make your e-commerce website accessible to as many people as possible<\/strong> (including people <strong>affected by a disability<\/strong>) and thus [&#8230;]<\/p>\n","protected":false},"author":22,"featured_media":4811,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"_links":{"self":[{"href":"https:\/\/www.textmaster.com\/blog\/wp-json\/wp\/v2\/posts\/4818"}],"collection":[{"href":"https:\/\/www.textmaster.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.textmaster.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.textmaster.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.textmaster.com\/blog\/wp-json\/wp\/v2\/comments?post=4818"}],"version-history":[{"count":1,"href":"https:\/\/www.textmaster.com\/blog\/wp-json\/wp\/v2\/posts\/4818\/revisions"}],"predecessor-version":[{"id":4822,"href":"https:\/\/www.textmaster.com\/blog\/wp-json\/wp\/v2\/posts\/4818\/revisions\/4822"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.textmaster.com\/blog\/wp-json\/wp\/v2\/media\/4811"}],"wp:attachment":[{"href":"https:\/\/www.textmaster.com\/blog\/wp-json\/wp\/v2\/media?parent=4818"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.textmaster.com\/blog\/wp-json\/wp\/v2\/categories?post=4818"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.textmaster.com\/blog\/wp-json\/wp\/v2\/tags?post=4818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}