A crucial element of any ecommerce website is the ability for all customers to complete a purchase on the site, including those with disabilities. If a potential customer cannot navigate your online store’s shopping cart or checkout process, it makes little difference what kind of accessibility the rest of your site incorporates.

Shopping carts and the purchasing process are complex elements of a website. There are a large number of functions that need to be accessible to all users in order to provide a satisfactory shopping experience.

The checkout process technically starts on leaving the shopping cart view, but since a website’s shopping cart is itself a crucial part of the accessibility equation, that is where I’m going to start.

What Does Your Shopping Cart Need to Do?

A shopping cart has four primary functions:
1. A view of the items in the cart.
2. The ability to modify the items in the cart.
3. The ability to leave the cart to continue shopping.
4. The ability to leave the cart to complete a purchase
This all sounds very simple, but for people with disabilities, all of these issues can be much more complicated.

One of the most common problems is that shopping carts either are (or include) web-based forms and that they need to convey a large quantity of information efficiently. As a result, shopping carts combine two of the trickier aspects of data organization: tables and forms. If either of these methods of organization is not constructed with accessibility in mind, the checkout process can leave disabled customers in the cold

Organize the Data Table

The basics of accessible shopping cart construction require a properly organized data table, with columns or header rows that contain descriptive titles. For example, Product Name could be followed by Product SKU, Product Description, Price, and so on.

All form input fields should be explicitly labeled, and all buttons should have clear text explaining their actions. This text needs to be machine readable, which means that image-based buttons need to have appropriate alternative text attributes. But, it doesn’t necessarily follow that a shopping cart is accessible just because all these basic concepts are followed.

If a screen-reader user wants to use a form, he or she usually needs to place the screen reading software into forms mode. In this mode, only the elements that are part of the form, such as input fields, labels and field contents, will be available to the user. Any additional comments, table headings, or production information will not be available.

If your shopping cart uses the common strategy of wrapping the entire cart in a form, screen reader users will need to constantly switch modes in order to access any non-form content in the cart. Since forms mode does not announce the presence of non-form content, this greatly increases the likelihood that a visitor will miss crucial information.

What Happens in the Checkout Process?

• The user needs to review purchases.
• The user needs to provide shipping and/or payment information.
• The user needs to receive a confirmation of his or her purchase.

Additionally, users may need to log in to their accounts, register for an account, or provide customization details. But, as these aren’t really fundamental parts of the purchase process, log in or registration processes should be made optional.

For accessibility, as with any other system, the more streamlined you can make your process, the easier visitors will find it to complete. If you want to avoid cart abandonment, don’t require visitors to spend a lot of time in your shopping cart.

Reviewing Purchases

Purchases should be presented in a table view. As in the shopping cart, information such as the product name and description, the price, the units, and the total cost of an item should be listed clearly. Using a table to properly organize this information will make it very easy for screen-reader users to quickly understand what they have in their cart.