Widening your reach: Creating an Accessible WooCommerce Store

Web accessibility has to do with how a website is coded and designed. Its goal is to make sure people with different disabilities can access every part of your website. If you sell products online, it's important to have an accessible WooCommerce store.

A problem many websites and apps have in common is the accessibility barriers that prevent people who are disabled from accessing information and functionalities on your WordPress website. Taking accessibility barriers into consideration is important for WooCommerce stores. They may prevent potential customers from accessing every part of your website.

In this article, we’ll take a look at how accessible WooCommerce is out of the box and how you can get an accessible WooCommerce store of your own.

Accessible WooCommerce stores

As an agency, your goal should be to design a more accessible WooCommerce store. People with auditory, visual, motor, or cognitive impairments should be able to access your WooCommerce store without having to worry about any accessibility issues. According to a World Health Organisation study, 15% of the world’s population live with some sort of disability, and so by failing to provide an accessible store you could be excluding up to 1/6 of people from accessing your services.

Providing customers with a better, accessible website is also crucial for enhancing SEO and reducing page load speeds.

All new and updated code put out in WordPress should be compliant with the guidelines as per the WordPress Accessibility Coding Standards. Additionally, WordPress is looking forward to making the WordPress admin and themes fully WCAG 2.0 Level AA compliant. The Authoring Tool Accessibility Guidelines version 2.0 are guidelines that govern how to make a tool for creating web pages that are both accessible and encourage more accessible content to be created. The WordPress Accessibility Coding Standards also require newly updated code to meet the requirements of the Web Content Accessibility Guidelines or WCAG version 2.0 at Level AA.

Agencies should aim to provide good accessibility while keeping in mind the potential risks of building a WooCommerce store that isn’t compliant. These include people not being able to access or use your website properly, which results in potential customers turning away from buying, and eventually, lost sales.

It’s also worth mentioning that there are potential legal consequences for failing to provide web accessibility as governments and regulators are mandating laws and policies that strengthen the rights of disabled people when they participate in any online service.

How accessible is WooCommerce out of the box?

Now, you might be wondering: How accessible is WooCommerce out of the box?

The short answer is that it depends.

WooCommerce can be accessible, but it depends on how your store is built. You can certainly make WooCommerce accessible by making the right decision on components such as using core WooCommerce features and an accessible WordPress theme and third-party plugins. The only problem is that most stores do not currently have all of these listed components as accessible.

The Storefront theme, for example, is completely accessible and works perfectly with WooCommerce. This doesn’t mean every other theme will be accessible, however. You can search the WordPress Theme Directory by using the “accessibility-ready” tag to find themes that have accessibility built into them.

But having an accessible theme isn’t all you need to make your whole WooCommerce store accessible. Third-party plugins used for building WooCommerce stores may not always conform to the standards of accessibility that the core WooCommerce plugin has.

Even if you’re using accessible plugins, it doesn't mean that your whole store will be accessible. You'll need to add ALT text, accessible colors, and accessible headings. This can be challenging to implement manually - but these are necessary steps to have an accessible WooCommerce store.

What kind of things need to be made accessible?

Let’s take a look at a few things that should be improved to make your whole WooCommerce store more accessible:

Images

Images can assist people who are visually impaired if they have ALT text added to them. This can help such people “read” the image using a screen-reader and understand what’s going on in the picture. In your WooCommerce store, you can use WordPress’ built-in functionality for adding ALT text to your images.

By providing clear, to-the-point information about your image, you can create high-quality ALT text for users to easily understand. You also don’t need to make a mess and add ALT text to every image on your WooCommerce store. Images like backgrounds or wallpapers don’t have much context for users to “read” about.

Acronyms

According to web accessibility guidelines, a mechanism for identifying the expanded form or meaning of abbreviations should be made available. You should aim to provide the expansion of an acronym for its first occurrence on the page immediately before (or after) the expanded form.

For example, instead of simply writing World Health Organization and then referring to it as WHO elsewhere in the article, you’d write World Health Organization (WHO) for its first occurrence.

Another way to do this is by using the abbr element in HTML. An example is <p>Sugar is commonly sold in 5 <abbr title="pound">lb.</abbr> bags.</p>.

Contact forms

It’s important to make contact forms and checkout forms on your WooCommerce store accessible to all types of users. For example, instead of simply outlining a form field with red to indicate a required field, you could write Required field next to it or use an icon whose ALT text indicates that the form field is required.

With forms, it’s important to use icons, symbols, and error messages wherever possible instead of color alone to indicate errors in filling out the form.

Links

The same screen readers that “read” out an image may also need to read links. By adding useful information on hyperlinks, you can make it more accessible for screen readers. It lets users know what the link does or leads to before users actually click it.

For instance, providing a hyperlink “click to continue” is not an accessible way of putting hyperlinks. Instead, by saying, “ click here to read more about the mattress product,” we create a much more accessible hyperlink for your WooCommerce store. You can also use an aria-label attribute to add descriptive tags for links that need it.

Fonts and text

The style of your fonts and the colors you decide to use have a huge impact on improving the accessibility of your WooCommerce store. First, use an easy to read font size for all text on your WooCommerce store.

This will improve accessibility not only for visually impaired users but also for people who want to scan your website for information. Using a 16px font is usually a solid starting point for your body text. This makes it easy for users to read the text even if you use a decorative font.

Do keep in mind that cursive fonts should not be used for important text to facilitate better readability and accessibility. Use 2 to 3 different styles of fonts throughout your WooCommerce store. Keep decorative fonts only for signatures or design elements and clean fonts for the main text on your WooCommerce store.

How do you get an accessible WooCommerce store?

So, how do you get an accessible WooCommerce store?

One way would be to audit it manually and add everything by yourself. However, a better option would be using a solution like accessiBe to take care of everything for you. accessiBe takes care of auditing and offers a variety of features that can help you make your store more accessible.

Here’s what you can expect to get with accessiBe:

• Automatic screen-reader adjustments. accessiBe uses AI learning to analyze and scan data so that it can interpret the same way sighted users do. With the use of ARIA attributes and behavioral adjustments, accessiBe allows blind users to easily navigate through your WooCommerce store and make purchases.

• Keyboard navigation adjustments. Users are able to navigate your entire site by using keys such as the Tab key, the arrow keys, and the ESC key on their keyboard. accessiBe allows users without a mouse to access all the normal functionality of the website, such as pop-ups, forms, dropdown menus, and buttons.

• UI & Design adjustments. accessiBe, with the help of the accessibility interface, allows users to tweak the design and the UI of the site. Users can customize fonts, enlarge the cursor, and change contrast and color levels for better accessibility. accessiBe also allows users to change the scaling, sizing, and spacing on texts. You can do all of this without sacrificing readability or useability.

• Daily Compliance Monitoring. accessiBe also has you covered on reliability. It protects businesses from litigation by re-scanning and fixing accessibility issues every 24 hours.

• Monthly Compliance Auditing. You don’t have to worry about missing your audits. accessiBe sends you a professional compliance audit every month via email.

Conclusion

Hopefully, you have a better understanding of how accessible WooCommerce is out of the box and what can be made more accessible. Using accessiBe, you can make your online store more accessible in a few simple steps.

Ready to start making your WooCommerce store more accessible? Get accessiBe today!