Web accessibility is a critical component of good web design. Period. It’s just one of the main ways to ensure your website or online store satisfies as many visitors as possible and exudes professionalism.
If you’re running a WooCommerce store, you might be wondering how to make your site more accessible. In this article, we’ll explain why accessibility is imperative and what you can do right now to ensure a more accessible web design.
There’s lots of ground to cover, so let’s dive straight in!
What’s Web Accessibility?
Web accessibility is an often overlooked aspect of web design. For instance, when you design a store using a WooCommerce theme, you might wholly rely on the theme’s template to cover all critical web design areas. Unfortunately, not all themes are created equally, and this doesn’t guarantee the creation of an accessible website.
For the uninitiated, online accessibility refers to how a website is designed and coded to ensure that those living with a wide array of disabilities can access every aspect of your site.
Unfortunately, many websites and apps suffer from accessibility barriers that exclude a large section of society from making the most of these online resources.
If your store is one of those sites, you might be missing out on valuable customers.
When you’re considering accessible web design, you need to think about any and all disabilities that could impact how users access your site. You’ll need to bear in mind those living with disabilities across the following areas:
The Benefits of An Accessible WooCommerce Store
If you’re thinking that those living with disabilities comprise a small part of your audience, think again – one billion people worldwide have some form of disability.
But, extending your reach isn’t the only benefit of an accessible website; as you go about modifying your website to make it more accessible, you’ll also enjoy the following perks:
- You’ll optimize your web design to make it more user-friendly for all website visitors.
- You’ll speed up your website’s load time – which is another surefire way of enhancing the user experience.
An accessible online store does everything possible to ensure it’s usable for the largest number of visitors. Not only is this great for conversions, but it also shows you care about your entire market, which is fabulous for improving your brand’s credibility.
How Accessible is WooCommerce?
How accessible a WooCommerce store is out-of-the-box depends in part on what theme you choose and how you build upon it. WooCommerce’s own Storefront Theme, for example, adheres to accessibility guidelines and integrates seamlessly with WooCommerce.
WordPress has added an “accessibility-ready” tag to its theme directory to indicate which themes are built with accessibility standards in mind.
However, only a small number of themes tick this box. If you use a different template, you’ll need to address accessibility yourself.
Another point worth considering is that most WooCommerce stores use third-party plugins. These might not follow the same accessibility standards adhered to by your accessibility-friendly website template, so you can’t afford to be complacent just because you’re using an accessible theme.
Even if you use an accessible WooCommerce store theme, however, your efforts shouldn’t stop there. You’ll still need to follow the tips below to ensure your web design is as accessible as possible.
How to Make Your WooCommerce Store More Accessible
As I said, you’ll need to keep in mind the various challenges different users might face when navigating your website.
Now let’s dive into some of these areas and discuss what you can do to address them.
Make Your Images Accessible
You can assist visually impaired users by adding alt text to your website’s images. This enables screen readers to ‘read’ the image out to users, providing them with some much-needed context as to what the image depicts.
As a WooCommerce site owner, you can use WordPress’s functionality to quickly add alt text to all your images. To formulate high-quality alt text, consider the most straightforward information about the picture. If it’s an infographic, make sure the alt text indicates the content and references an area of the page where complex imagery is explained in more detail. You don’t need to add alt text where images are purely decorative (e.g., backgrounds), as this can lead to confusion.
Creating Accessible Links
Screen readers may occasionally read a link out of context. This is why it’s essential to ensure each hyperlink includes information on what will happen when it’s clicked.
A bad example might look like this:
- click here
Whereas a better internal link would read:
- For more information, visit our FAQs.
For links where this isn’t possible, you can use an aria-label attribute to add a descriptive tag to the link.
Using Accessible Fonts and Colors
Your font and color scheme is another area you can optimize for accessibility. First of all, make sure you’re using an easily readable font size for all text on your website. Not only will your visually impaired users thank you for this, but so will visitors who want to scan your content rather than read it word for word.
A 16px font is a good starting point for your body text. You may also want to check how your site performs when viewed at a 200% zoom inside an internet browser. After all, this is how many visually impaired users view their websites. This will highlight whether any of your website elements overlap or lose visibility; if that’s the case, you can set about rectifying the problem.
When it comes to font choices, don’t use intricate or cursive fonts for important text. You can use them as a decorative element or as a signature, but your main text should always be easy to read. Stick to a maximum of 2-3 fonts throughout your website.
Your color choices can also significantly impact accessibility, mostly for those living with color blindness. So, make sure your website is usable when transferred into grayscale. This will reveal areas of low contrast. For instance, when placing text on a colored background, make sure it’s considerably lighter or darker than the backdrop.
Headings are another important structural element because they empower screen readers to navigate websites more easily. It’s imperative, therefore, to feature proper heading tags, <h1>, <h2>,<h3>, etc.
H1 should identify the topic of the web page (i.e., the title) and should only be used once on the page. H2 and H3 can then be used to introduce different sections of the content.
People living with motor impairments often navigate their way around the web using only their keyboard, or voice commands linked to the keyboard. Keyboard navigation is therefore an essential aspect of website accessibility.
Keep in mind that the tab button is used to jump throughout the page. You can make sure this is possible by ensuring your page navigation follows the visual flow (left to right, top to bottom). The tab key should let you jump from the header to the main navigation. From there, it should move to any page navigation and link and, finally, the footer.
You’ll have to go through each widget, app, or plugin to ensure they can be exited using the ‘Escape’ button. The key to getting this right is testing your website. Spend time going through each page using only your keyboard; this is a surefire way of highlighting potential accessibility issues.
Testing for Accessibility
We’ve mentioned testing your site using just your keyboard or converting it into grayscale to check contrast. However, there are tools out there that make auditing your website’s accessibility a little easier. The aCe accessibility checker is one of those and completely free solution for finding out how far sites are toward meeting ADA and WCAG compliance.
Winning with WooCommerce Accessibility, Without the Hassle
If all the above sounds like a monumental task, that’s because it truly can be. Accessibility isn’t easy to achieve, and mistakes are easily made. But, if you heed the advice above, you shouldn’t go too far wrong.
This is a guest post from Alex Denning.