Guides
Shopify accessibility for hemp and CBD stores.
Defensible WCAG 2.2 AA documentation for hemp and CBD Shopify storefronts. Choose your state for location-specific guidance.
Hemp and CBD storefronts add a layer of UI that almost no other e-commerce vertical shares: the age-gate modal. It is typically the first interactive element a visitor encounters, and it is also one of the most consistently inaccessible components on any Shopify store. An age gate that traps keyboard focus, fails to announce itself to a screen reader, or lacks a dismissible path for assistive technology users effectively blocks the entire storefront for those shoppers before they reach a single product.
Beyond the gate, CBD and hemp stores handle product detail that is genuinely complex: Certificate of Analysis documents, potency and dosage selectors, cannabinoid ratio tables, and strength tiers. These components fail WCAG 2.2 AA in recognizable patterns across the category. Paperfort's automated axe-core scan covers your live storefront pages and produces a timestamped audit report, a completed VPAT 2.5Rev, and a hosted accessibility statement. Automated scans detect only a portion of WCAG issues (roughly a third to half), so the report also marks where manual review is still needed.
- California
- New York
- Texas
- Florida
- Illinois
- Pennsylvania
- Ohio
- Georgia
- North Carolina
- Michigan
- Virginia
- Washington
- Arizona
- Massachusetts
- New Jersey
- Tennessee
- Indiana
- Colorado
- Maryland
- Missouri
Common WCAG 2.2 AA failures in Hemp & CBD Shopify stores
Age-gate modal that traps keyboard focus or is not announced to assistive technology
WCAG 2.1.2, 4.1.2Age verification overlays are almost always custom-built, and the two failure modes are predictable: either Tab cycles through the Yes/No buttons and then escapes into the page behind (no focus trap when the modal is open, violating the WAI-ARIA dialog pattern), or focus never enters the modal at all and screen readers announce nothing when it appears. Both fail WCAG 2.1.2 (No Keyboard Trap) or 4.1.2 (Name, Role, Value). The modal needs role="dialog", aria-modal="true", an accessible name, and focus managed programmatically on open.
Certificate of Analysis (COA) lab results embedded as images rather than structured data
WCAG 1.1.1, 1.3.1Lab reports are routinely published as flat image scans or low-resolution JPEGs without any alt text describing the cannabinoid profile. A screen reader user receives nothing. Where COA data is presented in an HTML table, it frequently lacks <th> header cells to identify columns (Cannabinoid, Result, Limit, Unit), violating both WCAG 1.1.1 (Non-text Content) for image-embedded versions and 1.3.1 (Info and Relationships) for improperly marked-up tables.
Potency and strength variant selectors that convey selection state by color only
WCAG 1.4.1, 4.1.2Strength-tier buttons (250mg, 500mg, 1000mg, 2500mg) are often styled as pill buttons where the selected state is indicated only by a background color change, with no text alternative, border, or aria-pressed or aria-checked state. WCAG 1.4.1 (Use of Color) prohibits using color as the sole visual means of conveying information, and 4.1.2 requires that the selected state be programmatically determinable.
Cannabinoid ratio comparison tables missing programmatic column headers
WCAG 1.3.1Product comparison tables listing CBD:THC ratios, terpene percentages, and serving sizes across product variants are frequently coded as styled <div> grids or as HTML tables stripped of <th scope="col"> markup. Without proper header associations, a screen reader user navigating cell by cell has no way to determine which column each value belongs to, violating WCAG 1.3.1 (Info and Relationships).
Hemp & CBD accessibility: common questions
- Our age gate is just two buttons. How complicated can the accessibility fix really be?
- The markup is straightforward: wrap the overlay in a
<div role="dialog" aria-modal="true" aria-labelledby="age-gate-title">, give it a visible heading, and manage focus programmatically so it moves into the dialog on open and returns to the trigger on close. Tab should cycle only within the dialog while it is open. The pattern is documented in the WAI-ARIA Authoring Practices. A two-button modal is a three-hour fix when you know the pattern; it is a blocker for every keyboard and screen reader user until it is addressed. - We link to our COA as a PDF. Does WCAG apply to PDFs too?
- A PDF published on your storefront is considered web content under WCAG and is expected to meet the same success criteria. Tagged PDFs with proper reading order, table headers, and text alternatives for non-text content satisfy the standard. An image-only PDF scan of a lab report does not. A practical alternative is to present the key COA data in an accessible HTML table on the product page and link to the PDF as a supplemental document.
- Does Paperfort's scan catch the age-gate accessibility failures?
- Automated scanning detects some age-gate issues reliably, including missing ARIA roles and unlabeled buttons. It cannot verify focus management behavior (whether focus actually moves into and out of the dialog) or confirm that the modal is announced correctly when it appears. Those are manual-only checks that require keyboard and screen reader testing. The audit report will flag what the scanner finds and note where manual review of the age-gate interaction is still needed.
Other industries
Paperfort produces defensible WCAG 2.2 AA documentation — an audit report, a hosted accessibility statement page, and a VPAT 2.5. It is documentation, not an overlay widget, and it is not legal advice.