Designing your website to be fully accessible to any customer, regardless of ability, is vital for providing the best customer experience possible. Not only does your online store have to be fully ADA compliant, but your checkout process must also be optimized with accessibility in mind. Many disabled web users rely on accessibility tools, like screen readers, to more easily navigate the web. By keeping these customers in mind, you’ll stay compliant with ADA standards and include all customers in your shopping experience. Let’s go through what ADA compliance means and how your online store can put it into action.

 

What is ADA Compliance?

ADA stands for the American Disabilities Act, which was enacted and amended to prohibited discrimination based on disability and required businesses to abide by accessibility standards. Although eCommerce websites are not physical places of public accommodation, it has been ruled that they too must be held to ADA compliance standards as private businesses open to the general public. But, it’s not just a matter of legal trouble if your online store isn’t compliant – you’re also running the risk of alienating and not accommodating any disabled customers who need to use accessibility tools to navigate the web. That’ll result in a loss of sales and a major decrease in user experience on your store.

Thankfully, it’s not difficult to ensure that your online store, and its checkout process, are ADA compliant so that any customer you have can use them easily. Let’s go through how your checkout process can be fully accessible.

 

Making Your Checkout Accessible

While you should work on changes to make your website ADA compliant, it’s important to focus on one of the most pivotal moments of the customer journey: the checkout process. When a customer checks out, they’re asked to input a lot of important information that’s necessary to complete their order. This process isn’t easy for every customer, so let’s go through what your site needs to have in order to make the checkout process seamless for any user.

Properly Tagged Elements

A big part of making your checkout process, and website, accessible to those with disabilities is appropriately tagging all necessary elements on the page. Since many disabled customers use the assistance of screen readers to navigate websites and do their online shopping, your checkout process needs to include code that’s formatted for those tools. If not, then screen readers won’t properly relay to customers the information necessary for completing a purchase.

ARIA Tags

ARIA specifications, short for Web Accessibility Initiative’s Accessible Rich Internet Applications, are role tags designed to make web pages more accessible for tools like screen readers. ARIA tags, which look like [aria-*], work by specifying an elements attribute to help it translate properly for assistive technology APIs. These ARIA tags can tell assistive technology that certain parts of the page are “live,” meaning they’ll be immediately informed when elements change. ARIA tags are mainly used for describing certain elements on a page; in the case of checkout, they’re used for labeling fields that need to be filled out like billing information and check boxes for “same as billing address.” To be fully accessible, your pages ARIA tags need to:

  • Match their attributes to their roles
  • Use valid values
  • Not be misspelled

Buttons

Any buttons on your checkout page, including “Apply” buttons for coupon codes and the “Check Out” button, need to be properly tagged for screen readers to appropriately read them to users. If the button isn’t tagged, then the screen reader will just announce it as “button,” which doesn’t provide essential information to the user.

Language Attribute

In order for a screen-reader to understand and properly relay the language of the checkout page, your site’s HTML needs to have the [lang] attribute with a valid language value in its header. This specifies the language that your page is; without it, the screen-reader will assume that the page is in its default language that the user chose when setting up the program. If your page isn’t using this default language, screen readers may not relay the page’s text and elements correctly.

Alternative Text

Since visually impaired users can’t see images as intended on your page, you need to accommodate for the accessibility tools that they use to understand them. By adding an [alt] attribute to your image, screen readers can read that alt text and describe to the user what the image is. If the image element is informative and important for the user to understand, be sure to add a short amount of descriptive alt text. However, if the element is purely decorative and doesn’t add necessary substance to a user’s understanding of the checkout process, then you can add an empty alt attribute for screen readers to ignore. For checkout pages, you’ll want to ensure that product thumbnail images have the proper alt text.

Lists

Checkout pages often use list formats, especially in drop down menus for country and state selection. To ensure that screen readers correctly understand and announce these lists to disabled users, they must only contain <li> elements and script supporting elements (<script> and <template>). Without this structure, customers won’t be able to fully understand the list and select the necessary options.

 

High Contrast Colors

Every step of your checkout process should be easy to navigate, and the colors you choose to use play a big part in that. Your website’s background and text colors should highly contrast each other so that they’re easier to see for those who have impaired vision. If your text and background are low contrast, it may be impossible for customers to make out what your page is asking them to do. This also applies to buttons and CTA’s, which need to stand out on the page so users can easily navigate to them. If you’re struggling with a color scheme that’s sufficiently high contrast, then a white background with black text always works.

 

Easy-to-Use Shopping Cart

Before the checkout process can even begin, customers need to be able to easily add, remove and edit items in their cart. Customers may also need to leave the shopping cart to continue shopping on your site, and eventually leave the cart to complete the purchase and checkout.

Essentially, shopping carts are made up of web-based forms comprised of data tables and form data. This data needs to be constructed with accessibility in mind in order for your checkout process to be ADA compliant. This is when it starts becoming important for you to:

  • Explicitly label all form input fields
  • Include clear text on all buttons explaining their actions
  • Make text machine-readable
  • Add organized data as is appropriate for screen readers

 

Optimized Checkout Process

Once a user reaches the checkout page, they need to be able to review their cart items, provide their shipping and payment information, and receive an order confirmation. Customers may also need to log into their account, register for an account, or provide custom details – all of which should be optional during checkout.

Reviewing the Cart

The cart section of your checkout page should include, in a table view, all of the products that the customer intends to purchase. This should include a clear list of important information, such as product name, SKU, description, price, number of units and the total cost of the item. The formatting of this section should make it easy for screen reader users to quickly understand exactly what they have in their cart before proceeding to shipping and payment information.

Entering Shipping & Payment Information

When entering shipping and payment information, some fields may be required to fill out in order for the purchase to go through properly. Your checkout process should clearly label which fields are required so that screen readers can relay that information to the customer.

Additionally, you should include functionality that allows forms to be submitted with either a mouse or a keyboard; screen-readers use a keyboard to navigate the page, so buttons can’t be exclusively triggered with a mouse click.

If a user’s input results in an error, either through incorrect shipping information or payment details, then the error needs to display clear instructions on what needs to be done to fix the error. Fields that need to be re-entered, such as cleared passwords or credit card number fields, should be labelled clearly as well.

Confirming the Order

Immediately following payment approval, customers should receive a purchase confirmation onscreen. This confirmation should include the total payment submitted and a review of the items purchased in the order. In addition to this on-screen confirmation, which should be formatted appropriately for screen readers to relay to customers, you should send a follow-up order confirmation email. It’s also beneficial that you offer customers alternative methods for contact and order confirmation, such as a phone call.

 

Flexible Customer Support

Disabled customers may need further assistance throughout the checkout process, so you should have customer support available to them via multiple channels. If an order was wrongly placed, changes need to be made to an order, or if a refund needs to be processed, you should have several methods of support and problem resolution for customers to access. This includes phone support, email, or live chat – whichever works best for the customer. On top of this, your team needs to be flexible and attentive to customer’s unique accessibility needs so that nobody feels left out when buying from your store.

 

Wrapping Up

If you’re coding your online store from scratch, it may seem like a lot of work to make your checkout process fully ADA compliant. Thankfully, many eCommerce platforms like Shift4Shop include checkout pages that are already optimized for accessibility, so you don’t have to worry about adding any extra code to be compliant. But that doesn’t mean that you shouldn’t be aware of other ways you can keep your online store and checkout accessible for everyone. By training your team to properly cater to disabled customers and designing your website with accessibility in mind, no customer will feel left out while shopping on your online store.