--- title: How to Make Your Checkout Process ADA Compliant description: Confused about how your online store's checkout needs to be accessible? Learn all about ADA compliance and how it applies to your checkout process here. image: https://blog.shift4shop.com/hubfs/iStock-510075714.jpg --- [![eCommerce Blog](https://blog.shift4shop.com/hubfs/shift4shop/shift4-blog.jpg)](https://blog.shift4shop.com/) [![shift4shop logo](https://blog.shift4shop.com/hubfs/shift4shop/shift4shop-Black.png) |Blog](https://blog.3dcart.com/) [Sign Up](https://www.3dcart.com/freetrial.htm?utm_campaign=Blog&utm_source=blog&utm_medium=blog-cta&utm_content=free-trial-cta) [Subscribe](https://blog.shift4shop.com/ada-compliant-checkout#subscribeBlock) [Customer Service](https://blog.shift4shop.com/topic/customer-service)| 7 min read # How to Make Your Checkout Process ADA Compliant By [Jessica Grioua](https://blog.shift4shop.com/author/jessica-grioua) [0 Comments](https://blog.shift4shop.com/ada-compliant-checkout#comments-listing) ![](https://blog.shift4shop.com/hubfs/iStock-510075714.jpg) 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](https://www.shift4shop.com/lp/ecommerce-university/what-is-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](https://blog.shift4shop.com/how-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**](https://developers.google.com/web/fundamentals/accessibility/semantics-aria), 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 ***
  • * elements** and script supporting elements (*