Elevating E-Commerce Accessibility: Product Display Basics

Accurate, detailed product information is an essential part of any successful e-commerce experience. But if e-commerce sites aren’t created with accessibility in mind, many would-be customers may be unable to get the facts they need to make purchasing decisions—resulting in lost revenue opportunities for retailers.

So, how can designers and content authors showcase products effectively for all online shoppers? In part two of her “Elevating E-Commerce Accessibility” video series, accessible design expert Dana Randall explains how to create product listing and product detail pages that enhance every buyer’s journey.

Access part one of this series, covering accessible template design, here. 

Video: Product display basics

 

Your roadmap to accessibility in e-commerce

Get the guide

Video transcript

Welcome to part two of this three-part retail- and e-commerce-design-focused video series. I’m Dana Randall from Level Access. We’re going to cover some of the basics that should be part of designing any product listing or product detail page.

We’re going to focus on two different user profiles. User A is visiting your website or app and they don’t have a particular product in mind. They’re really there in a discovery mindset. User B is coming to your site or app with a particular product in mind. They’re in a conversion mindset.

User A: Discovery mindset

Let’s start with user A, the discovery mindset user. I’m going to start their journey on the product listing page. Let’s explore what might make a meaningful difference for a screen reader user. What are some of the baseline requirements? And what’s something that you could put a little extra thought into to shift a buying experience from good to great?

Tip number one:

Alt text. Alt text is a requirement. It’s critical to include meaningful alt text on all your product images. In this example, I’m sharing a product image with the alt text, “blue handbag.” Is this correct? Yes. Will it pass? Sure. This is required to provide your screen reader user with a good experience.

Tip number two:

Exceptional alt text. Have you considered how you can take alt text from fine to fabulous? What if I really considered how I could more meaningfully describe the product?

What shade of blue is it? Sky blue. Also, I noticed that this product has texture to it. This might be something the customer really enjoys or dislikes in their products. If the alt text on this product said, “sky blue satchel with perforated leather,” this would give the customer a much better sense of the product and its details.

Now, I know what you might be thinking. That information’s on the product detail page. This is true. But your screen reader user would need to click through to every product detail page to get that information. You could provide a more efficient experience by providing that information in the alt text.

The complete playbook for inclusive digital marketing

Access the guide

User B: Conversion mindset

Now let’s go to user B, the conversion mindset user. We’re going to explore the product detail page, or PDP. They came to your site or app knowing exactly what they wanted, so they landed on your product detail page. How can we design the best possible experience for this user to select the right size and color, and enable them to add the product to their cart effectively and efficiently?

Let’s take this journey with a customer who uses a keyboard or alternate input device. In this demo example, I’m using the keyboard to navigate around the PDP. As a designer, it’s important to think about all users and be sure to consider users beyond those using a mouse or trackpad. If we overlook this journey, it’s likely we’ll design an experience that’s less ideal, or even nonfunctional, for some users.

Tip number three:

Tip number three is for defining focus. Something we need to do in design is to clearly define which elements receive focus. We also need to think about what the focus indicator looks like, and in what order we want focus to be. It’s possible that the visual order from left to right, or top to bottom, isn’t the ideal flow for the best user experience, especially in a PDP where content might have contextual groupings or be in multiple columns. By thinking about the priority and the context of the elements, we can really improve the user’s journey on the page.

Tip number four: 

I also want to touch on the different color options. It’s common for a PDP to offer the product in different colors, but it’s also common for those color swatches to receive alt text that are your internal color codes. Those are not really meaningful to the user, so that’s tip number four: color swatches.

Keep in mind that your internal color codes are not particularly meaningful for your customer, and it would be more meaningful for you to accurately describe the color. For example, “RD-100” isn’t meaningful, but “bright red pebbled” is.

Now, these tips I shared apply to all profiles, so please keep them all in mind when designing. If you found any of this helpful, we’ve got more for you. Check out our other resources on accessibility and retail.

Guide every customer from discovery to conversion

Visit our retail hub for more resources on accessible design in e-commerce, and to learn how Level Access can support.