eCommerce Website Accessibility & ADA Compliance Tips

Improve the accessibility of your online store using these strategies, recommended by Zack Poelwijk of ABILITY.

According to the CDC, 26% of American adults have a disability — a whopping 61 million people who have a combined disposable income of about $480 billion.

Although many countries, including the United States, have laws about accessibility (like the Americans with Disabilities Act [ADA] of 1990), accessibility-compliant eCommerce sites are few and far between

This is a huge disappointment for people who fall into this demographic — and a giant opportunity for your brand to level up and better serve your potential and existing customers.

In this guide, we’ll share a few recommended strategies from Zack Poelwijk, Director of Customer Success at ABILITY Digital Accessibility Co, that will help you reach a bigger audience, improve your accessibility features, and bring your online store closer to ADA compliance. 

As a bonus, these easy upgrades not only help your customers with disabilities, but they’ll benefit your overall SEO strategy, too!

Let’s get started.

What is Online ADA Compliance?

When we think of ADA compliance, we often recall the ramps installed where stairs are present in a building or braille printed on signs that point to bathrooms.

But what about online ADA compliance?

When it comes to accessible websites, eCommerce businesses need to think about customers with all sorts of abilities and support systems like screen readers, closed captions, and keyboard-only access. 

For example, users of a website who are on the visually impaired and color-blindness spectrum most likely use a screen reader or require larger font. Some people may not be able to use a mouse and can only navigate websites with a keyboard. Customers with cognitive impairments may need more time to process information before a decision can be made.

In other words, as Poelwjik describes, digital accessibility is “the philosophy of ensuring that digital assets are built in a manner, or retrofitted in a manner, to be accommodating to [various assistive technologies for customer usability].”

What ‘Compliance’ Means

Online accessibility is ultimately defined by one set of rules: the Web Content Accessibility Guidelines, also known as the WCAG.

This single point of truth for global accessibility standards makes it much easier for brands worldwide to achieve these goals, while simultaneously keeping complicated government speak out of the equation.

When it comes to ADA compliance, there are three different levels that companies can achieve:

  1. A: This is considered the bare minimum standard a website must meet. 
  2. AA: Reaching this mid-range level ensures that your website is built to avoid the biggest, most frequent barriers for disabled users.
  3. AAA: This is the highest achievable standard and can actually be impossible for some websites to reach, depending on their content types.

Why It Matters

Digital accessibility is important from two main standpoints: altruism & legality. 

  1. Altruistically, providing alternative, equitable outcomes to people with disabilities is part of the fabric of our communities. 
  2. Legally, we live in the most litigious society in all of history, which means accessibility lawsuits are common. In short, your company could be sued if it does not provide equitable service to all of your customers, regardless of ability — and there are plenty of lawyers waiting in the wings to make it happen.

By committing to an eCommerce site with improved accessibility, you’ll provide more shopping opportunities for often-overlooked audiences. In return, they’ll be more likely to frequent your online store out of ease of use. 

Finally, improving the user experience for impaired customers improves the user experience for non-impaired customers, too. (We’ll discuss more on that below). In turn, this can boost SEO performance and overall revenue for retailers like you.

eCommerce Website Accessibility Best Practices

When it comes to accessibility for eCommerce websites, there’s one question to answer:

What additional accommodations are needed for a customer with disabilities to navigate a website, find the products they want, add them to the cart, and check out effectively?

The following suggestions are based on a few of the standards ABILITY highlights for anyone looking to improve online accessibility. 

This is a great starting point, but it’s not a comprehensive list. We recommend that your brand conduct thorough accessibility testing to identify every issue on your site and create a plan of action.

Only that way can you ensure the best user experience for your prospective shoppers.

1. Color Contrast

Visual impairments fall among the most common disabilities. Luckily, providing proper solutions for these users is fairly easy. 

By ensuring adequate color contrast anywhere text is present, you can alleviate many of the stressors that vision-impaired customers face. 

Adequate contrast is measured by comparing the color of your font against its background. This ratio is also determined by the size of the font. Standard size font needs a color contrast ratio of 4.5:1; for large or bolded font, you only need a 3:1 color contrast ratio.

Website menu bar with heading Free Ground Shipping on All Orders. Arrow points to this text with a caption: Failed Color Contrast. 2.04. Below is an arrow that points to the Stories tab. Caption: Passed Color Contrast: 14.39.

Keep in mind that this high-contrast rule applies to everything — infographics, promotional text superimposed over an image, marketing brochures, product shot sheets, etc. 

Use a tool like the WebAIM Contrast Checker to check your font size vs. contrast ratio to understand your current contrast and mark which parts of your site need improvement. 

2. Image Alt Text

In addition to proper color contrast, you must ensure that all images on your site include alt text.

Alt text describes an image to your visitors so if they are visually impaired, they can still understand the content on your site. This is especially important in cases like infographics and product descriptions. 

Without alt text, your customers could miss crucial details about your products or important context on your webpage.

Screenshot of EarthKind.com. Alt text for images is displayed across the homepage, describing each image for screen readers.

Decorative images are the exception to this requirement. But we recommend using alt text for all images to provide a fuller experience to your website visitors.

You can use software like Chrome’s Web Developer Plugin to view current alt text on your website. Watch our video below for a quick walkthrough of how it works.

The video below is hosted on YouTube. If you need assistance with viewing the video, please contact [email protected].

3. Tab Navigability & Visual Focus Indicator

After visual impairments, mobility differences are some of the most common barriers for website users. 

Able-bodied people use a mouse to navigate screens and websites and shopping situations — but what about those customers who can’t use a mouse? Many of them use the tab and directional keys to maneuver the internet.

Everything on a website that you’d otherwise be able to interact with using your mouse — links, buttons, and anything that is clickable, actionable, and takes you somewhere — needs to be just as functional by using only the tab key.

GIF showing tabbed navigation in the menu header for K E H .com.

When building this functionality, keep in mind that clicking the tab key should navigate a user through a website from left to right, top to bottom.

For example, your users should be able to move from your homepage to a product page with the tab key. Then, within that product page, they must also be able to select the size, color, and any other details of the item they are trying to purchase. 

In addition to that capability, the user also needs a visual focus indicator, so that they can see their progress on the page. Usually, this is a color change in text or a dotted line box around the current selection. 

K E H Camera homepage. Skip to Content is highlighted in a blue box on the navigational menu.

You can accomplish this through CSS, which is a simple, superficial, top-level code change.

4. Programmatically Determinable

All of the elements of your webpage need to clearly show the user what the object is and what they are supposed to do with it. Generally, you can make this happen in the user interface development process.

To ensure accessibility, all of these same things have to be programmatically determinable. In other words, screen readers and other assistive technology must be able to understand what each piece is. 

When a webpage is programmatically determinable, it means that a screen reader can read a piece of code to identify what the thing/button/etc. is, along with its clearly identifiable, accessible name (the label we have given that thing in the code) that it shares with the user.

For most eCommerce sites, this step can be completed with the help of an experienced web developer.

5. Finalizing the Purchase

Once your customers can maneuver your eCommerce website with tab navigability, you must ensure that they can finalize the purchasing process with similar ease.

Your users should be able to fill and check out an online shopping cart through the help of their assistive technologies (and without using a mouse). For eCommerce sites, this can get complicated, because there are so many details involved in the checkout process and so many places things can go wrong.

Checkout form. Form fields: Email, First Name, Last Name, Company (optional), Address, Apartment, suite, etc. (optional), City, State, ZIP code, Phone. Button: Continue to Shipping.

From filling out forms to entering credit card numbers to verifying all the details, your brand needs to prioritize accessibility in the checkout process. Not only will this ensure your site meets WCAG guidelines, but it also prevents you from losing that valuable sale!

Again, we recommend hiring an experienced accessibility developer to make necessary improvements to your checkout process.

6. Fillable & Form Fields

When it comes to the online shopping checkout processes, fillable fields and form fields present a unique challenge. 

Each of these fields has very specific requirements and rules to follow. Making these rules known to your users and their support systems requires that every detail be programmatically labeled behind the scenes. 

Some fields will require numbers and others letters, while some will allow for both. These need to be as detailed as possible. You’ll also need to name each field, so that technologies can identify them for users — First Name Field, Last Name Field, etc. 

Checkout form with form field names highlighted in red boxes. Form field names: Email, First Name, Last Name, Company (optional), Address, Apartment, suite, etc. (optional), City, State, ZIP code, Phone.

All of these labels can be created with simple HTML manipulation.

Don’t forget: You’ll also need to check color contrast and tab navigability with the visual focus indicator for each piece — so that your user and their support systems know where in the form they are, too.

Error messages also need to be made available to screen readers. These messages should have all the same accessibility traits, as well.

7. Mobile Responsiveness

How many of us use our phones for online shopping — whether we have an impairment or not? (Answer: About 36% of us.)

We all know the importance of mobile responsiveness (also known as mobile reflow) in website design and for SEO purposes

But, just like any able-bodied users, many users with disabilities primarily or only use their phones or tablets to surf the web or make online purchases. Therefore, it’s critical that your site be built to be responsive to their needs.

According to the WCAG, all web content needs to be able to elegantly stack to one column. (The association provides rules on how to do this with guidelines around pixel width and more.)

Mobile version of a shipping address form fill. All fields have collapsed into one column for mobile usage. Fields: Email, Country / region, First name, Last name, Company (optional), Address, Apartment, suite, etc. (optional), City, State.
In this mobile version of the form shown above, all columns have collapsed into one for a better user experience.

Unfortunately, some digital objects (like clothing size charts or large graphs and images) can’t necessarily be shrunk down to become mobile-sized. For example, big tables can’t be re-sized to be mobile-responsive and shrink to fit the screen because then, well, they’d become unreadable. 

To make these elements accessible and responsive, you build your mobile web design in such a way that mobile users can scroll in only one direction at a time — either up and down or side to side — so as to keep the information readable. 

Starting Your Accessibility Initiative

The tips above are a good place to start when it comes to creating an ADA-compliant eCommerce website for your customers. 

That said, following these rules alone will not automatically designate “full compliance” for your site. Instead, you may need to bring on more tools and services to ensure complete accessibility, provide the best experience for all of your users, and avoid litigation.

For brands looking to upgrade their customer experience, there are two main solutions available. 

Overlay Widgets

The first is to implement an overlay widget. These accessibility tools typically provide an accessibility icon that appears in the top corner of the site. If users click on them, the tool can provide some additional information and usability. 

Often, these overlays don’t produce the wide array of results they promise, so we don’t recommend relying solely on these for your accessibility needs. 

If you’re just getting started with accessibility and your budget is very low, they can be a temporary bandaid — but should not be trusted as the end-all-be-all of your site’s accessibility.

Full Accessibility Audits

The second solution is to conduct a detailed, person-led eCommerce accessibility audit. 

These audits are a much better way to ensure your company is in full accessibility compliance. If you want to reduce your risk, keep lawyers away, and sincerely make your site user-friendly to your entire target audience, an audit is the best solution. 

Headshot of Zack Poelwijk, Director of Client Success at ABILITY. Quote: Hire an auditor, have them human-led audit your site, and fix the problems at the code level. That is how you make accessibility.

Fortunately, there is a range of audit companies out there for every need and budget:

  • ABILITY provides a full suite of accessibility services that cover all of your digital assets. They offer an overlay product, as well as auditing, transcripts, closed captions, audio descriptions, and a compliance certification.
  • Deque also offers a remediation overlay, along with audits and training for your in-house team to ensure that any further developments are made with accessibility in mind.
  • UserWay provides a widget alongside their auditing services. They also can check for contrast and dyslexia font issues, as well as moderate your content.

If you’re already working with a digital marketing agency, they may have a partnership program with an accessibility service — so it’s worth asking if they have any recommendations for you, as well. 

Improve Your Revenue with Your Accessibility Strategy

Improving your eCommerce website’s accessibility will not only help you reach new customers, but it will also actually help your current customers more easily navigate your site. In addition, these updates can drastically improve your technical SEO strategy. 

In short, following the steps above can lead to greater revenues, market share, and conversions for your eCommerce store.

By streamlining your accessibility, you can outshine your competitors and draw in a loyal customer base. When people find online stores that are easy to navigate and buy from with clear access, they keep coming back — and you’ll reap the rewards.

Want a digital marketing strategy that addresses these accessibility issues and improves your online revenue? Request a free customized proposal from Inflow today to learn more.

If you want to start improving your site’s accessibility with a more DIY approach, we recommend the following resources:

Google Analytics 4 Setup: Step by Step Guide

Learn how to set up your Google Analytics 4 eCommerce tracking before the July 1, 2023, deadline.

It’s time to get tracking.

With Universal Analytics’ final goodbye less than a year away, the clock is ticking on your deadline to set up Google Analytics 4. To prep your business for success before next July, you need to get your GA4 properties in order — and tracking — as soon as possible.

For the last few months, our marketing team has worked diligently to transition our eCommerce clients from UA to GA4. Along the way, we’ve learned some tips and tricks for a smooth migration that captures everything a business needs to bring from Universal Analytics.

In today’s guide, we’re sharing that process with you, including a helpful GA4 eCommerce Tracking Toolkit to kickstart your efforts. Read through it now to start configuring your own accounts, or to give your agency a headstart with its operations.

Download our Google Analytics 4 eCommerce Tracking Toolkit Now. Logo: Inflow. Attract. Convert. Grow.

And, if you ever need help with your Google Analytics 4 setup, Inflow is always here.

Table of Contents

How Google Analytics 4 Tracking Differs From Universal Analytics

Before we get into the details of setting up Google Analytics 4 tracking, you need to understand the crucial difference between this platform and Universal Analytics. 

GA4 is more than just an “upgraded” version of UA. It’s a completely redesigned system with a totally different approach to event and conversion tracking. Whereas UA tracked events as different “hit” types (page views, events, transactions, etc.), Google Analytics 4 tracks them all as an “event” — which means you’ll need to do some additional configuration for the most accurate data collection.

You can learn more about how GA4 differs from UA in Google’s complete guide, or you can check out our infographic below for the quick hits:

Google Analytics 4 vs. Universal Analytics comparison chart. Universal Analytics: Measurement: Session-based data model. Sessions: Ends after 30 minutes of inactivity, after midnight, or after campaign source changes. Traffic sources: Customizable channel groupings and definitions. Filter capabilities: Subsets of traffic, unwanted data, and other pieces of information. Reporting: Limited cross-device and cross-platform reporting. Automation: Limited automation. Google Analytics 4: Measurement: Flexible event-based data model. Sessions: Ends after 30 minutes of inactivity or timeout. Does not create a new session when campaign source changes mid-session. Traffic sources: Default channel groups and definitions available, but cannot be modified or customized. Filter capabilities: IP filters only. No Views available. Reporting: Full cross-device and cross-platform reporting. Automation: Advanced machine learning to improve and simplify insight discovery. Logo: Inflow. Attract. Convert. Grow.

If you haven’t yet read our introduction to Google Analytics 4, we recommend you do so now, to familiarize yourself with the platform. You can also watch our explanatory video below:

The video below is hosted on YouTube. If you need assistance with viewing the video, please contact [email protected].

How to Set Up Google Analytics 4: The Basics

Before setting up your data tracking, you must first configure your Google Analytics 4 property.

If you haven’t yet done so, follow the steps below to get started. (You can also follow Google’s Setup Assistant within the platform.)

Step 1: Create Your New GA4 Property.

The first step to your GA4 tracking — make sure you have a property to track with!

You can easily create a Google Analytics 4 property for each of your existing Universal Analytics properties. After hitting “Create Property,” follow these steps to complete the process.

  1. Click on “Property Settings” in the lefthand navigation menu.
  2. Fill out the details for the Property as accurately as possible.
Google Analytics 4 Property Settings. Property Details: Property Name. Industry Category: Real Estate. Reporting Time Zone: United States, G M T 05:00 Chicago Time. Currency Displayed as U S Dollar U S D $.

At this point, you’ll have your basic property created and populated with the must-have info. But there are a few other steps involved before you can configure your tracking.

Step 2: Set Up and Connect BigQuery Data Warehouse.

Remember that Google Analytics 4 is limited to a 14-month data retention period. Therefore, to store your long-term historical data, you’ll need to use a data streaming warehouse.

Here at Inflow, we’ve been using BigQuery for our clients, because GA4 provides an easy connection to the platform. It’s also free or very low-cost for many of our mid-sized eCommerce clients’ needs, with 10 GB of complimentary storage.

Before you can link this data stream to your Google Analytics 4 account, you’ll need to set up a project for your site. Follow Google’s guide to doing so, then link this warehouse to your GA4 property as outlined below:

  1. In Setup Assistant, click on “Link BigQuery” in the “Linking” section.
  2. Click the blue “Link” button.
  3. Click “Choose a BigQuery Project.” (You may need to search for the Project ID if you don’t see it listed.)
  4. Select the appropriate BigQuery project and then click “Confirm.”
  5. Select the data location (your GA4 property name).
  6. Select the data streams and frequency. We recommend leaving your frequency set at “Daily.”
  7. Finally, click to the next step, where you can review and submit your data. You will now be able to see your account in the BigQuery Linking page. 
Screenshot of Google Analytics 4 Setup Assistant. Create a Link with Big Query. Link setup: Choose a Biq Query project, "Link to a Big Query project I manage." Configure settings. Review and submit.
Step 3 of the BigQuery linking process.

Step 3: Link Your Existing Accounts.

In addition to linking BigQuery, you’ll also need to link your Google Ads accounts. This will allow your business to take advantage of GA4’s advanced cross-platform data integration and reporting capabilities.

There are two processes involved in this:

Google Ads

  1. In Setup Assistant, click on “Link Google Ads” in the “Linking” section.
  2. Click the blue “Link” button.
  3. Click “Choose Google Ads Accounts.”
  4. Select your account and click “Confirm.”
  5. Click on “Enable Auto-tagging.” Select “Leave my auto-tagging settings as they are.”
  6. Click “Next” and then “Review your settings.” Hit “Submit” to finish the process. 
Review and Submit. Link to Google Ads Accounts I manage. Data Configurations. Enable Personalized Advertising: Google Analytics audience lists and remarketing events / parameters will be published to the linked Google Ads accounts. You can change this setting anytime while maintaining your link for other purposes. Enable Auto-Tagging: Auto-tagging allows Analytics to associate Google Ads data automatically with customer clicks, enabling richer and more detailed reporting data than manual tagging across a number of Google Ads metrics and dimensions. Any Google Ads reporting features or ad units added in the future will only be available if auto-tagging is enabled. Previous. Submit.

Google Merchant Center

If you’re using Google Ads for your eCommerce business, odds are you’re also using Google Shopping

To ensure your GA4 data gets integrated into your Google Merchant Center, you’ll need to link GMC to your new property with the following steps:

  1. In Google Analytics, click “Admin.”
  2. In the “Account” column, make sure that your desired account is selected. (If you only have one Google Analytics account, it will already be selected.)
  3. In the “Property” column, select the property you want to link to Merchant Center.
  4. In the “Property” column, under “Product Links,” click “Google Merchant Center Links.”
  5. Click the blue “Link” button.
  6. Click “Choose Account,” and then select the account you want to link your property to.
  7. Click “Confirm.”
  8. Click “Next.”
  9. Under “Enable Auto-tagging,” choose to enable auto-tagging for the Merchant Center account (or leave the settings as they are).
  10. Click “Next,” and then review and submit your configuration settings.
Screenshot of Google Analytics Merchant Center Links page. Red arrow points to Blue "Link" button. Another red arrow points to "Merchant Center" in the left navigation menu.

How to Set Up Google Analytics 4 Tracking

Now that you’ve completed the first part of the GA4 setup process, it’s time to get into the nitty gritty of conversion tracking.

Remember, Google Analytics 4 tracks events very differently from Universal Analytics. You can’t just import your UA setup into your tracking configuration; you’ll need to go through the following steps to properly configure your events tracking and ensure your data is collecting accurately.

In the section below, we’ve simplified the tracking process by offering a GA4 eCommerce Tracking Toolkit that your development team can upload quickly to your site. 

For a full description of the process without these tools, check out Google’s guide.

Step 1: Add a GTM Container to Your Site.

To get your Google Analytics 4 tracking to fire, you’ll need to use Google Tag Manager to add a custom tag to all pages on your site.

Fortunately, we’ve got you covered with our downloadable GTM container. It contains every piece of tracking code you need to start recording events on your eCommerce site. You can simply download it, import it, and configure it in a few steps.

You’ll find your unique measurement ID in Google Analytics 4. In Setup Assistant, navigate to “Tag Installation,” click on your web data stream, and then locate your ID in the upper-right corner of the page.

Google Analytics 4 screenshot, showing Web Stream Details page. Measurement ID is highlighted in the upper righthand corner of the page.

Add this measurement ID to our GTM container. You’ll also need to add this ID to your GA4 configuration tag.

Screenshot of Google Tag Manager, showing Google Analytics GA4 Configuration. Arrow points to the Measurement ID box to be filled in.

Then, the container and tag will be ready for installation on your website.

Step 2: Set up non-eCommerce Conversion Tracking.

From a non-eCommerce perspective, setting up conversion tracking in Google Analytics 4 can be fairly straightforward. We recommend identifying any applicable events and conversions in your Universal Analytics properties (again, saving eCommerce events for the next step) and making a list of those you feel comfortable replicating in Google Analytics 4.

Make sure to ignore events that are now automatically tracked — scrolling, outbound clicks, and more. In addition, “path”-type goals likely won’t need to be replicated for your site.

Once you’ve identified the metrics you need to track, you’ll want to set these up in Google Tag Manager using the Google Analytics 4 Event Tag type. 

Don’t forget to mark these events as “conversions” in the Google Analytics 4 interface when you’re done, if any of these events qualify as conversions.

Learn more about this kind of event tracking setup in Google’s detailed guide.

Step 3: Set Up eCommerce Tracking.

If your site is eCommerce, you’ll need custom tracking to gather data for all of your eCommerce site events. Fortunately, when you use our GTM container, this step becomes much simpler for your development team.

In essence, all they’ll need to do is code our GA4 Data Layer into your website. This data layer communicates to Google Tag Manager what eCommerce-related events are happening on the site. (This includes actions like purchases, add-to-carts, refunds, etc.) 

Adding the data layer code should be fairly straightforward for most eCommerce platforms. Our development partners typically report 5–10 hours of work needed to complete it. 

If you’re using a platform like Shopify, WooCommerce, BigCommerce, or Magento, you might consider using an app or extension to install the GA4 Data Layer on your site, instead.

Download Our
GA4 eCommerce Tracking Toolkit now.

Set Up Your GA4 Tracking Now for More Data Tomorrow

While you technically have until July 1, 2023, to set up your Google Analytics 4 account, we recommend doing so much sooner than that. The earlier you upgrade to GA4 and start tracking your website data, the more historical data you’ll have when Universal Analytics meets its end.

In addition, because Google Analytics 4 is a completely different beast than Universal Analytics, starting your configuration now gives your team more time for trial and error, to learn the new platform, and to parallel track for accuracy of data.

As mentioned above, GA4’s Setup Assistant is a great place to start — but it can’t provide the detailed, personal instructions that your eCommerce business needs. For that, we recommend working with a digital marketing agency like Inflow, which can customize your migration process and ensure all of your tracking is correct long before next summer’s deadline.

Learn how our team can help you by requesting a free proposal today. In the meantime, review our other helpful guides on Google Analytics 4: