User Experience

Accessibility and the Checkout Process

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.

With carts that integrate individual forms to handle changes for each item, users cannot be certain of which item the form they are performing actions on. If the forms don’t have clear labels and field data, and the shopping cart has an unclear organization (because of nested tables for layout or a non-linear CSS-based construction), screen-reader users run a high risk of editing the wrong item.

I won’t get into issues with AJAX and JavaScript in forms. They are the same in shopping carts and purchase processes as they are in any other context. Just be sure to follow the principles of graceful degradation and progressive enhancement.

Beyond the functional issues of shopping cart construction, it’s important to also consider the clarity of information conveyed in the form. When you state a sale price, for example, is it clear whether the price listed is before or after the discount? Is it clear what kind of unit is being listed and sold? Are taxable items clearly marked, with tax percentages and amounts? If the pricing is in dollars, for example, is it clear which country’s dollar is listed?

All customers benefit from clear and explicit information; but for some customers with learning disabilities, it is crucial.

Assuming that your customers have successfully navigated your shopping cart, the next step is to check out and complete the purchase.

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.

Providing Shipping and Payment Information

• Clearly label which fields are required. Using color alone or a single asterisk (as is common) won’t be sufficient. Even an image of an asterisk with appropriate alternate text is better than simply using an unexplained character.
• Label all form field inputs and associate them explicitly. This makes it much easier for non-visual customers to know where to put their information.
• Make certain that all forms can be submitted either by using a mouse or the keyboard. Buttons which can only be triggered by a mouse click are disastrous to screen reader users.
• Display user errors with clear instructions about what steps need to be taken, and clearly define any fields that need to be re-entered (such as a cleared password or credit card number field).

Confirming the Purchase

You should always confirm the purchase onscreen immediately following the payment approval. Include the total payment submitted and a review of the items purchased.

Also, send a follow-up confirmation of the purchase. Advantages to sending email confirmations are that the process can be easily automated and email comes built in to most systems. However, if your business can support it, it’s a good idea to offer alternate confirmation methods, such as a phone call.

Don’t Neglect Customer Support

Customer support, which I discussed in my previous article “Customer Service For The Hearing Impaired,” is a key element of any successful ecommerce enterprise. Taking the steps to help your disabled customers through the purchase process, or offering them alternate methods of confirmation and resolution, will help to vastly increase customer confidence in your online store.

Conclusion

There are a lot of steps that go into building a truly customer-friendly checkout process. However, if executed correctly, these fundamental elements can help to ensure accessibility for every potential customer who visits your store.

Joseph C. Dolson
Joseph C. Dolson
Bio   •   RSS Feed


x