Posted on

How to make your WooCommerce store accessible

Storefront Theme

There are many owners of online stores who seem to think that their websites are of no interest to people with disabilities, or that the percentage of people with disabilities that could visit their stores is so small, that is not worth the investment needed to make their websites accessible. But statistical facts paint a completely different picture.

According to the the World Health Organization there are at least 285 million people worldwide who are visually impaired. Of those 39 million are blind and 246 have low vision. If we take into account the number of people globally suffering from refractive errors, the figure is somewhere between 800 million and 2.3 billion.

Global Blindness: and visual impairment

Only in the U.S. there are close to 60 million people with disabilities. All disabilities are included in this figure, some of which are irrelevant to website accessibility. But if we only take into account sight and hearing impairments, which are the most common disabilities affecting website accessibility, we find that these specific impairments affect over 7% of the population age 15 years and older, and 22% of the population over 65 years old. 82% of this last population also suffers from difficulty grasping objects, such as a computer mouse.

All these statistical facts prove that those you previously may have dismissed as a minority group of people with disabilities are in fact a large and important part of potential visitors who have the financial resources and the experience to become a very important customer of your online store, whether they buy products for themselves or in many other cases for relatives and friends. They can even be the very same people who purchased products from your website not long ago, but because of a deteriorating health condition or an accident, they may no longer be able to browse through your website and are forced to surf away to an accessible website in order to find similar products they can purchase.

Global Blindness: and visual impairment by age

Once you realize how important it is to make your online store accessible, the next step forward involves testing your website from the point of view of a person who suffers from any of the disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities, as described by the World Wide Web Consortium in their Web Accessibility Initiative.

There are free online tools that can help you emulate the experience of a person with disabilities. One of the most complete and useful is WAVE (Web Accessibility Evaluation Tool) which is developed and made available as a free community service by WebAIM. WAVE inspects any given web page and produces a Summary that lists Errors, Alerts, Features, Structural Elements, HTML5 and ARIA, etc.

WAVE logoWAVE displays accessibility information in different Views:

  1. Styles View presents your page with the embedded accessibility icons and indicators. This is the default view with most WAVE features enabled. Because of the complexity of this view, reports for some complex, CSS-powered layouts may become difficult to read. If this occurs, you can select the No Styles View.
  2. No Styles View displays your page with styles disabled and tables linearized, thus revealing the unstyled HTML and the WAVE icons and indicators. This view also presents the underlying reading and navigation order, the order in which keyboard-only and screen reader users will access the page.
  3. Contrast View shows only contrast issues on your page, based on WCAG 2.0 guidelines. You can use the tools in the details panel to review your color contrast, and even get updated colors that meet these guidelines.
  4. In addition to the views above, you can select the Code tab at the bottom of the page to view the underlying markup of your page.

WAVE does a pretty good job of explaining and providing solutions about the accessibility issues it comes upon. If you could only use one tool to test the accessibility of your website and online store, WAVE should probably rank first.

There are also a number of WordPress and WooCommerce specific tools, in the form of plugins and widgets. We are listing some of the most important below.

Access Monitor

Access Monitor

The ‘Access Monitor’ does two things to help you test your site for accessibility.

First, it automates your accessibility site audits by scheduling weekly or monthly reports, and get notified each time one runs. You can test a specific set of pages, and return a list of different accessibility issues.

Second, it only reports accessibility issues that are machine-testable, and although you can miss some issues that way, in the end it will save you time sent otherwise with false positives.

Accessibility Widget

Accessibility Widget

The ‘Accessibility Widget’ plugin adds a sidebar widget to change text size in your WordPress or WooCommerce site.

You can set the following options in the widget:

  • Resize the content inside HTML and CSS tags.
  • Set font sizes.
  • Set controller text.
  • Set tooltip text on mouse hover.

wA11y – The Web Accessibility Toolbox

wA11y
The ‘wA11y – The Web Accessibility Toolbox’ plugin is open source software that helps you evaluate and improve the accessibility of your website or online store by providing information, education, resources, and tools.

WP Accessibility

WP Accessibility
The ‘WP Accessibility’ plugin helps you to easily deal with a variety of common accessibility problems in WordPress and WooCommerce Themes by adding a number of helpful accessibility features that can be applied by anyone with a minimum amount of technical knowledge.

All of the functions based on modifying stylesheets can be customized using your own custom styles by placing the appropriate stylesheet in your Theme directory.

These are valuable resources that should keep you busy identifying and amending many of the issues that prevent your online store from being accessible to everyone. If you do things right you will improve the user experience of both people without any disabilities and those whose disabilities force them to struggle to make sense of the content of your website. Having an accessible website will soon translate into a spike in visitors, which will likely affect the conversion rate of your website.

All the software listed above is Open-Source, meaning its source code is open for anyone to inspect, modify, and enhance. You can also use it free of charge, but if you need help please don’t hesitate to contact us and we’ll be happy to help you make your WooCommerce website accessible.


Update:

As a member of the AccessibleWeb Team I was asked to give a presentation about this topic on May 19th and 20th during the ‘HACK-cessibility Days‘, an awareness event for software developers, designers, manufacturers, and others. Family affairs ultimately prevented me from attending, but you can still view and download the original presentation from:
https://docs.google.com/presentation/d/1vVeD1PfQXOHGN75mLYrFSmM7mTJfkzYpqxDz9G1XtDo/

Additionally, we will be holding a Google Hangout during the next weeks, with a Questions and Answers session afterward. If you would like to join us please contact us before June 1.

Leave a Reply

Your email address will not be published. Required fields are marked *