Most Important eCommerce UI/UX Web Design Tips to Help People with Disabilities

Running an eCommerce website requires a lot of dedication, as there are numerous customers whose needs have to be addressed. Additionally, there are people who require special readability and navigation, depending on the type of disability they are faced with. Optimizing a website for all types of users might sound like a very demanding endeavor, but it is actually a fairly simple thing to do. All you have to do is focus on several different aspects in order to make your website accessible for all the potential customers out there who are disabled.

Colors

colors

There are many colorblind people who can get quite confused if you pick specific colors for your website. This is why it is important to take care of the color types that are going to be dominating your webpage. Avoid using yellow, green and blue colors next to one another, as these specific combinations tend to cause the most confusion for colorblind people.

An efficient way of using colors for the colorblind is to use contrasting colors, which will make everything clearly visible no matter who ends up on your website. When it comes to making the right choice for text color, the best and safest way is to place a piece of text in black on a white background. This contrast will make it easy for everyone to see the product descriptions on your eCommerce store.

 

Buttons

buy now

The latest design trends are actually quite good for making the buttons friendly for disabled people. Clean design that provides people with bigger buttons is perfect. It is also important not to create flashing call to action buttons such as “Buy now”or “Order now”,as you do not want your website to cause a seizure for people who are suffering from epilepsy. Call-to-action titles such as “Add to cart” and “Add to basket” resulted in much higher conversion rate on A/B tests because the title itself showed as more calm; it also doesn’t require any commitment and it’s not imposed to users.

A good design for creating buttons that will feature the needs of most people is the clean material design that was introduced by Google a couple of years ago. It is important to use strong colors so that people who are color blind can easily notice the buttons that they need to click on.

 

Font Size

font size

This is something that requires special attention. Placing a small font on your website is not going to be quite a good decision. Elderly people who have eye problems are not going to be able to go through the content easily, and the best way to solve this is to enable text zoom when hovering over text. Additionally, there are approximate text sizes that you should stick with if you want your content to be perceivable by a majority of people. If your target audience are senior citizens, simply do not use absolute font sizes.

Establish code that is going to use percentages, for example 120% for bigger text and 90% for smaller text. A 12-point font size is going to be enough for senior citizens, however, the recommended minimum is 14 for the text body, whereas titles should be sized at 18 or higher. You can always add a button that is going to increase the font size, just make sure that the button is prominent and easy to use. Size is not the only thing to think about – you should also make sure that the text is in high contrast with the background, as this will make it easier for people to read the text. To make the text more readable, it is important to add more spacing between the lines in the text and people will have no problem with covering your content.

 

Focus

Avoid placing the focus of your website on images. Now, you do need to have high quality images on your website, especially as we are talking about eCommerce websites, but you should focus more on other content types such as categories, product descriptions and unique selling points. This will make it much easier for people who have vision problems to understand what they can find on your eCommerce store, not to mention that making their decision is also going to be much easier as well. Diversifying content on your pages is going to allow a higher number of people to easily access and navigate through your online store.

 

Borders and Outlines

The current design trends are focused on making forms more simplistic. However, this can be quite an issue for many people with visual disabilities. Numerous online forms are created without borders. You can continue practicing and adopting the latest trends, but make sure that there is some other type of indicator that is going to help people navigate.

For example, if you have a borderless form on your online store, ensure that there is a text in the “fields” that people are supposed to fill in. If you choose to go with a borderless design however, make sure that the mentioned text is in a bigger font and that it is in contrast with the background of the website.

However, if you want to make things simple for your customers, you can always use forms with a clear border, which people will have less problems using. The choice is yours, but if you want to keep people with disabilities satisfied, using bordered forms is probably a better choice and it is something that visitors without any impairments will certainly not mind.

 

Design Elements Positioning

It is important to be careful when placing elements on the website. Here are some tips on how you should optimize different types of content on your website:

  • All non-text content should be described in words with the utilization of tags and markup. The ALT text should include all the important details, but it should not be too long.

  • If you are planning on relying on video, you should definitely provide a precise transcription that is read by a human (avoid using computer generated voices). Don’t forget to include sign language translations or captions for people who are deaf.

  • Follow the convention when establishing text content. Follow H1, H2 and H3 standards as it is going to enable people to navigate through the page more easily and keep up the natural flow of the content.

  • Element consistency site wide is something that should be prioritized. A variety of pages are going to be different, for example the Home page, category and product pages etc. However, an element that should always be present across the whole website is a textual explanation of each element. Additionally, every page category should remain the same throughout the site. Avoid making different pages for different products, as some form of uniformity should be present throughout the website. This is going to allow much easier navigation.

  • Make sure that the links that are found in the text are underlined, so that people who are colorblind can more easily recognize which part of the text is going to lead them to further reading.

These are some of the tips that are going to make your website’s UI and UX friendly to people with disabilities. As millions around the globe suffer from some form of disability, optimizing your website for people with disabilities is a must and should be something that you remain focused on throughout the web design process.

This post is originally published by Andrija Stojković, Senior eCommerce Designer at Younify