According to the World Bank, approximately 15% of people across the world have some form of recognized disability. The U.S Census Bureau also states that 19% of Americans are deemed to have a disability.

percent of people with disabilities

There’s no question that 56.7 million people (in the US alone) is a significant number of people, however, website accessibility for disabled people is often overlooked when it comes to the basics of design. Increasingly, sites that don’t comply will get penalized by major search engines, which means many sites don’t get the potential number of visitors they could because of this oversight in the design process. Furthermore, visitors with disabilities that do make it to your site might not have an optimal experience – but this can be avoided.

Making your e-commerce store user-friendly for disabled visitors is an opportunity to tap into another market. There’s a fair percentage of customers who will appreciate being able to access a website that’s been designed to accommodate their needs, leading to a potential increase in traffic, leads, and revenue.

Compliance is Also an Issue

It’s not just the case of making your e-commerce store accessible to as many people as possible, you also have to consider the need to comply with the Americans with Disabilities Act (ADA).

The ADA requires all nonprofit service providers and businesses (with 15 or more employees) to make their websites accessible to the disabled public. Even if you don’t fall into this category, most small business owners can benefit from meeting these compliance standards anyway, because it will encourage more visitors and can reduce any limits liability issues.

How do you make sure your e-commerce store is ADA compliant?

There are a number of key criteria on the ADA checklist that your online store will need to adhere to in order to avoid any problems with compliance.

Some of the key requirements include:

  • Making sure you have an alt tag on every audio file, video file, image, plug-in etc., on your website
  • Providing detailed text descriptions for any complex graphics your have on your e-commerce store
  • Providing captions on all your videos, plus audio descriptions
  • Making sure your web pages don’t contain any images that flash repeatedly

Color Blindness

Another major factor that’s not always considered when you’re designing an online store is the problems some people might have viewing a page correctly because they have an issue with color blindness.

It’s worth remembering that the global figures for color blindness are surprisingly high, with one in two hundred women and one in twelve men suffering from color blindness, according to Color Blind Awareness.

The problem color-blind people have when they’re trying to interpret what they’re seeing on a web page is the inability to distinguish contrasting colors. This, in turn, makes it difficult to make out the different elements on a page that have not been set up in a way to tackle this issue.

There are a number of things you can do in order to make your e-commerce website more accessible to people who have color blindness. And one of the primary objectives is to make sure the colors you use are from opposite ends of the color wheel. This will ensure they contrast dramatically and stand out to color-blind users.

Equally, there are certain color combinations that are best avoided if you’re going to make your online store user-friendly to color-blind visitors.

These are:

  • Green/blue
  • Green/brown
  • Green/red
  • Blue/grey
  • Blue/purple
  • Green/grey
  • Light green/yellow
  • Green/black

color blindness color combinations

Here are some other design features that will ensure your site can be easily read and is more navigable for color-blind users:

  • Aim to add different shapes and textures to the different elements on your web page so it adds other distinguishing features besides colors
  • Avoid text over images unless they contrast significantly
  • Look to add a text label to color swatches so users can hover over the color to see what it is
  • Provide link recognition by using more than just color
  • Consider adding icons or underlining them so it’s clearer they are links
  • Help make alert messages stand out by using icons or prefix text
  • Remember that alerts are normally distinguished with red or green colors, but those suffering from achromatism won’t be able to distinguish these
  • Exclamation marks or ticks are great symbols, or words like “Success” or “Error” can be used to help distinguish the messages
  • Flag required form fields with asterisks or “required” instead of just using colors to differentiate required and unrequired ones

There are some useful design pointers and tools that will help you see your online store like a color-blind user, including:

  • ColorOracle.org – This allows you to see what those with a common vision impairment will see when they visit your site
  • Contrast Checker on WebAim.org – This will allow you to see whether two colors pass the guidelines for accessibility

Access for People with Visual Impairments and Blindness

According to figures compiled by the World Health Organization, there are some 285 million people around the world with a visual impairment, and 39 million of these are blind.

Despite their disability, there are a good number of these people who want to be able to access the Internet, and they will naturally migrate towards e-commerce websites that are specifically tailored to their needs.

There are several things you can do with your online store to accommodate as many of these visually impaired visitors as possible.

For example, you could consider using enlarged text and being proactive with your website design to ensure it’s capable of accommodating the latest browser versions. This will allow users to activate the text-only zoom feature without it affecting the layout of your site.

Furthermore, there are a large number of people with recognized eye diseases such as cataracts and glaucoma, which has a detrimental impact on their ability to distinguish contrasts.

Modern site design often tends to rely on subtle gradients, but in order to make your online store more accessible for people with these typical eye diseases, consider the idea of creating a second version that’s more contrasting.

Another useful design trick would be to opt for bold text when you are using low-contrast features, also, avoiding any thin-style fonts which could prove difficult to read.

Aim to avoid any CSS or JavaScript techniques that inhibit users from highlighting text. Many visually impaired people will often highlight elements to add a contrast to something they’re struggling to read.

When it comes to screen readers, make sure your e-commerce site is capable of supporting the latest versions, as these software programs provide blind people with the option of using a speech synthesizer or braille display in order to navigate a website.

Mobile Accessibility

A growing number of people are accessing web content via their mobile and you need to consider this aspect when designing your site. This allows desktop users to switch to a mobile site if they want to without any compatibility problems.

Mobile sites tend to be more accessible for people with vision impairments. Therefore, by giving them easy access to your site via this platform, it will help increase the overall visibility of your e-commerce website.

Make sure elements on the website do not appear cluttered. This will help people with vision difficulties, such as blurred vision or issues with contrasting colors, to navigate the site with greater ease.

Keyboard shortcuts are a great way of helping someone with a visual impairment to navigate your site. By using a few keys a person can avoid the need to use their mouse and the difficulty of trying to find the cursor on the screen.

CAPTCHA codes can present a bit of a dilemma when it comes to balancing the need to eliminate spam and the difficulties they can create for people with a vision impairment. Some users might find it almost impossible to distinguish or decipher the characters included within the code, especially as it won’t increase in size if you try to zoom in on the details.

A viable alternative would be to use questions instead of a CAPTCHA code. This will avoid the low-contrast feature that many find difficult to decipher when suffering from a visual impairment.

Website Problems for People with Hearing Loss

Although you might consider that your online store is primarily a visual experience, it’s well worth remembering that there are around 360 million people worldwide who suffer from some form of hearing loss, according to figures released by the World Health Organization.

People suffering from hearing loss or deafness potentially face a number of challenges when they come to an online store. This can spoil their enjoyment of the content or lead them to click away if they’re not able to access the content in a way that meets their needs.

These issues can often be overcome with a number of design initiatives.

Deaf woman using tablet

Consider the idea of offering sign-language videos on your site. These can be expensive to produce, but when you consider that it’s the first language of most deaf people and that there are a large number of visitors who might find this option useful, it could prove to be a viable investment.

If someone’s struggling to read the text on your site, the option of a sign-language video will
transform written content into something they can engage with, including captions on videos and audio features.

When you have a video or audio feature on your site, consider including subtitles so users can read the spoken words. Alternatively, think about creating a transcript they can print out to read in their own time.

Looking after the Elderly and Fine-Motor Control Issues

The elderly are often overlooked as a demographic when it comes to designing website features, but they may have unique needs when they’re accessing websites. As their motor skills decline with age, they can struggle to click on the different features of your site, so make sure you put form fields close together but leave at least 2mm between each box.

Another key point when it comes to accommodating elderly visitors is to ensure your e-commerce store is keyboard accessible, so users can use the keyboard to navigate it instead of their mouse. This includes drop-down menus, radio buttons, and form fields.

Also, you should allow for short-term memory loss so users don’t have to remember how to use your e-commerce website’s interface.

Aim to gradually offer new information that you present on-screen and add reminders and cues where possible. Try not to place tasks on multiple screens and avoid the use of pop-ups where possible.

It’s a good idea to try and remove any distractions from the page, including sounds and movement, as this may prevent them from completing what they’re doing. Allow sufficient time for users to fill out forms before the page times out.

Keep the language simple, avoid complex terms, industry jargon, and long sentences as older people might find these difficult to comprehend.

Conclusion

Although some of the features mentioned may appear time-consuming and expensive to implement, many of them are actually easy and inexpensive to carry out.

If you manage to create an online store that makes your site accessible to as many different users as possible, you will increase your chances of attracting more shoppers who have disabilities, which will help increase your revenue.

Taking the time to plan how to accommodate more disabled visitors to your site is a win-win situation and your efforts can translate into increased sales and more positive feedback from customers.

More reading and resources:
http://www.worldbank.org/en/topic/disability/overview
https://www.census.gov/newsroom/releases/archives/miscellaneous/cb12-134.html
https://www.shopify.com/partners/blog/why-and-how-to-improve-ecommerce-website-accessibility
http://www.techrepublic.com/blog/web-designer/creating-an-ada-compliant-website/
http://www.colourblindawareness.org/colour-blindness/
https://www.smashingmagazine.com/2016/06/improving-ux-for-color-blind-users/
http://www.who.int/mediacentre/factsheets/fs282/en/
http://mashable.com/2011/04/20/design-for-visually-impaired/#65UFMpp0RPqJ
http://www.who.int/mediacentre/factsheets/fs300/en/
https://www.w3.org/WAI/older-users/developing.html
http://www.perkins.org/stories/three-tips-to-make-your-website-accessible-for-people-with-disabilities
https://www.ada.gov/pubs/ada.htm
http://colororacle.org/
http://webaim.org/resources/contrastchecker/
http://www.who.int/mediacentre/factsheets/fs282/en/

Add Your Comment