Top 10 Tips for Elevating Your E-Commerce Website

February 27, 2023 BY ABBY ALEPA

[FREE Webinar] The Power of an Accessible Website: Practical Tips for Elevating Your E-Commerce Business


Trillions of dollars were made in the global e-commerce market in 2022, and that figure is only expected to grow. This thriving online industry presents an amazing business opportunity, and a well-designed website is key to unlocking your online business potential.

About 16% of the world’s population experiences a disability; it’s important to ensure that your e-commerce website is accessible to this community. While equal access is the most important benefit of website accessibility, making your website accessible brings many additional ROI benefits and helps you avoid litigation.

In 3Play Media’s webinar, The Power of an Accessible Website: Practical Tips for Elevating Your E-Commerce Business, Bet Hannon covered some of the benefits of website accessibility and steps to inclusion and compliance.

About Bet Hannon

Bet Hannon is a longtime digital agency owner and the founder and CEO of AccessiCart, a services agency that focuses on helping e-commerce merchants improve the accessibility of their websites.

Bet offered guidance for enhancing e-commerce businesses and increasing potential audiences by 25% through website accessibility, though most of the information that was presented can be applied to any website. This blog will recap some top tips covered during The Power of an Accessible Website: Practical Tips for Elevating Your E-Commerce Business.

1. Keyboard Navigation

Most assistive devices, including the system that Stephen Hawking used by tensing his cheek muscle to navigate his computer, concern keyboard navigation. Screen readers rely on keyboard navigation, as well. Because many people with motor disabilities rely on keyboard accessibility to navigate the web, it’s one of the most important ways of making your website accessible.

Testing your site’s keyboard accessibility is relatively simple. After enabling your computer’s accessibility features, you can use the tab key to move through your website and the enter key the same way you use a mouse click. To learn about keyboard navigation in more detail, explore WebAIM’s keyboard accessibility resource.

2. Use semantic markup

Semantic markup is code that provides context about a page’s structure and communicates the meaning of page elements. Semantic markup helps both humans and computers understand the purpose of the information on your website.

A significant example of semantic markup that Bet shared is properly nested “H” tags, or heading tags. H tags usually go from an H1 to H6. H1 is the most important, top-level heading, and there should be only one per page. The following tags are organized by descending importance and can be used multiple times on a page. It’s important never to skip a heading tag in your markup (i.e., going from H2 to H5).

3. Use alt text on images

Alternative text, or alt text, is an attribute within an image tag that describes an image. Alt text helps users understand the critical visual information in your images. It’s essential for people who are blind or have low vision.

Alt text also might take the place of an image for someone who has a low-band internet connection.

Before you start writing alt text, there are two important questions to ask:

  1. Why did you pick this particular image?
  2. What feeling or understanding do you hope to create in the viewer?

By answering these questions, you’re already well on your way to writing great alt text. The key is to keep your description as short and specific as possible.

While the purpose of alt text is to ensure images are accessible for blind or low vision users, Bet explained that product alt text should provide the details of a product a sighted person may take for granted.

Take a couch listed on a furniture website for example. While it’s apparent to sighted users whether there’s a gap between the bottom of the couch and the floor, it’s important to include that information in the product’s description so that blind or low-vision users can make an informed purchase.

To learn more about writing product alt text, read AccessiCart’s blog post about writing effective product alt text.

4. Color contrast

To be accessible to users with visual disabilities, as well as easy to read for all users, text and imagery on your website must have a sufficient contrast ratio.

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1, except for logos and purely decorative images. Larger text must have a contrast ratio of at least 3:1. If you’re wondering how your site’s contrast is, WebAIM has a color contrast checker that indicates your WCAG compliance.

5. Avoid color coding

An estimated 300 million people in the world are color blind. When your site uses color as the only way to convey a piece of information, it creates a barrier and worsens the user experience for many people.

Bet suggested using symbols in addition to colors as indicators to make your website more accessible and easier to navigate.

6. Use descriptive link text

People who use screen readers often use a tool that reads all of the links on a page. For this reason, it’s important that the text you assign a link to provides some context around where the link leads. Phrases like “click here” or “learn more” don’t give the user any information. A link that says click here to learn more about descriptive link text, on the other hand, gives users an idea of the link’s purpose.

In Bet’s words, “It’s really important that all of the text that you make into a link could stand on its own outside the content and the paragraph around it.”

Another point to remember when typing links is that, like anything else on a website, color shouldn’t be the only identifier. Links can be a different color from the rest of the text, but they should also be underlined, bolded, or differentiated in another way.

7. Use actual lists, tables, and columns

Many people use carets or hyphens on a page to create what looks like a visual list. However, as Bet explained, just like heading tags, lists, columns, and tables need to be identified in the code to ensure an accessible experience. It’s important that your site’s code communicates to screen readers when there’s a list, column, or table.

8. PDFs and multimedia files on your site must also be accessible

If your website has any PDFs or other documents on it, they are held to the same accessibility standard as the rest of your website. External documents should use appropriate semantic markup and heading tags, a good contrast ratio and alt text, accessible tables and charts, and more. Particularly long documents should include a table of contents, Bet added.

If your site has multimedia files like videos or podcasts, those must also be made accessible. For videos to be accessible and ADA-compliant, they must include “auxiliary aids” such as captions and audio description.

Although the ADA does not explicitly mention best practices for media accessibility, a growing body of organizations and government entities have adopted WCAG 2.0 Level AA as the acceptable standard when complying with the ADA. Under WCAG, videos should have accurate captions and audio description, and audio files should have transcripts available.

9. Ensure accessible checkout and signup processes

Bet emphasized that checkout and signup web pages are common places to find accessibility issues. Some plugins like WooCommerce or services like Shopify are good options in terms of accessibility, but many other plugins and features can compromise your site’s accessibility.

If you do use external plugins or features for your checkout and signup pages, be sure to re-check their accessibility every time there is an update to the page. Take care to confirm that it’s possible to change fields like product quantity or color through the sole use of a keyboard.

10. Avoid “overlay” plugins

Many online AI tools advertise that they can solve any and all accessibility issues on your website with one plugin or widget. These plugins do successfully fix some issues, but they can only find and fix about 30% of a website’s issues.

As an example, Bet explained that these tools can identify if an image has alt text, but they’re unable to tell you if the alt text is well written or effective. Plugins also don’t tell you if your pages are keyboard navigable, which is an extremely important thing to be aware of.

For these reasons, tools that claim to fix your website’s accessibility with the click of a button are not recommended. They can also conflict with accessibility tools that may already be installed on a user’s computer, and sometimes come with privacy concerns.

In UsableNet’s 2021 Report on Digital Accessibility Lawsuits, e-commerce websites were the most commonly cited in digital accessibility cases—making up 74% of total lawsuits. Bet mentioned that she and her team at AccessiCart are beginning to see some anecdotal evidence that overlay plugins are being targeted for lawsuits. When website owners use a plugin, it’s easy to prove that a website owner knew they needed to improve their site’s accessibility, but still failed to fix all the accessibility issues.

To learn more about this issue and what types of tools you should consider, visit overlayfactsheet.com.

If you want to learn more about how web accessibility can increase your potential audience by 25%, watch the full webinar with Bet Hannon, or explore our archive of free webinars covering a wide range of accessibility topics.

The Power of an Accessible Website Practical Tips for Elevating Your E-Commerce Business (1)