Hair salons, barber shops, nail salons, lash and brow studios, blowout bars, hair-color specialists, and combined salon-spas—independent neighborhood shops, suite-style operations like Sola Salon Studios and Phenix Salon Suites, multi-location regional chains, and national franchises like Great Clips, Sport Clips, Supercuts, Drybar, and Floyd's 99 Barbershop—run their entire customer-acquisition flow through a website with online appointment booking, before-and-after Instagram-style photo galleries, retail product purchases, gift-card sales, and stylist-portfolio pages. That flow is, for most customers, the only practical way to engage the business, and under controlling ADA Title III case law in every U.S. circuit (the Domino's, Winn-Dixie, and Robles lines of authority) the website is itself a place of public accommodation. Beauty services have been one of the highest-volume plaintiffs'-firm sectors since 2023: California Unruh and New York State Human Rights Law cases have been filed against hundreds of independent salons and small chains, with settlements in the $5,000–$25,000 range plus remediation costs and an ongoing remediation-monitoring obligation. The visual nature of the industry—heavy reliance on photography, color swatches, and video demos—creates outsized accessibility exposure that is rarely addressed in the off-the-shelf templates used by Squarespace, Wix, Showit, and StudioBookings sites. Salons inside hospitals, senior-living facilities, and university student-services buildings are sub-contractors of public entities and within the scope of the DOJ's 2024 Title II Final Rule, with a hard April 24, 2026 compliance deadline for jurisdictions serving 50,000 or more people. Salons in the European Union or marketing to EU-resident customers face EAA exposure as of June 28, 2025. This guide covers the legal framework, the salon-specific failure patterns, and a concrete compliance checklist.

Legal Requirements

Key Accessibility Issues in Beauty Salons, Hair Stylists & Barber Shops

Online Booking Widgets That Lock Out Keyboard and Screen-Reader Users

The single most common defect on salon websites is a third-party scheduling widget—Vagaro, Booksy, Square Appointments, GlossGenius, Schedulicity, Acuity, Fresha, StyleSeat, Boulevard, Mindbody, Salon Iris, or Phorest—where the date picker and time-slot grid cannot be operated with a keyboard, time-slot status is conveyed only by color (gray-disabled vs. green-available), and the stylist-selection step is built as a horizontal-scrolling carousel of photo cards with no visible text labels. A screen-reader user hears 'image, image, image, button, button, button' and cannot proceed. A keyboard-only user cannot tab into the calendar at all. Several plaintiff-firm settlements in 2024–2026 specifically targeted Vagaro and Booksy embeds on independent-salon sites.

How to fix:

Verify your scheduling vendor's VPAT and independently test with NVDA/Firefox and VoiceOver/Safari. The widget must support keyboard-only date selection (Tab into calendar, arrow keys to date, Enter to confirm) and time-slot selection (Tab into grid, arrow keys to slot, Enter to confirm). Slot status must be conveyed by text plus icon, not color alone (e.g., 'Available — 10:00 AM with Maria' vs. 'Booked — 10:30 AM'). Stylist cards must include accessible names and roles via proper alt text and ARIA labels, not photo-only cards. If the vendor cannot deliver this, switch to a vendor that can (Boulevard and Mangomint currently lead the salon-software market on accessibility) or build the booking on top of vendor APIs with a custom accessible UI. Always publish a phone-and-email fallback path for customers who cannot use the widget.

Before-and-After Photo Galleries Without Alt Text or Keyboard-Operable Lightboxes

Salon and stylist portfolio pages rely on grid galleries of before-and-after transformation photos, color-correction work, and balayage results. The standard implementation in Showit, Squarespace, Wix, and most WordPress salon themes (Bridge, Avada, Salon-WP) is an image grid where every photo has empty or filename alt text ('IMG_3492.jpg') and clicking a photo opens a JavaScript lightbox modal that does not trap focus, does not return focus to the originating thumbnail on close, and does not expose previous/next controls to keyboard users. Screen-reader users cannot understand what the photos depict; keyboard users get trapped or lose their place in the grid.

How to fix:

Write descriptive alt text for every photo in client-meaningful terms ('Long brunette hair before highlights with regrowth roots; same hair after full balayage with caramel and honey ribbons of color'), not stylist jargon. Lightbox modals must trap focus, expose Previous/Next/Close as keyboard-operable buttons with visible focus indicators, and return focus to the originating thumbnail on close. Mark decorative pattern photos with empty alt and aria-hidden. If the gallery is large, provide a 'View all photos' link to a server-rendered HTML page with the full set, not an infinite-scroll JavaScript implementation.

Service Menus and Pricing Published Only as Banner Images

Many salon and barber-shop websites publish their full service menu and price list as a flattened JPG or PNG banner image—often a screenshot of a Canva or Photoshop design—with no HTML alternative. Screen-reader users hear 'service menu image' and cannot read prices. Mobile users on slow connections see broken images. The menu cannot be machine-translated for non-English-speaking customers. Search engines cannot index the prices, hurting local SEO. This is one of the most-cited defects in 2024–2026 salon plaintiff complaints.

How to fix:

Publish service menus and pricing as HTML tables with proper <th> headers for service category, service name, duration, and price. Use semantic markup, not divs styled to look like a table. If a designed PDF version is desired for download, also publish a tagged-accessible PDF with proper heading structure, not an image-only export. Use real text, not text-as-image, throughout the site.

Gift-Card and Retail-Product E-Commerce Flows Without Accessible Forms

Most salons sell gift cards and retail products (Olaplex, Davines, Kérastase, Oribe) directly on their site through an embedded Shopify, Square, or Squarespace Commerce flow. Common failures: the gift-card amount-selector is built as an image swatch grid with no labels; the shipping form uses placeholder-only labels that disappear once the customer types; the credit-card iframe lacks an accessible name; reCAPTCHA v2 'I'm not a robot' challenges block screen-reader users. The post-purchase confirmation appears as a transient toast notification that is not announced by screen readers.

How to fix:

Use proper <label> elements (not placeholder text) for every form input. Amount selectors must be keyboard-operable radio buttons or a select element with descriptive options ('$25 gift card', '$50 gift card', '$100 gift card', 'Custom amount'), not an image-only swatch grid. Replace reCAPTCHA v2 with reCAPTCHA v3, hCaptcha accessible mode, or Cloudflare Turnstile. Confirm purchase completion with a server-rendered confirmation page or a persistent ARIA-live region that lasts at least 20 seconds, not a 3-second toast notification. The credit-card iframe must have a descriptive title attribute.

Color Swatches and Hair-Color Pickers That Convey Information by Color Alone

Hair-color pages, balayage services, and seasonal-trend pages frequently use color swatches—small circles of color with no text label—to indicate available shades. Screen-reader users cannot understand what 'a circle of medium-brown' means; users with color-vision deficiencies cannot distinguish similar swatches. The same problem appears in nail salons (gel-color swatches) and lash studios (lash-curl-pattern thumbnails). This is a direct WCAG 1.4.1 'Use of Color' violation.

How to fix:

Every color swatch must have a text label that is visible (not only on hover), describes the color in customer-meaningful terms ('Honey balayage', 'Champagne blonde', 'Espresso brown'), and is associated with the swatch via proper markup (label-for, fieldset-legend, or aria-labelledby). Provide a non-color cue—numeric hex code, descriptive name, or small icon variation—so the information is not encoded in color alone. Test the page with a color-blindness simulator and verify all critical information remains conveyable in monochrome.

Compliance Checklist

  • Online booking widget is keyboard-operable, time-slot status is conveyed by text plus icon (not color alone), and a phone-and-email fallback path is published
  • Stylist-selection cards expose accessible names via proper alt text, not photo-only cards
  • Before-and-after photo galleries have descriptive alt text, lightbox modals trap focus and return focus on close, and Previous/Next/Close are keyboard-operable
  • Service menus and pricing are published as HTML tables with proper <th> headers, not as banner images or screenshots
  • Gift-card amount selectors are keyboard-operable radio buttons or select elements with descriptive options, not image-only swatches
  • Color swatches have visible text labels in customer-meaningful terms and a non-color cue for color-blind users
  • Retail-product checkout uses proper <label> elements (not placeholder-only) and an accessibility-friendly CAPTCHA (reCAPTCHA v3, hCaptcha accessible mode, or Cloudflare Turnstile)
  • Business hours, address, and phone number are published as plain HTML text (not only inside a map embed or hero banner image)
  • If the salon operates inside a public hospital, public university, or county-run facility, DOJ Title II compliance is on schedule (April 2026 large entity / April 2027 small entity)
  • Accessibility statement is published, names the booking vendor and key third parties, and provides a documented contact path for accessibility issues
  • Site has been audited with axe, Pa11y, or Lighthouse and manually tested with NVDA, VoiceOver, and TalkBack in the last 12 months

Further Reading

Other Industry Guides