Ecommerce and Retail • Ecommerce Design
How to Make an Ecommerce Site Accessible Without Compromising on Design
15 Feb 2019 • 4 min read
According to the World Health Organisation, about 15% of the population live with a disability. Just as physical things like stairs can make the built environment difficult for a person with a disability to navigate, certain things in the digital environment—like design—can make websites difficult to read, navigate or interact with.
For an ecommerce store owner, if your website isn’t usable for people with a disability, whether it’s auditory, cognitive, neurological, physical, speech or visual, you’re effectively “closing” your store to a significant portion of shoppers.
And just as you can add a ramp to enable access to a building, there are certain things you can do to your ecommerce site to make it accessible to all—this is known as web accessibility.
Accessibility is the practice of designing products, devices, services, and environments for people with disabilities, and on the web, this means adhering to a set of guidelines to maximize every user’s web experience.
Here are the 5 most essential accessibility principles to consider to ensure your website is accessible.
Many people with disabilities use screen readers, which is a device that reads out loud the content that is on the screen. To ensure that screen readers can understand the way your webstore is laid out, you should write all of your page titles, headings and subheadings in a way that makes logical sense.
Make sure that the <h1> tag is only ever used for the title of the page. Subheadings should be tagged as <h2> and not be skipped past so that screen readers understand in what order they should read the page. Check out our article on SEO optimization that goes into more detail on how you can check these on your webstore.
Slideshows and dynamic pop-ups look great and can really help sales, but it is important to know that screen readers may not be able to read these parts of your site. They can also cause some people to be trapped where the screen reader doesn’t know how to exit the pop-up or image slide which isn’t a great user experience.
It is best practice to either make this content available on the main page or ensure that it doesn’t contain any critical information that can’t be read elsewhere on your store.
Alt text is that little description you see when you hover over an image, and it is crucial for people who need to use screen readers to browse your store to understand what an image is all about. There will be space in the content management system (CMS) in your ecommerce platform to add this text, so double check that all of your product images and banners have alt text that is descriptive and makes logical sense.
For example, for an image of a camping chair, you might use ‘adult folding camping chair blue’, rather than just ‘chair’, or even worse, img-1345069.
Neto users check out these instructions for how to do that in Cpanel.
Sometimes it’s really easy to direct users elsewhere on your store by using “click here” or “read this” to get them to go where you want. However, these can be hard to follow for viewers who may have a learning disability. If your links look like this, try being a little more descriptive. Instead of saying “Read more about us here.” try saying, “Read more about us on our story page.”
| Related Reading: The Power of Good Website Navigation, and How to Harness It for More Conversions
While this doesn’t apply to screen readers, some shoppers are going to have more trouble than others if they need to squint to read your headlines. Make sure your fonts are simple and avoid unnecessary dips and curves (that means no papyrus or cursive fonts!). Stick with one for headlines and another for paragraph text, such as Arial or similar “sans serif” fonts.
Improving your site accessibility isn’t just a nice thing to do, it benefits those who are disadvantaged, helps you reach more customers and improves SEO.
If you’d like to find out how accessible your webstore is, check out this free tool from WebAIM that gives you an interactive report showing you improvements that you can make to your site.
