Generally, the purpose of alt text is to provide the same context to someone who is visually impaired as it would to someone who can see a photo. It usually touches on most of the elements of a photo, emphasizes the mood it’s intended to set, and sets a stage. Product alt text, however, is about providing the details of a product a sighted person may take for granted.
Product alt text will always depend on the product and will vary drastically. For example, the alt text for a candle would be much different than the alt text for a graphic T-shirt. It requires thinking about the aesthetics of a product and what information is necessary to convey to potential buyers. Where are the pockets? How many of them are there? Does a hemline fall mid-thigh or below the knees? Is the design modern or vintage? Is the metal brass or brushed nickel? If questions like this aren’t answered in a product’s description, they should be in the alt text.
For the sake of this post, let’s use a fabricated (non-functioning) listing for a couch as an example of things to consider when writing effective product alt text:
The Relaxinator by AccessiCart
Talk about fine lines and great curves. This couch will suit anyone’s appreciation for a minimal, modern style. A striking flared frame, comfy armrests and ultra-soft vegan leather that holds up to everyday wear and tear.
- 2 seats
- Vegan leather
- Removable cushions
- Pillows not included
Dimensions: 24″H x 76″W x 35″D
Colors: Current: Tangerous
What to write
The first thing you want to consider when writing product alt text is what is covered in the description and what is left up to visuals.
What the description says:
- Vegan leather
- 2 seats
- Contemporary style
- Overall dimensions
What the description does NOT say:
- Low back
- Gap beneath the couch & floor
- Dimension application
While descriptions are intended to hype a product up, they’re rarely used to effectively describe what it looks like. The selling points of a product vary from product to product, but you never want to take anything for granted. For example, someone may not consider the gap under the couch an important detail, while it could be a deal-breaker for someone else. A cat owner may prefer a couch that doesn’t have a space under it for their cats to hide under, or a new parent with a crawling infant may not want to take the chance of their curious child slipping under there. Alternatively, another household may enjoy the hidden storage capabilities of having space under the couch. By providing that small detail in the alt text, you could be providing someone with valuable product information that isn’t usually mentioned in the description.
If your product has variations, such as colors, they should be included in the alt text. This provides your users with confidence and independence. Maybe a visually impaired user liked the description of this couch but knows their non-visually impaired partner has a general color scheme going on in the living room. Our visually impaired user wants to text or email a picture of the couch to their partner after hearing one of the variables is within the color scheme of the living room. By providing a variable within the alt text, you can instill confidence that a visually impaired user is downloading the correct version of the image or sending the right link.
Speaking of color, it’s also not uncommon to use unusual or cutesy color names that not everyone maybe familiar with. For example, we’ve dubbed this couch “Tangerous,” a combination of “tangerine” and “dangerous.” This naming convention may not be immediately apparent to some users, particularly someone who has been visually impaired their entire life. Additionally, some colors, like our seafoam, have multiple interpretations and variations. So is this seafoam more blue or more green? Our other color names are desert and onyx. If you have unusual or highly specific names for your color variations, include the base color in the alt text. For example: tangerous orange, seafoam green, desert beige, and black onyx.
How to write it
It’s best to be objective when describing a product and avoid influencing language like beautiful, stunning, and awesome. Some subjective language can be used effectively if it’s intended to describe the aesthetic, such as elegant or contemporary. Ideally, the alt text of a product will stick to just the facts to avoid any misleading information.
If you have images of multiple angles, try to think about what new information is revealed in each angle. Touching on our couch again, what if there were cup holders in the arms or a magazine pocket on the side that weren’t visible in the straight-on shot? This would be new information you’d be able to provide in additional images. You want to avoid repetition where you can as product alt text in particular runs the risk of getting lengthy. That being said, you do still want each image to be effective in describing the product independently. If your product has an automatically advancing carousel of images, it isn’t guaranteed a screen reader user would land on the primary image first.
Try to keep the alt text as short as possible while still effectively describing an item. This is another reason to avoid unnecessary and subjective adjectives because they add to the character count. If a visually impaired user is browsing a lot of items while shopping, they’re going to be listening to a lot of alt text. By keeping length in mind and being considerate of a person’s time, you allow them to browse more of your shop more efficiently.
Considering your alt text will also help you write a more effective product description. What should go where? The description and alt text of your product images are all pieces of a puzzle you’re helping someone put together that forms a bigger picture. If information is beneficial for all shoppers, maybe that is information best put in the product description (such as the material of the couch, in this case faux leather). If it’s not information that makes sense to put in the description, consider it for the alt text. This will also allow you to consider whether or not something is missing from your listing. For example, the dimensions of our couch are 24-inch Height, 76-inch Width, and 35-inch depth. But would a visually impaired user know where these dimensions apply? If the back is only 24-inches high, how high up are the arm rests? Or the seating from the floor? Would this product listing benefit from a dimension diagram that would allow you to list it out in the alt text as well as provide these specifications for all of your users? While some would see this as additional work they’d have to do for each listing, the payoff would be priceless as you’d be providing information all of your users appreciate having.
A simple example of descriptive enough alt text for our couch would be:
(Tangerous Orange) Plush, modern faux leather couch. Back support 24-inches high, arm rests 21-inches high (5-inches wide). Two seat cushions (32-inches wide), two back support cushions. 5-inch gap between the floor and the couch. Minimal flat upolstered base, cylindrical light-wood peg feet
As you can see, I included applicable measurements in my alt text example. However, if there is an image depicting dimensions in your product gallery, you could save those details for that image and reduce your character count. You also may notice I excluded the pillows from my alt text. I specified in the description the pillows were not included, so I didn’t want to describe them in the alt text. They are not the product, and neither is the white rug under the couch. If this image were being used in a blog post (such as this one), mentioning these things would help set the mood the photo brings to the table. However, when it comes to product alt text, stick to factually describing what someone is buying and leave out the superfluous information.
How to practice writing product alt text (a fun game)
If you’re an eCommerce owner who is concerned about your own alt text, we have an experiment for you to try. Ask someone for help, like your partner, family member, or friend. Then go to a furniture store or department, call them and describe an item. Let them ask questions. Once you’re content with your description, send them a photo of the item you’re describing and see if their mental picture matched up with the item. The other person can then tell you if your description was accurate or where you could have done better. Repeat this with a few different items. Of course, you could choose any store you want. Furniture stores just tend to have a large variety of complex shapes and differences for you to practice with. While it may sound silly, it wouldn’t take that much time and you might be surprised with how much you learn about describing your own products and the questions you need to answer in your alt text.
By taking the extra few seconds it takes to provide alt text, you are allowing a huge group of people to navigate your store confidently and independently; and that’s huge and puts you ahead of the pack considering there are still a lot of major online eCommerce store failing to do so. You’re also helping your store’s search engine optimization (SEO) as alt text is considered additional content. This will make your products easier to find. By considering all aspects of your listing, you’re more likely to create a more cohesive experience that benefits all of your users and provides a better experience.
Never miss another article from us. Sign up today to receive our monthly newsletter to learn more about website accessibility, best content practices, and more.
2 responses to “How to write effective product alt text for accessibility”
How do I write alt text for multiple personalized wedding photo mugs?
They all have a photo, personalized text, date, and mug colour?
Hi Sandy! Great question!
As we go over in this article, it’s important to convey the details of what someone is buying that may be taken for granted by a sighted user. Additionally, you’re going to want to consider the item’s product description as well and make sure you fill in any gaps. For a personalized item, you’re going to want to focus primarily on the constants. I’m going to make an assumption that your product image is using a stock photo of a couple, an arbitrary wedding date, and made-up names. Describing the stock photo and typing out the date and names are irrelevant and unnecessary because these will be replaced with the user’s personalizations. However, the shape of the mug, the handle, the position of the elements, and the color are all examples of things that should be listed in the individual image alt texts. And, again, consider what gets left out of the product title and description that a sighted user would be able to visually deduce and either update the description or ensure they get mentioned in the alt text.
I’m picky about my mugs, especially their shape. In as few words as possible, really try to describe your product. “Coffee mug” isn’t specific enough – there are SO MANY different mug shapes out there that you really need to describe what yours looks like. Is it a standard cylinder? Does it have a rounded bottom? Is it more of an orb or oblong shape? Is the handle a standard loop – is that loop a half circle or a half oval (this detail could matter to someone with large hands)? Is it shaped like a heart? Does it swirl where it connects to the cup?
Assuming you state the cup’s fluid capacity in the description, an example of made-up alt text for images like this could be: (White) Cylinder-shaped mug with a flat bottom and a half-heart-shaped handle. Front of the mug: A red cursive personalizable text spot at the top, a personalizable image spot in the middle, and at the bottom is a black san-serif personalizable text spot. The interior of the mug is red.
My description is more generic doesn’t exclude other uses for the mug, such as graduations and birthdays, so I don’t specify the text fields as names and dates. However, you may want to be more specific and specify the intended use is for dates. Maybe your fonts and colors are customizable also so you may want to exclude those details. Focus on the constants in your alt text to describe the product itself. Only you can describe your mug in a way that is accurate to your product and depending on how many variables it has, you will have to tweak some details between them such as mug color, element variation, cup shape, etc.