March 19, 2019

Are Your Images and Videos Invisible?


New image and video modules increase accessibility and mobility

A picture is worth… well, you know. But what if your online store left off all those pictures? That’s too often the case for the 10 million shoppers in the US who are blind, as well as the roughly 10% of the population with low vision and other impairments. These customers require assistive technology to bring those invisible pictures to life, in words and sound.

Photo of of shoes worn by an invisible person reflected on wet concrete

Photo by Shane Kell from Pexels

If you’re a regular to this blog, you probably know about our recent focus on accessibility and responsiveness. It is our mission to make sure SellPoints enhanced product pages can be viewed and enjoyed by everyone, no matter how they browse our pages or what device they are browsing on. SellPoints is passionate about providing the best experiences for our clients and their customers, and we pride ourselves on being an industry leader in this regard.

Our latest update to the SellPoints platform takes accessibility another step forward and makes strides in responsiveness for our most-used content: images and videos. Best of all, these new advancements don’t require our clients to make any updates. We’ve decided to announce this update on the blog so it might inspire other platforms to do the same (and so we can humblebrag).

Improved Product Images

We’ve changed the code for images featured in our photocaptions and galleries so they will be more accessible and responsive when viewed on different screen orientations or devices. Specifically, we’ve changed images from appearing as background images to image tags. We had been using ARIA labels that associated a text description with the image area. Now we use the ALT tag right in the image.

If you’re familiar with these terms, the details will probably make sense. For all the non-nerds, just remember we’ve simplified the code in your enhanced product pages so images will “read” better for screen readers used by visually impaired shoppers. These customers shop using a browser that speaks the content on web pages, so the wording and sequencing of text make all the difference.

Under the Hood

Of course all our clients get these updates automatically. But if you’re running a site and curious how to improve your own code, here are some key points to consider:

  • Look for any images implemented as CSS background tags.
  • Replace these with standard IMG tags. Screen readers know exactly how to handle those.
  • Use the ALT tag on your images. Every time. Otherwise the reader recites your filenames. Ugh!

Improved Moving Pictures

It’s not just images that have been upgraded, our videos have gotten a whole new makeover too. And videos are one of the most engaging experiences that really move the needle for conversions. Our latest update to our video player not only unlocks faster load times and enhances mobile responsiveness, but also allows brands to easily showcase a gallery of videos that can be viewed in a single module.

The SellPoints video viewer with a home improvement product video, one of five in a playlist

Tell compelling product stories with a SellPoints video playlist

Here are some ideas to make the most out of our new video player.

  • Keep each one short, delivering one clear message.
  • If you have a series of videos, put them together in a playlist, with your most compelling content in the first one.
  • Make the playlist easy to get to. We suggest placing it as a Story Point hotspot in the upper left corner of your product’s hero image.
  • If you embed from a platform like YouTube, turn off “recommended” videos at the end. Off-brand “surprises” aren’t really what you want to give your customers.

Side effects may include awesomeness

These changes also gave us the opportunity to go where your customers are going: mobile. The updated image and video modules resize more smoothly on various size mobile screens. They are also more responsive in vertical and horizontal screen orientation, all while eliminating the need to use two different layouts for mobile and desktop. It’s a better experience that keeps up with retail sites as they continually improve their mobile shopping experience.

Young woman with mobile phone and headphones swinging hair and happy

Photo by bruce mars from Pexels

All this flexibility does an even better job preparing alternative sizes and serving up the right one for your customer’s screen, whether it’s three inches wide on an iPhone or 21 inches on a big, bright OLED display. So if you’re a client building pages on SellPoints, you can build with the biggest, most gorgeous images of your products. The system creates all the right sizes for different screens, ready to make sales for your products.

TL:DR

We started with a focus on accessibility, and we ended with a better experience that is both beautiful and simple to use. Video playlists in fewer clicks, better tagging, and images that scale to the full range of screens. But the best part is that the changes have already rolled out! No content edits are required, and there’s no need to republish any SellPoints pages. All existing assets have already been updated. All you have to do is make sure your content is engaging and compelling enough so that when shoppers land on your product page they say, “I need that!”