Guides
Shopify accessibility for beauty and skincare stores.
Defensible WCAG 2.2 AA documentation for beauty and skincare Shopify storefronts. Choose your state for location-specific guidance.
Beauty and skincare storefronts make color the primary selling tool: shade selectors, finish swatches, before-and-after photography, and "shop the look" imagery drive conversion. That is exactly why accessibility problems concentrate here. When a shade is conveyed only by a color dot with no name, when a before-and-after image has no alt text, or when a shade-finder quiz is built without keyboard support, an entire category of shopper cannot engage with the core product selection experience.
Paperfort runs an automated WCAG 2.2 AA scan against your live storefront pages using axe-core and produces three documents: a timestamped audit report with a prioritized remediation list, a completed VPAT 2.5Rev, and a hosted accessibility statement on your domain. Automated scans detect only a portion of WCAG issues (roughly a third to half), and the report is explicit about which findings are machine-detectable and where manual review still applies.
- 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 Beauty & Skincare Shopify stores
Shade and finish selectors that rely on color alone
WCAG 1.4.1, 4.1.2Shade pickers built as a grid of colored circles or rectangles, with no visible name and no aria-label, convey selection state and shade identity through color only. WCAG 1.4.1 (Use of Color) prohibits using color as the sole means of conveying information. WCAG 4.1.2 (Name, Role, Value) requires that the button's accessible name, such as "Nude Beige," is programmatically determinable by assistive technology.
Before-and-after and lifestyle swatch images with empty alt
WCAG 1.1.1Before-and-after result images and model lifestyle shots are frequently uploaded with alt="", which marks them as decorative and hides them from screen readers entirely. When these images communicate a product outcome or show a shade on a model, they are informational rather than decorative, and WCAG 1.1.1 (Non-text Content) requires a text alternative that describes what the image conveys.
INCI ingredient lists in data tables without header markup
WCAG 1.3.1Full ingredient or INCI tables on beauty product pages often use unstyled <div> grids or <table> elements without <th> headers, meaning the column and row relationships are visible but not programmatically encoded. WCAG 1.3.1 (Info and Relationships) requires that structural relationships conveyed visually are also available to assistive technology.
Shade-finder and skin-tone quiz widgets not keyboard operable
WCAG 2.1.1Interactive shade-finding experiences and skin-tone quizzes are often built as custom JavaScript widgets where clicking a swatch advances the flow, but pressing Enter or Space on a focused element does nothing. WCAG 2.1.1 (Keyboard) requires that all functionality is operable by keyboard alone, without requiring specific timing. If a keyboard user cannot complete the quiz, that entire path is inaccessible.
Beauty & Skincare accessibility: common questions
- Our shade swatches already show the shade name on hover. Does that satisfy WCAG 1.4.1?
- Hover-only labels do not satisfy WCAG 1.4.1 or 4.1.2 for users who navigate by keyboard or touch. The shade name must be programmatically associated with the button element at all times, typically as an
aria-labelattribute, so assistive technology can read it regardless of pointer state. - We label before-and-after images as alt="before and after." Is that sufficient?
- Generic alt text satisfies the structural check that alt text exists, but WCAG 1.1.1 requires the alternative to convey the same information as the image. For a before-and-after, the meaningful description includes what changed and for which product. Whether that threshold is met requires manual judgment, which the automated scan flags as needing further review.
- What WCAG criteria does a shade-finder quiz need to meet beyond keyboard operability?
- Beyond WCAG 2.1.1 (Keyboard), a multi-step quiz needs to manage focus correctly when the view changes (2.4.3 Focus Order), announce dynamic updates like step progression (4.1.3 Status Messages), and avoid timing requirements unless the user can extend them (2.2.1 Timing Adjustable). Each step also needs labeled controls under 3.3.2 and 4.1.2.
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.