Let’s say you have a shiny new, beautifully designed ecommerce storefront. This is it; you finally made your dream of selling Turntables for Kittens a reality by way of the internet. Congratulations! What a time to be alive indeed. However, there’s one major problem here… you focused on a design where timer based carousels with animations of lasers shooting out of the kittens eyes run rampant. To top it off, there are ‘cool setups’ like parallax with a bunch of red text on top of black backgrounds because the artist’s kitten ‘Cat Damon’ inspired them to design your store that way. Truth is, you designed and built your site for a very specific audience and did not even consider customers who cannot properly use your site due to disabilities or age. Now those people are not engaging or interacting with your site. You are losing traffic and site visitors. Conversions are down. It is a catastrophe!
According to the US GOVT:
The large and growing market of people with disabilities has $175 billion in discretionary spending, according to the U.S. Department of Labor. (12) $175 billion is almost two times the spending power of teens and more than 17 times the spending power of tweens (8-12 year-olds), two demographics sought after by businesses. (9,2)
Not only is there a greater opportunity to cater to a larger consumer market to increase your profitability, on the more fundamental level, web accessibility is a basic human right and needs to be treated as such. Thus we, as designers, developers, and storeowners need to do a better job of factoring in these cases and create inclusive web experiences that work for the largest number of people possible and help those with low vision, deafness, dyslexia, anxiety, users on the autism spectrum, and those using screen readers.
Our Director of Accessibility, Nick Goodrum, has already explored what web accessibility is and how to achieve an accessible site in the past, so I will not try to regurgitate anything that has already been said on this blog. Instead, I would like to write about the many simple ways to make your online store more accessible, and ensure that the most people possible can shop at your store.
Lesson #1: Don’t just buy “Random Theme #1” from “GuyinhisGarage”
With the growing popularity of SaaS based ecommerce solutions such as BigCommerce, Shopify, and Demandware, and even with traditional on premise ecommerce solutions with strong communities like Magento and WooCommerce – there are many pre-built themes flooding the market. For a mom & pop startup store – purchasing one of these themes (or even worse, downloading the free ones) is a very quick way of getting your store up and running. While many of these themes are indeed visually pretty, a very large majority of them lack core fundamentals that make an accessible site. Some of them are even not very usable. It may seem like a cost-effective way of getting a quick ROI with your store – but you are most certainly going to be paying for it in the end.
We have seen firsthand how problematic some of these themes tend to be. Hours upon hours can be, and will be, spent trying to rectify the theme issues. Those hours spent paying someone to fix these issues and the loss of potential revenue from not having an accessible store means you will be spending money without making an immediate ROI, so there goes the quick ROI in regards to getting your store online quickly. That is why it is essential to do it right the first time around, even if the upfront costs are a bit higher. So the lesson here is that even though Random Theme #1 built by some guy in his garage is visually stunning and is on sale for a limited time offer, there are often gaps in the true needs for your audience. If accessibility (and even usability) is any concern for your store and the goal is to reach a larger audience for more profitability, sometimes a custom solution or custom theme is the only way to go. This decision is typically where most problems are born, but also the easiest first step to remedy.
Lesson #2: Put yourself in your customer’s shoes
As the storeowner, you may not even know how to determine if a person with a disability is able to interact with your site, unknowingly missing tons of potential revenue from those users. A way to help determine if your store is friendly for all types of users is to put yourself in the shoes of one of your customers with a disability.
Take into consideration a person with low vision who wants to make a purchase on your site. The base font size on your site is 13px – which will almost be guaranteed to be illegible by a person with low vision. Say that person then switches to using a screen reader or audible software to navigate through your site since the content text is unreadable, but there are tons of marketing banners with text in the imagery without proper alt descriptions. Now that person will never know what you’re trying to market on your store and, as a result of your site not being accessible and usable, that person likely won’t make a purchase on your store.
Perhaps after seeing how difficult it is to use your site for someone with an impairment, you might start reconsidering how things were designed and built. I will note custom solutions and custom themes are at times just as guilty as marketplace themes. Even if you paid a Solution Implementer for a custom theme and you expected high quality work – often times you will be disappointed to find out that web accessibility was not considered during design or development. That is why it is imperative to hire the correct Solution Implementer, with a proven track record of success with Section 508, ADA, and WCAG compliance.
Which leads directly into my next few lessons and something Americaneagle.com always takes into consideration…
Lesson #3: Accessibility starts with design…
KISS! Keep it simple, stupid is sort of my mantra in life and it applies here as well. The idea of simplicity in layout and content is important to all users. Your customers do not want to be overwhelmed, so a “mobile-first” approach is a good starting point and a good thing for accessibility in general. There is a reason why some of the most visited and used sites in the world are minimal, efficient, and at times just plain ugly. Those sites are built so that everyone can use them effectively.
Additionally, users with low vision and color blindness absolutely need to be kept in mind during design.
Color contrast levels are important for users with disabilities who may have trouble focusing on text colored similarly in the background. The key takeaway here is creating a design and style that is aesthetically pleasing while not compromising the content or experience for those with visual impairments.
Color blindness, such as red-green confusion, yellow-blue confusion, and monochromacy, can also make it difficult for users with those impairments to determine when a color is used to convey a meaning or action, so it is important to always support it with proper text and even sometimes shapes.
Now do not misinterpret my message here. You do not have to design your site to be boring and make it look like a Microsoft Word Document. If designed with compliance considerations in mind, and vetted by a web developer who understands web accessibility before development begins, you can have a beautiful, usable, and accessible storefront. Not to mention, ecommerce sites usually have the same structure and flow to them. So store owners already have a leg up over their content site counterparts as impaired users will know how they should be interacting with your site. Because of this, you can create a visually stunning site; it’s now up to your developer to translate that into an accessible and usable store.
Lesson #4: …and continues with good development
At Americaneagle.com, we strive to produce better markup and follow certain code guidelines and best practices when developing sites in order to be accessible and usable. Some of those code guidelines include but are not limited to:
Proper heading structures – a clear hierarchy of the most important header to the least.
Visually hidden off-screen content to provide better context to certain sections of your site.
ARIA roles to help assistive device users navigate your site.
Focus styles to help make users aware of where they are on a page - especially important for those navigating the page using just their keyboard.
Skip to main content link so users using screen readers do not have to listen to the same Header and Navigation content on every page they navigate to.
Legible font sizes and no text in imagery.
Alt tags to make an asset’s purpose clear.
Now if the lessons up to this point have been followed and you have an accessible and usable storefront up and running – your responsibility as a storeowner is still not over…
Lesson #5: Accessibility is never “one and done”
One of the common trends we see with storeowners is that they will run some tests, make a few minor adjustments to improve accessibility, and then “call it a day”. Making your store accessible should never be “one and done”. There are often things you did not consider or missed during the initial run through, so GET FEEDBACK from your real-life customers to learn how to make the process of Homepage to Checkout simpler and easier to increase those conversions.
There are also many tools out there to help you test accessibility on your site. Screen readers such as JAWS, which can be pricey, and free alternatives like NVDA are two of the most used audible software packages in the market. Automated testing tools such as Siteimprove, Wave, etc. can help catch a percentage of issues but obviously should not be relied on solely.
Keep in mind; the takeaway of this lesson is that getting feedback, performing audits, and testing your store needs to be ongoing and long lasting.
Some tools for better accessibility:
Color Oracle
http://colororacle.org/
This awesome tool applies a full screen color filter over any web page or application simulating color blindness and shows you in real time what people with common color vision impairments will see.
A11y Checklist
https://a11yproject.com/
This useful site provides clear advice and tips on web accessibility.
WebAIM Color Contrast Checker
https://webaim.org/resources/contrastchecker/
WebAIM are not only advocates for web accessibility, but they provide a cool tool to test the combination of two colors and displays the ratio level and if passes WCAG standards.
Siteimprove Accessibility Checker
https://goo.gl/SQey9t
A nice and easy Chrome extension to perform checks for accessibility issues providing intuitive, visual feedback directly in the browser.
Lighthouse
https://goo.gl/RdA4f2
Quickly becoming one the standard tools in our accessibility arsenal, Google’s open source tool audits the accessibility performance, best practices, and PWA standards of any web page. It’s built directly into the audit panel and can be run instantly.
headingsMap
https://goo.gl/s3xmqr
Yet another great Chrome extension, headingsMap, generates a tree, based on the headings on a page and highlights any that are out of place in terms of hierarchy (or have been skipped entirely).
Partner with Americaneagle.com for Expert Website Accessibility Consulting Services
To sum this up for the “too long; didn’t read” crowd - having an accessible and usable store will, without a doubt, increase profitability, reduce bounce rates, and increase those pesky conversions. Not to mention, on a more human level you are making it a little bit easier for a large number of people to shop online.
Keep in mind that Americaneagle.com provides website accessibility consulting services and has a proven track record in this field and can be your long-term partner in making your site accessible and usable. So, set yourself apart from the rest of the crowded non-compliant online stores and contact us today to take the first step towards accessibility!
In the meantime, cheers to making the web more accessible.
