Sephora
Accessibility Audit.

Role
Lead Accessibility Analyst
Standard
High-Contrast AAA (7:1)
Scope
E-Commerce Checkout Flow
Impact
101 Issues Remediated
Sephora checkout UI case study presentation slide highlighting accessibility milestones and test criteria

Beyond Minimum Compliance

While major e-commerce platforms often settle for bare-minimum compliance (following milestones like Lucia Marett v. Sephora Inc.), they frequently contain structural barriers that block independent shopping.

The Old Mindset

Treating accessibility as an afterthought, temporary fix, or reactive legal accommodation.

Our Approach

Engineering a robust, inclusive e-commerce system seamlessly from the ground up.

Foundational POUR Principles

Use arrow keys or click to explore how we evaluated Sephora's checkout flow against strict accessibility benchmarks.

Visual Clarity Focus

Information and interface elements must be easily perceivable.

We verified that promotional graphics met strict contrast thresholds and replaced rasterized promo banner text with clean HTML layers and descriptive alternative text.

Multi-Step Evaluation Pipeline

We audited Sephora's complete checkout flow (cart, sign-in, shipping, payment, and confirmation) using an intensive, 4-stage testing protocol:

  1. Tooling: WebAIM checklists, Silktide extensions, and Lighthouse automated audits.

  2. Matrix Logging: Documented 101 distinct accessibility friction points.

  3. Figma Prototyping: Visualizing heading hierarchies and high-contrast focus rings.

  4. Expert Review: Cross-referencing fixes with external accessibility specialists.

Detailed diagram illustrating the 4-stage accessibility audit testing workflow from automated scan to expert review

Statistical Distribution of 101 Logged Issues

33.7%

Alt Text & Captions

Product imagery missing alt tags and promotional banners with embedded uncaptioned text.

14.9%

Link Navigation

Ambiguous link text lacking explicit destination context when read out of sequence.

12.9%

Focus Indicators

Default browser focus states lacking high-contrast visual perimeters for keyboard users.

Side-by-side visual comparison of original low-contrast Sephora checkout screen versus the redesigned accessible interface with 7:1 contrast ratios

Interactive Remediation Matrix

Select a category to examine the specific design systems solutions implemented across Sephora's checkout flow.

Perceivable Remediation

Descriptive Alt Text & Promotional Captions

Equipped all product thumbnails with detailed alt descriptions covering color, brand, and finish. Embedded promotional ad text was paired with explicit HTML caption layers so screen reader users never miss key sale terms.

Accessibility Knowledge Check

Read the e-commerce accessibility scenario below and select the correct remediation strategy to pass the challenge.

E-commerce Contrast Compliance Challenge

"A promotional banner on Sephora's checkout page features white text overlaid on a light pastel purple background, failing the 7:1 contrast requirement."

Which action achieves full compliance?

Project Training Assets & Downloads

Audit Spreadsheet All 101 Logged Issues (.xlsx)
Final Presentation Audit slides & analysis (.pdf)
Audit Figma File Design prototype & tokens (opens in a new tab)