Skip to main content

Adding Alt Text to Images: Best Practices for ADA Compliance

Configure Alt Text for your Treez Ecommerce site

B
Written by Beth Graff
Updated over a week ago

Alt text (alternative text) helps screen readers describe images to visually impaired users. Proper alt text is required for ADA and WCAG compliance and improves SEO for your cannabis ecommerce store.

Where to Add Alt Text

In your CMS, locate the Alt Text field when uploading or editing images. This field appears in your image settings panel, typically labeled "Alt Text" with a text input area below it.

What Makes Good Alt Text

Be Descriptive and Purposeful

Describe what's important about the image in context. For product or promotional images, include:

  • Primary purpose (e.g., sale announcement, product feature)

  • Key visual elements that convey your brand message

  • Important text visible in the image

  • Relevant product details

Example:

"30% Off Topicals promotion - Flower Hub dropper bottle displayed with white ceramic sculpture and stacked stones on neutral background. Sale ends next week."

Keep It Concise

  • Aim for 125-150 characters when possible

  • Screen readers may cut off text after 125 characters

  • Prioritize the most important information first

Include Promotional Text

Always include visible text from promotional banners:

  • Discount percentages

  • Sale deadlines

  • Call-to-action text

  • Brand names

Alt Text by Image Type

Lifestyle/Styled Images

Describe the scene and products:

Pre-rolled joints arranged on marble tray with decorative rolling papers and grinder
Cannabis tincture bottles on wooden shelf with hemp leaves and natural lighting
Customer examining CBD topical cream in modern dispensary setting

Promotional Banners

Lead with the offer:

20% off all concentrates this weekend - shop wax, shatter, and live resin now
Buy 2 get 1 free on select edibles - valid through Friday

Decorative Images

If an image is purely decorative and adds no meaningful content, use empty alt text:

alt=""

What to Avoid

  • Don't start with "image of" or "picture of" - Screen readers already announce it's an image

  • Don't keyword stuff - Write for humans, not search engines

  • Don't be vague - "Product photo" doesn't help anyone

  • Don't omit the alt attribute - Even decorative images need alt=""

  • Don't repeat surrounding text - If the caption says it, alt text doesn't need to

Compliance Checklist

  • All meaningful images have descriptive alt text

  • Alt text is under 150 characters

  • Promotional text from images is included

  • Product names and key features are mentioned

  • Decorative images have empty alt attributes (alt="")

  • Alt text doesn't duplicate nearby text

  • Text is clear and written in plain language

Testing Your Alt Text

  1. Use a screen reader - Enable your computer's built-in screen reader to test

  2. Review with eyes closed - Does the alt text convey the same information?

  3. Check mobile - Ensure alt text works on all devices

  4. Audit regularly - Review alt text when updating product images

Did this answer your question?