A free, working cannabis & CBD SEO library, 500 guides. Browse the library ›
Home » Blog » Web Design, UX & Conversion » Building Accessible Cannabis Websites for SEO
Web Design, UX & Conversion

Building Accessible Cannabis Websites for SEO

In short

Four accessibility basics carry most of the weight on a cannabis site: descriptive alt text, 4.5:1 text contrast, a menu and cart you can reach with the keyboard, and a visible focus outline. Each one helps a real shopper, and three of the four also give Google cleaner signals to crawl.

Start with the four fixes that matter

Accessibility guidelines run long, but a dispensary site gets most of the benefit from a short list. Write alt text that describes the product or scene, not the file name. Hold text contrast at WCAG AA, which is 4.5:1 for body copy and 3:1 for large headings. Make sure every menu item, filter, and the cart work with Tab and Enter, not just a mouse. And keep a visible focus outline so a keyboard user can see where they are. Those four cover the errors that show up on nearly every cannabis site I audit.

Where SEO and access overlap

Three of those four pull double duty. Alt text hands Google words for an image it cannot see, which is how a product photo earns a spot in image search. Semantic headings and buttons give a crawler the same page outline a screen reader uses. Descriptive link text, "Shop live resin" instead of "click here", tells both a person and a bot where the link goes. Contrast is the one that is purely for humans, and it is still worth doing because a shopper who cannot read your prices does not buy.

The gray-on-white trap

The most common failure is not exotic. A designer sets body text to a soft #999 gray on a white card because it looks clean, and it lands at about 2.8:1, well under the 4.5:1 bar. Anyone reading in daylight on a phone squints. Darkening that gray to #595959 clears 7:1 and reads better for everyone, with no layout change. Run your body copy and your hero labels through a contrast checker before launch, since those are the two spots that fail most.

Worked example: a strain filter

Say you have a strain menu with Indica, Sativa, and Hybrid toggles built as clickable div elements with a JavaScript handler. A mouse user is fine. A keyboard user cannot Tab to them, and a screen reader announces nothing useful. Rebuild each toggle as a real button element with a clear label, add a visible focus style, and the same control now works for everyone and reads cleanly to a crawler. No visual change on screen, real change for the people the old version locked out.

Test it in ten minutes

You do not need a lab. Unplug the mouse and try to complete a purchase using only Tab, Shift-Tab, and Enter. Run one product page through a contrast checker. Turn on your phone's screen reader and listen to how the menu is announced. If any of the three feels broken, a share of your visitors already hit that wall. Fixing it usually means a class change or a swapped tag, not a redesign.

Key takeaways

  • Focus on four things first: alt text, 4.5:1 contrast, keyboard access, and a visible focus outline.
  • Alt text, semantic markup, and descriptive links help accessibility and Google at the same time.
  • Soft gray body text on white is the contrast failure to check before anything else.
  • Test with the keyboard, a contrast checker, and a phone screen reader in about ten minutes.

Frequently asked questions

What contrast ratio does a cannabis site need?

WCAG AA asks for 4.5:1 between normal text and its background, and 3:1 for large text over about 24px. Muted gray body copy on white and light labels on a green hero are the two spots that usually fail on cannabis sites, so check those first with a contrast tool.

Does accessibility actually help SEO?

It overlaps in a few concrete ways. Alt text gives Google words for images it cannot see, heading order and semantic HTML help crawlers parse the page, and descriptive link text beats a wall of read more links. Accessibility does not replace SEO, but the markup it forces is markup Google reads too.

How do I make a menu keyboard accessible?

Build it from real buttons and links so it works with Tab and Enter, keep a visible focus outline so a keyboard user can see where they are, and make sure a dropdown opened by hover also opens on focus. A shopper who cannot use a mouse should be able to reach every product filter and the cart.

Want this done for your brand?

We build cannabis & CBD search visibility with full transparency, for dispensaries, brands, and MSOs.

Get a free cannabis SEO audit ›