E-Commerce Accessibility: Our Top 7 Issues for Product Detail Pages

For the vast majority of e-commerce websites, there is usually a single template powering over 90% of all pages on the site- the product detail page. So, when starting remediation on a typical shopping site, we’ll often recommend tackling the product pages first. Certainly, if the remediation is going in coding sprints, or the client is under a tight timeline to make as much of their site accessible as possible, it makes good sense to fix as many pages as possible by fixing one template.

The bad news is the product detail template is usually the page with them most number of issues in one template. Most of the time, the issues are not difficult to fix, but there are a lot of them. Here is a quick checklist of the top 8 issues we find when remediating a product detail page:

  1. “Quick Shop” modal or link to product page. Usually, clicking on a product title on a category or product collection page should bring the user directly to the product detail page. This is the most accessible scenario. If your site uses a “quick-shop” modal window, be sure the new window captures and keeps the keyboard focus, and that it is easy to close without using a mouse. We recommend allowing the user to close the modal via the ESC key, and a prominent and properly labeled “X” button.
  2. Zoom features and multiple photos. Be sure any zoom functions work with a keyboard. If they rely heavily on JavaScript, make sure all controls have adequate labels and ideally toggle on and off. Arrow icons which switch between  alternate photos need accessible labels and should be buttons or links—a span tag with CSS background will not be accessible out of the box.
  3. Variant selection tools.
    Focus indicators on color selection buttons
    Do controls have a clear focus indicator?

    Make sure that controls for selecting color swatches, material types, and sizes are accessible. They should toggle different colors or fabrics on and off– or cycle through the options using the enter key. If you use other keys, be sure to have adequate labeling in high-contrast colors. Example: “Use Spacebar to View Colors”. Are the product variations links or form controls and accessible by keyboard? Is the tab logical when tabbing through all variants? Do the controls change the existing product image or create a modal window? When a new color is chosen, is the new color announced to screen readers so they know what they’re about to add to their cart?

  4. Page layout and usability. Does content shuffle around as sizes and variants are chosen? Especially the “Buy Now” button– it should never move, if possible, and remain in the same, most easily reached area of the page. Does the quantity default to “1” item so the user doesn’t have to add an item before clicking the buy button?
  5. Sizing charts. Do they open in a new window? If so, will a screen reader know they are opening a new window? Are the sizes in an HTML table structure and if so, is the table only used to style a grid format, or does the table have a header and rows and columns declare their scope?
  6. Third party content and tools. If the product reviews are provided by a third party vendor, they are likely not tested with human users and might not be accessible. Be sure to test the ability for screen readers to read reviews easily and include the aggregate score. If you have a product video, be sure there are closed captions. And vigorously test user generated content tools and social sharing.
  7. Customization and gift messages. Avoid using complex tools for monogramming or customizing products. The concept of progressive enhancement is critical for functionality like this, as “less is more” when it comes to highly interactive tools. The temptation is always to make your tools cooler and fancier than the competition, but make sure there is an ability to customize the products in the easiest method possible. Test this sort of functionality using voice recognition software and keyboard only navigation.

This is just a short list of common issues, but remediating some of these critical functions and always having the very basic tools necessary will make product detail pages work better for all users.

We usually recommend watching some key metrics around the product detail page before and after remediation. Ideally, “time on page” decreases as customers are able to digest the information more quickly and work through the product options. Also, the product pages should convert shoppers into the checkout funnel more quickly. Sometimes clients perform A/B testing on accessible pages versus non-accessible pages for a short period during the remediation process and compare the flow and usage reports on both. HotJar is an excellent tool for this kind of thing.

It’s amazing how accessibility enhancements can make a product detail page more usable for everyone, greatly increasing the likelihood that the product will end up in a customer’s cart.

You Might Also Like