‘You shouldn’t test the patience of your customers.‘
I bet most e-commerce business owners can agree to that statement.
With the sheer number of alternatives available for online shoppers, a complex or confusing shopping experience will have visitors leave your site instantly. We’ve touched upon the subject of shopping cart abandonment before – click here to read it.
When the shopping experience can make or break a sale, it’s easy to imagine how not being able to use the site at all will hinder a lot of sales.
Conversion rate is king in online shopping. You know this by heart. You’ve probably already spent hours making sure your website works in various browsers, but let me ask you this:
Have you made sure it works with various people?
In this article, I’ll explain the concept of accessibility and provide you with 8 basic take-aways on how you can make your website inclusive.
Inclusive design to the rescue!
An important aspect of online user experience is accessibility (or inclusive design).
Even though optimizing for accessibility is a relatively cheap way to ensure a solid shopping experience for your customers, it’s often overlooked.
That’s a shame, because the concept of web accessibility is quite simple, and it has a huge impact.
Let’s do an analogy …
Imagine that you own a multi-story store in the center of London. There are no parking spots, only one narrow, manual entrance door for all your customers to use, a door threshold that half your customers bang their feet on, and the only way to move between floors is to navigate a set of steep stairs that are hidden away in the back of the store behind yet another door. Your products are disorganized, and many of them require a ladder to reach.
Surely, we can agree that this setup does not make for a great shopping experience – and it’s definitely not accessible.
Now imagine another store next door that offers the same selection of products as your store. It has a dedicated parking garage, big automatic sliding entrance doors with no threshold, multiple elevators located close to the entrance, organized product sections with maps, and everything can be reached without assistance. Their products, however, cost ever so slightly more than yours.
Where do you think your customers will go?
A person in a wheelchair would have trouble even entering your store and would be excluded from visiting your other floors. Meanwhile, in the store next door, wheelchairs are no problem, and everyone benefits from the elevators. A person on the autistic spectrum would have a hard time or even be unable to navigate through your disorganized products, while everyone benefits from the organized approach next door.
Not only is the second store accessible, it also makes for a better user experience for everyone.
Online shopping is a different story.
The field of online user experience and usability is nowhere near as mature as the old-school shopping experience in a brick-and-mortar store. Moreover, many online shopping experiences are delivered by people who never met your customers. Do they know your customer segment? Do you know your customer segment?
According to the WHO, approximately 15% of people globally live with disabilities, including approximately 8% of the total population who are visually impaired or blind.
Are you ready to cut off 15% of all people from browsing your e-commerce site? And potentially lose more of your customers by not providing the best possible experience?
We haven’t even considered people who are temporarily or situationally disabled. You can probably imagine the difficulty in browsing with a broken arm (temporary), while holding a baby in your arm (situational), or walking outside with the sun reflecting on the screen of your smartphone, making it hard to browse a website with too low contrasts in its design (situational). There are many ways inaccessible websites affect us all.
Designing for accessibility doesn’t guarantee great usability, but great usability that is inaccessible doesn’t exist.
Now, let’s explore what you can do to make your website accessible, and use inclusive design to boost your online sales.
1. Make sure your site is responsive
Responsive means that your website automatically scales to any screen size and delivers an optimal experience whether the customer uses a smartphone, a tablet, or a computer.
With mobile payments trending (a study showed that mobile shopping accounts for one-third of online purchases in the US), this is something you should be doing already.
An often-overlooked benefit of having a responsive website is that the site also scales properly when zooming.
This helps the visually impaired significantly.
If you don’t already have a responsive site, show this handy guide to your developers.
Otherwise, there are plenty of resources on the internet to help you.
2. Support multiple types of user input devices
Many websites only support navigation via the mouse. This creates problems for users with a touchscreen device, users who are limited, e.g. people who are blind, and for users who prefer to use the keyboard only.
Menus that activate on hover is a common example of limited support of user input type – i.e. this specific feature is not available if you’re using a touchscreen or keyboard only.
This is not only limited to mouse users but also makes it difficult to navigate the site for people with physical or motor disabilities.
Another example is interactive elements, such as links, input fields, and buttons, with no visible focus state when navigating by tabbing.
Try to navigate your entire site exclusively with the keyboard, the mouse, and touch, respectively.
If any of them is not sufficient or confusing in isolation, you need to work on supporting multiple types of user input devices.
3. Create a simple, linear layout
Ask any web developer about the most important aspect of web design, and they’ll cry out in unison:
Don’t make people think!
But, ironically, it’s easier to add complexity than to remove it.
If the flow is simple, to the point, and intuitive, everyone benefits. If not, it can be highly distracting, especially for people on the autistic spectrum and the dyslexic.
There are many ways to make your website as simple as possible. Examples include:
- Support icons with text,
- Highlight clearly when a part of the text is a link,
- Avoid forms as much as possible, and make the necessary ones minimal and simple,
- Use whitespace intelligently to create context,
- Avoid too much text and use simple sentences in plain English.
Whatever you do, make sure you’re consistent.
4. Optimize readability
An unfortunate trend these days is to use low color contrast, for instance with muted colors, in some parts of a webpage to highlight other parts of the page.
Regardless of the reason for having low contrast on some parts of a page, it creates a problem for the visually impaired. Not everyone has 20/20 perfect vision and is using a high-quality IPS/AMOLED retina display in an indoor setting.
Your site might look good in some situations, but you’re never guaranteed how your content is displayed in the user’s context nor the ability of the user.
Likewise, never use color alone to convey information, for instance by having a specific color represent whether the user did something correctly or not. Color blindness is prevalent, and there is no standard for what colors mean to people.
It’s important to test with a variety of setups in various contexts, or at the very least provide an option to turn on high-contrast mode.
Here’s a great tool by Lea Verou to calculate contrast ratios between colors. Use it to verify your content.
Great design should never come at the cost of great readability. Both can definitely exist at the same time.
5. Always provide a text alternative
Whenever non-text content is presented, such as an image, a video, or a diagram, make sure you always have a text alternative. Not only to help the visually impaired, but also everyone else when the content is not properly displayed.
For videos, make sure to include subtitles. This makes the video accessible for deaf or hard-hearing, as well as users who are not native speakers and might have trouble understanding your content. And let’s not forget people who haven’t or can’t (for whatever reason) turn on audio.
6. Test with a screen reader
Many visually impaired and blind people are using screen readers to complement or use in place of a screen.
Test your site with your screen off and with a couple of screen readers. Each screen reader performs differently in different browsers, so it’s important to at least support the most widely used screen readers. You can check out NVDA and JAWS for Windows, ChromeVox for the Chrome browser and Chrome OS, Talkback for Android, and VoiceOver for macOS and iOS, and more.
The WAI has created guidelines on how to enrich websites and applications with accessibility-related features. This initiative is called Accessible Rich Internet Applications (WAI-ARIA or simply ARIA).
You can find an overview and several tutorials for ARIA attributes here, or you can visit the official reference here.
7. Use semantic markup
Screen readers can navigate a website differently than when a screen is present.
By using appropriate elements for your HTML, such as <nav> for navigation elements, <header> for header content, and appropriate use of headings, screen reader users can jump to content easier and don’t have sit through and listen to all of the content of a page before they get to the part they’re interested in.
A protip: Fix your HTML elements while you’re doing your search engine optimizations – find a resourceful guide here.
8. Make sure your peers understand the importance of accessibility
It might seem like optimizing accessibility is a very expensive process. As a developer, let me assure you that the challenge is only marginally greater than the effort of creating an e-commerce store in the first place.
The real challenge lies in convincing your peers that this is something that needs to be done, and to make your company adopt an emphatic and inclusive mentality.
The statistics on the prevalence of disabilities presented in the previous section should speak for themselves. Otherwise, as you know, there are plenty of benefits for everyone to enjoy, too.
The Home Office of the government of the United Kingdom has taken an amazing initiative to create posters that highlight the do’s and don’ts of designing for web accessibility, and you can find all the posters here.
One of the posters from the initiative.
At this office, it made a significant impact when I put up these posters on the wall for everyone to see. It made people realize how important inclusive design really is and it’s and easy way to spread the message in a nice and digestible way.
They’ll only cost you some ink and paper, and they’re available in multiple languages.
A strong chain has no weak link
Let’s say your e-commerce store is accessible, and you live and breathe inclusive design.
You probably have a couple of plugins installed in your e-commerce store, or you’ve done integrations with other services. If at any point these external dependencies are inaccessible, your chain is possibly broken.
You must ensure that all of them live up to your standards of accessibility, or your efforts would be wasted.
Unfortunately, neither accessibility nor usability receives a lot of attention in the financial technology industry.
Now, you didn’t think we’d drop this on you without a solution, eh?
Of course, we’ve made sure that our solution for online payments, Bambora Checkout, is accessible.
Amongst other things, Bambora Checkout:
- Works with screen readers. *
- Complies with the AA standard for contrast color ratios.
- Adheres to a simple, linear layout.
- Uses live in-line validation for better feedback and ease of use.
- Uses colors, text, and icons everyone can easily see, including the color blind.
- Adapts seamlessly to all screen sizes as it’s 100 % scalable.
- Supports all input types in isolation.
And what does this mean to you?
Well, it means that anyone will be able to effortlessly pay on your e-commerce site.
You can pay effortlessly using only keyboard, only mouse, or only touch.
You can pay in situations with bad lighting or if you’re visually impaired (including color blind).
You can pay using a screen reader.
You can pay with any screen or device.
Sounds good?
It is.
If you want to see how it all works, you can get a free test account here and try Bambora Checkout yourself.
No credit card required, and no strings attached.
That’s it for me. I hope you enjoyed this article.
* We’ve tested Checkout with the following platforms and tools:
- Windows: ChromeVox (Chrome), NVDA (Chrome, Firefox, Internet Explorer, Edge), JAWS (Chrome, Firefox, Internet Explorer, Edge).
- MacOS: VoiceOver (Safari, Chrome).
- iOS: VoiceOver (Safari).
- Android: TalkBack (Chrome).
- Axe Accessibility
- Siteimprove Accessibility Checker
- Accessibility Developer Tools for Chrome
- WAVE
- Colorblind mode for Chrome
