Elevating E-Commerce Accessibility: Template Design Tips and Tricks

The accessibility of an e-commerce experience can make—or break—its success. If potential customers can’t navigate a check-out flow, or access key product information, they’re unlikely to make a purchase. And many of the choices that shape an e-commerce site’s accessibility are made by designers.

In her video series, “Elevating E-Commerce Accessibility,” accessible design expert Dana Randall shares bite-sized, actionable tips designers can use to bring inclusive e-commerce experiences to life. The first installment in this series, covering template design, is now available below—and stay tuned—there’s more to come!

Video: Template design tips and tricks

In the first part of this video series, Randall explores how designers can future-proof templates to ensure accessibility as content changes. Access the full video or transcript to learn how to create versatile templates that are as inclusive as they are compelling.

 

Your roadmap to accessibility in e-commerce

Get the guide

Video transcript

Hi, I’m Dana Randall from Level Access. This video is about template design tips and tricks: how to future-proof your templates’ accessibility and plan ahead for content changes.

Brand identity in retail and e-commerce is everything. Several years of my career were spent working in fashion and retail. When I think of an industry where brand is everything, fashion, retail, and e-commerce surely come to mind.

Templates are a framework that you’ve created as a designer to support a wide variety of content for your app or website over time—from season to season, one campaign to the next. These design templates are going to house your creative product shots and campaign content for months to come, or, in some cases, maybe even several years.

Unfortunately, it’s common for us to see websites that were accessible at launch become less accessible over time. This is often due to the content, not the site’s structure or even the templates themselves. How can you future-proof your templates to maintain accessibility over time?

Pressure-test your template against a range of imagery, especially if there’s text overlaying an image. Here, I’m sharing a template as it was initially designed and intended by the designer. In this example, the designer had adequate white space to support the text that’s being overlaid. I do want to note that, in this example, the text over the image passes contrast and legibility. But what happens when the image has a darker background? Or how about when there’s a background that’s a bit more busy than that initial image?

Tip number one:

Always check your templates using light, dark, and patterned backgrounds. This is great for pressure-testing. It helps you identify where you might have to adjust the design to accommodate this type of content going forward. So, what are those types of adjustments?

Tip number two:

Design into your templates a protective gradient or overlay to help enhance text legibility. This gives your content team a little more wiggle room and flexibility with their imagery options.

A practical framework for accessible design

Get the guide

Tip number three:

Provide clear guidelines for your content team on the type of imagery they should be using in the template, including things like where the focal point of the image should be. Offer preset blends, blurs, and burns that they can use with their images to help improve legibility. Also, don’t forget in those guidelines to include best practices like not embedding text into images. Screen readers won’t be able to read the text embedded in those images, and this creates more work downstream for those that are responsible for writing the alt text.

Tip number four:

Don’t forget about mobile and responsive layouts. It’s common for things to be fine on desktop, but on mobile, accessibility falls apart. Be extra careful with text overlays on mobile. These lockups on mobile may fill more of the image, creating legibility and contrast issues. Plan for that in your templates and provide guidelines around copy length or at your breakpoints. Switch your overlay layouts to stacked layouts for mobile.

And finally,

Tip number five:

Pressure-test your design using 200%, or even better, 400% text zoom. Think about how you need to wrap or reflow that text to avoid any unwanted collisions with other content or your call to action.

If you found any of this helpful, we’ve got more for you. Check out our other resources on accessibility and retail.

Start improving customer experience with accessible e-commerce design

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