Monday, September 12, 2022

How to Make Your eCommerce Site More Accessible

 Amazon box looking at Dell laptop - Image Courtesy of Pexels

It's not an easy process to make your eCommerce site more accessible. Incorporating accessibility features according to the WCAG compliance guidelines from the start is a great help. But you can make your site more accessible by going back and streamlining the user experience for accessibility. This includes installing features such as tools for customizing sites, adhering to standard web elements such as alt-text, and implementing keyboard focus.

Provide Easy Customer Service Options

Customer service is at the heart of a business. And online eCommerce sites are no different. Yet contacting a company can be a challenge for the unimpaired, never mind for those with visual, hearing, and physical disabilities. Fortunately, it's easier than ever to include multiple options. These include easily-readable forms, contact phone numbers, and audible Live Chat software (learn more about chat features) that's easy to use. These should always be considered as part of your site development or plan for streamlining your overall UX.

Correctly Structure On-Page Elements

Of course, something as trivial as paying attention to your on-page elements is a massive help when it comes to accessibility. Up to 90% of people who regularly use a computer screen have some symptoms of computer vision syndrome. CVS symptoms include dry eyes, headaches, and vision impairment. In short, your content can be hard to read. And for people with visual impairment or certain neurological conditions, it can be worse. Therefore, structure, such as headings, titles, and broken-up paragraphs, helps users read your information more easily.

Make Your eCommerce Site More Accessible with WCAG

You can make your website stand out from the crowd and help the disabled by adhering to the Web Content Accessibility Guidelines, known as WCAG 2.1. By following the recommendations set forth in WCAG, you can offer a better web experience than 98.1% (based on 1 million analyses) of website homepages that fail basic WCAG compliance tests. Each year, the studies done by Utah find that the vast majority of websites leave a lot to be desired when it comes to accessibility. Often, 1 in 14 home page elements causes difficulty for a disabled user.

Make Sure Links are Descriptive

Descriptive links are essential for maximizing the accessibility of your site. Links are the main method of user navigation, so users need to know where they will take them. But they serve another vital service. Not all internet users are able to use standard computer monitors with graphics and bold colors. Therefore, they might use screen readers with audio descriptions. So adding a redundant word such as "link" within anchor text could easily become confusing. All links should be descriptive and accurate, preferably with a description of where a click will go.

Provide Alt-Tags for All Images

Similar to descriptive links, you must also make sure your images use descriptive alt-tags. Alt-tags are vital to conveying what an image is. Some users may not have images enabled because they have problems with screen components, or they could be hard of hearing. Alt-tags also allow screen readers to possess a page accurately for its user. And the user, by way of accessibility, can then become part of the conversation just like everybody else. Alt-tags are applied to your images via a CMS system like WordPress or in your HTML code.

Provide Tools for Changing Text Sizes

The ability to change text size was one of the first accessibility features introduced into computer systems. Text size changing is essential for people with visual impairment to properly read what is on your site. Unfortunately, while web browsers and operating systems often include this feature, they only zoom in on the screen rather than make text larger. That is, ALL elements on the screen are made larger. This can be distracting for some and uncomfortable for others. Fortunately, you can easily include text size widgets into your overall web experience.

Vary the UX for the Needs of the Many

The initial design of your site should be developed for a good user experience. And this includes paying attention to the needs of all users. UX is a buzzword in modern design, and wasn't paid much attention to. However, today, it's given much thought by web developers and digital marketing agencies. However, you can also choose to overhaul your site to streamline the UX for accessibility. Yet, given the size of most eCommerce sites, this is a mammoth task. When redesigning your UX, you must consider people of the following categories:

  • Mobility and physical impairments

  • Dyspraxia

  • Visual impairments

  • Hyperlexia

  • Deaf blindness

  • Color blindness

  • Dyslexia

  • Epilepsy

  • ADHD

  • Autism

All of these disabilities have the potential to ruin website interaction. For example, specific contrasts or light patterns could trigger a seizure in someone with epilepsy. Additionally, mobility and physical impairment could prevent someone from interacting with your site if you do not include keyboard accessibility. But some you might not consider. For example, someone with dyslexia will have problems reading an area with smaller fonts, serif fonts, and inadequate contrast. Especially text to background colors that will strain their vision.

Make Your Site Keyboard Friendly

Your website's features are not very useful to someone who doesn't have the ability to access them. Not everyone can use a mouse, so you must make your site keyboard-friendly. A keyboard-friendly site makes it easy for those with limited mobility to access everything on your site by using keyboard interactions rather than clicking with a mouse. Using TAB, arrows, and other functional keys, your site's elements must be accessible. However, your design must also consider tab order, visible focus, and keyboard traps that access an element but can't escape it.

Provide a Responsive Design

Responsive design is a trending and modern feature thanks to smartphones and tablet use. However, it offers more than simply looking cool. A responsive design allows for a standard system that caters to the users' everyday needs. However, accessibility goes further and provides more features. In particular for users of assistive technology like screen readers. Adapting to the user's screen is the primary goal of responsive design. With this optimization, reading and navigating the content on various screen sizes becomes simpler.

Include Accessible Contact and Checkout Forms

Forms are an essential part of a product or service website. While there are standard methods of designing and using forms on your site, they may not be accessible. Many included forms come from templates that aren't designed with accessibility in mind. You can make your forms more accessible by removing placeholder text, making all labels descriptive of the field, and making it clear when a field is required. Special consideration should also be given to making your forms highly keyboard accessible, which doesn't include labels and keyboard traps.

Assistive Tech to Make Your eCommerce Site More Accessible

Making your website accessible is commendable. But it is a complex subject to understand and implement across an entire eCommerce site. Fortunately, you can install assistive technologies to help make your site far more accessible for users and easier for you to do. Standard assistive technologies include voice and text conversion in multiple languages. But also screen element isolation for zooming and font personalization to make it easier to read. Tools like this aren't free, but the benefits of investment in a tool like Recite Me outweigh the costs.

Add Audio Description Software

Investing in extra tools can be an additional expense you may not have when you first build a site. Fortunately, you can get free accessibility tools. An audio description tool is one of the simplest to implement in a CMS system or via HTML code. These simple tools will go through all elements on a web page and read aloud what they are. Audio description will include any text on a page. But also stating what each element is, in order of focus. For example, a navigation bar followed by an introduction paragraph, then a description of the first post on your blog roll.

Pay Attention to Contrasting Colors

Tools are also available for changing color contrast on a page. However, you also have some responsibility to pay attention to the contrast in the first instance. Not only is it bad web design to include poor contrast, which will hurt your SEO, but it simply isn't fair for people who experience discomfort from it. Therefore, color contrast should always be a part of your initial web design. From there, you can choose to include tools and services for allowing users to change colors as they need. Most users will greatly appreciate the ability to do this since most don't have it.


You can appeal to more people with impairments by heightening and streamlining your accessibility features across your site. To make your eCommerce site more accessible, there are many features you can implement. For more information, you can follow the Web Content Accessibility Guidelines, which offer a standard way to include more features for the impaired. First, however, you can go a little by implementing features as a part of your initial web design.