Why accessibility matters for eCommerce
- There’s a lot of talk about accessibility these days. But what does it mean?
- Accessibility in numbers
- Common accessibility issues with online stores
- Visual disabilities
- Motor disabilities
- Auditory disabilities
- Cognitive disabilities
- Summary
There’s a lot of talk about accessibility these days. But what does it mean?
The Canadian National Institute for the Blind defines accessibility as access, which refers to the ability for "everyone, regardless of disability or special needs, to access, use, and benefit from everything within their environment."
Just like curbs and thresholds present a serious problem in the physical world for someone who uses a wheelchair, digital barriers make it impossible for many people to navigate the web. And as several activities, including shopping, are so much easier for people with disabilities to do online, creating accessible eCommerce is very important.
Accessibility in numbers
Accessibility is not simply the right thing to do, it also benefits everyone involved: people, businesses, and community in general.
Let the numbers do the talking here
The buying power of 6.2 million people with disabilities is over $50 billion in Canada alone. Together with friends and families, they represent the third-largest market segment in North America. Around the world, 1 billion people (15 percent of the Earth’s population) experience some form of disability, and their buying power on the global scale is $1 trillion.
There are so many people out there who can shop, study or be entertained online—but in spite of that fact, only 1 percent of the top million homepages are accessible.
Just think about a blind person who wants to order something from an online store. If the website is not accessible and there’s no one able-bodied to help, they simply won’t be able to do so. From a business point of view, an inaccessible online store for people with disabilities is missing out on conversions, clients and revenue (even without mentioning the possibility of getting a WCAG compliance lawsuit).
Common accessibility issues with online stores
There are many types of “web impacting” disabilities that can prevent a person from navigating a website easily. But the majority of the problems related to interacting with the web can be divided into four major disability categories:
- Visual, including colorblindness (ability to see web pages)
- Motor (ability to navigate the web with a mouse-pointing device)
- Auditory, like deafness and partial hearing loss (ability to hear the audio content presented on the website)
- Cognitive (ability to remember and focus on information)
Let’s look at some digital barriers that people face with each of the above-mentioned impairments.
Visual disabilities
" 1.5 Million Canadians identify themselves as having sight loss. An estimated 2.6 million Canadians are colorblind. "
When people can’t see a web page, they rely on screen readers to wayfind online. Screen readers use Text-To-Speech technology to convert text information into synthesized speech (or Braille for the deafblind users). But screen readers don’t simply read out all the text on the page word by word—this would be a complete mess and extremely hard to navigate.
The web is based on HTML, and when done properly, a web page has a clear structure where each element is named and described correctly. This way it’s understandable and easy to navigate with the keyboard and the readouts from a screen reader.
Examples
-
This is how the absence of the HTML structure and landmarks looks with a screen reader. Instead of different sections to choose from (on the right), there’s just a blank space that can’t be navigated at all (on the left).
Full-size image
Full-size image
-
Lacking proper labeling also creates a problem. To make website navigation easy, labels communicate to users what each element is about. Most interactive elements, images and separate groups of content should have their own invisible names that are present only in the HTML code of a web page. This way, those who can’t see a website but can navigate it with the help of a screen reader would know what to expect from an element and what to do with it. But if an element is not labeled, or is labeled incorrectly, people would hear, for example, the whole URL to this element where each symbol can be read out separately one by one. Scanning through just one website page, in this case, may take hours and be extremely frustrating.
Full-size image
Full-size image
-
Color shouldn’t be the only way we get information from a web page. For example, when error fields are highlighted only with red, colorblind people wouldn’t be able to see it and identify the mistake (that’s why there should always be provided text equivalent for any important visual information).
Full-size image
Full-size image
Full-size image
Full-size image
Motor disabilities
" Almost 1M Canadians experience some kind of dexterity problem, according to Statistics Canada. "
Any website is easy to navigate with a mouse—because they are designed this way. But people with dexterity disabilities are unlikely to use a mouse, and rely on the keyboard instead. This creates a lot of problems for them while using the web, because interaction with anything but a mouse simply wasn’t built into the code of the majority of the websites.
Some of the typical problems in this case are:
-
Interactive elements like pop-ups or cookie bars that can’t be closed from the keyboard or any other input device. They completely overlap the content, and make further navigation of the website impossible;
Full-size image
Full-size image
-
Elements on the web page (like buttons and fields) are too small and located too close to each other, which makes it hard to hit them with a stick or other physical pointing device. It’s also an issue for the elderly, because age-related problems lead to the same accessibility issues;
Full-size image
Full-size image
-
Active elements on the website are not highlighted with a borderline (every element on a web page that can be interacted with should be highlighted visually after pressing Tab, so users know what can be done on the web page).
Full-size image
Full-size image
Auditory disabilities
" The Canadian Hearing Society estimates that there are 3.15 million Canadians who are hard of hearing and 340,000 Canadians who are deaf, including an estimated 11,000 who are deaf-blind. "
Unfortunately, it’s a common misconception that people with hearing disabilities don’t need some specific accessibility help, as they can see the websites, navigate them with a mouse, and read all text content just fine.
As modern websites have a lot of multimedia content (like news clips, educational videos or commercials), people with hearing impairments can miss out on enormous chunks of information. To avoid this, all audio on the website should be provided with an easy-to-read text equivalent. When sound is present, closed captioning and transcripts would be a great way to go.
Full-size image
Full-size image
Also, adding subtitles would benefit people who want to watch a video somewhere where that’s hard to do (like on the subway where it’s too loud, or in the library, where it’s too quiet), or people with a poor internet connection.
Another accessibility issue for people with hearing disabilities that may not be so obvious – the contrast between the text and the background shouldn’t be too sharp and the colours on the website shouldn’t be too bright. As people with hearing disabilities rely on visuals to get information, they are much more sensitive to it and explicitly bright colors would be hard to look at.
Cognitive disabilities
This is the largest group of computer users with a disability, which is extremely varied in terms of types and severity of medical conditions. People with cognitive disabilities can see, hear, and navigate websites, but find it hard to focus and remember large amounts of information. It’s still the most overlooked type of disability because the variety of cognitive impairments is too diverse and it’s hard to provide a comprehensive accessibility solution for all of them. Take a look at some of the accessibility barriers that people with cognitive impairments find challenging.
Accessibility barriers
-
Several active elements (like ads or calls to action) are placed on one screen close to each other. In this case, it’s easy to get distracted, because many different elements in one place can mislead users and increase the time that is needed to interact with each button or other element.
Full-size image
Full-size image
-
If there’s a form that should be filled in on time, session duration should not be too short or (better) limited at all. It may take longer for people with cognitive disabilities to type in all the needed information, so there’s a strong chance that they wouldn't be able to make it on time at all. Also, it’s better to clearly warn users how long the session duration is and clearly indicate the remaining time.
Full-size image
Full-size image
-
There shouldn’t be many pop-ups on a page, especially if they appear one by one or all together. Too many active elements make people with cognitive disabilities get lost because there is no main element to focus on.
Full-size image
Full-size image
Summary
These are just some of the accessibility barriers people with disabilities face every day on almost every website out there. Even these few accessibility issues turn people’s online experience into an inaccessible nightmare, but there are many more.
And, just like how the accessibility of our physical environment is a basic human right, digital accessibility for all people is exactly the same. Making all aspects of the web accessible for everyone is not an option – it’s the law and our moral obligation to do so. You can do your share, and we can assist you with that. Check how accessible your website is, or learn more about digital accessibility from our knowledge base.