The accessibility of a Shopify store or an online store's product customizer might not be the first thing businesses consider. However, when your ability to interact with eCommerce depends on it, it's a pretty big deal.
Oftentimes, people with disabilities have a greater need for product customization options and online stores. That's why it's so important to understand web accessibility. Let's go over what it means and how you can make your product designer usable for everyone.
What Is Web Accessibility?
Web accessibility refers, quite literally, to the ability of users to access content on the web. Basically, it's about creating web content—which includes everything from text, images, videos, and audio to design, font, colors, and code—that anyone can access, including people with disabilities. Accessibility falls into two basic categories: sensory and interactive.
We'll go over both and give helpful examples.
Sensory Accessibility
Sensory accessibility is about making sure your content can be consumed by people with disabilities that affect their senses, like visual or hearing impairments. If someone is visually impaired, they might find certain fonts, text field sizes, or color combinations difficult to view. Blind users might utilize a screen-reader, and the deaf or hearing impaired would need video captions.
Disabilities with common sensory accessibility concerns include:
In addition, people with certain types of neurodiversity might also require accessibility features. Neurodiversity refers to the variation in the way the human brain works.
Not everyone's brain will perceive or process information in the same way. The category typically refers to things like ADD, ADHD, and ASD (Autism Spectrum Disorder).
Some people are better at recognizing patterns or processing visual information, while others may be less adept at following complex site navigation or have trouble focusing on long blocks of text. It's also quite common, for a range of reasons, for people to have trouble with moving animations, flashing lights, or audio that starts playing without a manual trigger.
These conditions affect everyone differently. While most neurodiversity advocates do consider these to be disabilities, many of the struggles are not caused by their underlying neurology but rather by the world's reaction to them.
In many respects, simple accommodations and understanding would limit or eliminate some of the adverse effects they live with.
The neurodiversity movement is a perfect example of why accessibility is of such paramount importance. In many cases, people aren't limited or disabled by their diagnosis as much as they are by society's response to their differences.
Interactive Accessibility
Interactive accessibility is all about facilitating different methods for using the interface. For example, people with motor skill issues might need to use the keyboard instead of the mouse. Others may use voice controls to interact with content. Some other accessibility issues that might exclude them include forms with time limits and clickable elements that are very small or close together.
Disabilities with common interactive accessibility concerns include:
- Chronic pain conditions that limit movement
- Mobility issues and conditions affecting fine motor control
- Movement disorders causing tremors or spasms
- Amputation
What Are WCAG Standards?
Web Content Accessibility Guidelines (WCAG) are a set of widely accepted standards and best practices for web accessibility. The WCAG has been codified into law in many countries, particularly in regard to government and public sector websites.
Most countries have laws regarding web accessibility. The United Nations Convention on the Rights of Persons with Disabilities—which 184 nations are party to—specifically addressed accessibility in regard to information and communication, including the internet, as a basic human right.
Accessible Web Design Considerations
WCAG standards break the elements of accessible web content into four categories: perceivable, operable, understandable, and robust. Let's take a deeper look:
- Perceivable: The content should be easy to see/hear and have alternative mediums (e.g., ALT text for images and captions on videos). It should also retain its meaning across mediums, including accessibility aids (like screen readers).
- Operable: All functionality should be accessible using different input methods (like a mouse, keyboard, and voice controls). It should also be easy to navigate and locate content. Time limits should be adjustable, extendable, necessary, or possible to disable. It also can't cause seizures or other physical reactions.
- Understandable: Any text must be easy to read and comprehend, and elements should react in predictable ways. Also, the platform should allow for the easy avoidance or correction of errors.
- Robust: Content should be compatible with a wide variety of accessibility tools and accommodate as many as possible.
Here's a Quick Reference Guide that acts as a template for creating an accessibility checklist. It goes much more in-depth on each criterion.
Tips for Making Your Product Customizer Accessible
There are simple things you can do to make your online store and product configurator or product customizer more accessible. Here are some helpful tips.
On-Page Performance
- Evaluate your product page elements. Then ask yourself what you'd need if you didn't have the senses used to perceive them.
- Custom product photos should have descriptive ALT text for screen readers.
- All text should be reasonably large and in a readable font. It should also have good contrast and have short sections instead of large blocks.
- Avoid functionality that requires actions some users might find difficult or impossible, like having them drag and drop JPGs and PNGs onto the page to add images and clipart to t-shirts. If you have a feature like that, make sure there's also a simple option to click a file upload button. Make bulk actions simple to understand and use.
- Make sure your customizable product pages are accessible across all devices and systems. Your product customizer app should work well on Android, iOS, desktops, laptops, tablets, and smartphones.
- A great app appears correctly in all formats. This includes making sure product options and product previews are easy to see on smaller screens. Also, confirm that pricing is clearly visible in all formats. Then configure dropdown menus and checkboxes so they aren't too small or close together to easily click with a finger.
Compatibility and Communication
- Your product customizer app should work with accessibility tools like screen readers. Make sure you have everything set up correctly on the backend for the screen reader to work properly. Double-check that the screen reader adequately describes your visual product design options.
- Make sure your customers can reach your support team in a variety of ways, not just over the phone. Then all users can contact them if they encounter issues while customizing their own products.
Click here to learn about Threekit's Product Customizer or find out about our integrations for WooCommerce, BigCommerce, Magento, and Shopify. You can also find our app with free installation in places like the Shopify app store.
The Bottom Line on Product Customizer Accessibility
The internet is a unique place. It's everywhere but has no physical location, and the seemingly infinite world you see is merely a superficial glimpse of this vast digital iceberg's surface. The real complexity lies underneath. While many contemplate the magic and mystery of the internet, the accessibility aspect often gets overlooked.
For some, the internet is the one place where they can transcend the limitations of their physical body. People who live with disabilities often struggle to navigate the world around them because, unfortunately, it isn't built with them in mind. On the web, however, they can go anywhere and do anything thanks to the widespread implementation of accessibility features.
Buying customized products can be difficult for many people, so eCommerce retailers should make it as easy as possible. Accessibility really makes a huge difference. Life can be painful for disabled and neurodiverse people, not because they're any less capable, but because they live in a world that simply isn't made for them. They shouldn't have to go looking for Shopify products only to find that the Shopify store doesn't fit their needs.
Get in touch to learn more about how Threekit's product customization platform can help you create the best customer experience possible.
