Med spa and aesthetics clinic website accessibility: consult booking, treatment menus, before-and-after photos and intake forms

Med spas, aesthetics clinics and cosmetic dermatology practices sell consultations, injectables, laser and skin treatments, memberships and packages almost entirely online. The sites are usually elegant: pale text on cream backgrounds, image-only treatment menus, drag-to-compare before-and-after sliders, and a third-party booking widget. Those same design choices stop people who use a screen reader, magnifier, keyboard or voice control, and a client who can't book a consult just books somewhere else. Here's what to check.

1. Consultation and treatment booking

Test the whole booking flow with only the keyboard: pick a treatment, a provider, a date and a time, then confirm. Each time slot should be a real button whose name includes the full time, and the confirmation should be announced, not only shown as a green tick. If your booking vendor's widget fails, put a phone, text and email option right next to it and ask the vendor for their accessibility conformance report (VPAT). (WCAG 2.1.1, WCAG 4.1.2, WCAG 4.1.3)

<fieldset>
  <legend>Available consult times, Tuesday Nov 10 (example values)</legend>
  <button type="button">10:00 AM with Provider A</button>
  <button type="button">1:30 PM with Provider B</button>
</fieldset>
<p role="status">Booked: consultation, Tue Nov 10 at 10:00 AM. A confirmation is on its way by email.</p>

See our 10-minute booking widget test.

2. Treatment menus and prices as real text

A treatment menu designed as one image, or posted only as a PDF, can't be read by a screen reader, can't be resized and isn't indexed by search engines. Put treatments, units and starting prices in a real table with header cells, and keep it current. (WCAG 1.4.5, WCAG 1.3.1)

<table>
  <caption>Treatment menu (example values, prices from)</caption>
  <tr><th scope="col">Treatment</th><th scope="col">Typical time</th><th scope="col">Price from</th></tr>
  <tr><th scope="row">Hydrating facial</th><td>60 minutes</td><td>$120</td></tr>
  <tr><th scope="row">Laser hair removal, small area</th><td>15 minutes</td><td>$90</td></tr>
</table>

See accessible pricing tables.

3. Before-and-after photos and sliders

Give each before-and-after photo alt text that says what changed in plain, factual words ("Before and after, 3 sessions: lighter sun spots on left cheek"), not "result" or the file name. Drag-to-compare sliders need a keyboard and single-pointer alternative, such as two buttons or simply showing both photos side by side. Auto-advancing galleries need a pause button. (WCAG 1.1.1, WCAG 2.5.7, WCAG 2.2.2)

<figure>
  <img src="before.jpg" alt="Before: forehead lines at rest">
  <img src="after.jpg" alt="After, 2 weeks: softer forehead lines at rest">
  <figcaption>Example result for one client. Results vary.</figcaption>
</figure>

See alt text examples and accessible carousels.

4. Intake, health history and consent forms

Every field needs a visible label (not placeholder text), contact fields need autocomplete, errors need to say in words what to fix, and long forms need a timeout warning with a way to extend. Don't ask returning clients to re-enter what they already gave you. If consent forms are PDFs, make them tagged, fillable PDFs or offer a web form. (WCAG 3.3.2, WCAG 1.3.5, WCAG 3.3.1, WCAG 3.3.7, WCAG 2.2.1)

<label for="dob">Date of birth (MM/DD/YYYY)</label>
<input id="dob" name="bday" autocomplete="bday" aria-describedby="dob-err">
<p id="dob-err">Enter your date of birth as MM/DD/YYYY, for example 04/18/1985.</p>
<!-- example values -->

See form error messages and accessible contact forms.

5. Memberships, packages and financing

Membership tiers shown as styled cards often hide the price or what's included from screen readers. Use headings and lists for each tier and make "Join" buttons say which tier ("Join the Glow membership"). Financing calculators need typed inputs, not only sliders, and an announced result. If financing runs on a third-party site, say so before the link. (WCAG 2.4.4, WCAG 2.1.1)

6. Patient portals and logins

Let password managers fill logins, don't block paste, and avoid puzzle CAPTCHAs. Most portals belong to a practice-management vendor, so ask them for their VPAT. See accessible logins and CAPTCHA and what a VPAT is. (WCAG 3.3.8)

7. Contrast on light, elegant branding

Thin pale-grey or blush text on white or cream is the most common problem on aesthetics sites. Body text needs at least 4.5:1 contrast and buttons at least 3:1 against their background; darkening the text a few shades usually keeps the look. Pages must also work at 200% zoom and on a narrow phone without sideways scrolling. (WCAG 1.4.3, WCAG 1.4.11, WCAG 1.4.10) Try our contrast checker.

8. Videos, pop-ups and access details

Caption treatment explainer videos and Instagram reels you embed, and don't auto-play sound. Promo pop-ups ("$50 off your first visit") must close with Escape and not cover the booking button on a phone. Add factual access details to your contact page, listing only what is true. Avoid "fully accessible" with no detail. (WCAG 1.2.2, WCAG 2.4.11)

<p>Access: step-free entrance from the rear parking lot, elevator to suite 200, treatment rooms on one floor. Need something else? Call or text 555-0100.</p>
<!-- example wording, list only what is true for your clinic -->

See the pop-up and chat widget checklist and video captions.

Common mistakes

• Treatment menus and specials posted only as images or PDFs.
• Pale text that fails contrast.
• Drag-only before-and-after sliders, and photos with no alt text or "result" as alt text.
• A booking widget that can't be used with a keyboard, with no phone or text option next to it.
• Intake forms with placeholder-only fields and red-border-only errors.
• An overlay widget instead of real fixes. It won't fix booking widgets or forms, and the FTC fined one overlay vendor $1 million in 2025 over compliance claims; see overlays vs real fixes.

A 15-minute check you can do today

1. Using only Tab, Shift+Tab, Enter and Space, book a consultation. Can you always see where you are?
2. Find your price for one popular treatment. Can you select it as text?
3. Use a before-and-after slider without a mouse.
4. Submit your intake or contact form empty. Do the errors say what to fix, in words?
5. Zoom to 200% on a phone-width window. Are the booking button and phone number still usable?
6. Run the free homepage scan for code-level problems.

What a scan can and can't check here

Our scan is automated, so it finds only part of the barriers on the pages it visits: missing alt text, unlabelled fields and buttons, low contrast, missing page language and similar code problems. It can't book a real appointment, sign in to a patient portal, judge whether your alt text describes results accurately, or check that your access details are true, which is why the 15-minute check matters. Our Fix-Pack scans up to 10 public pages and gives copy-paste fixes for your platform. Platform steps: Squarespace, Wix, WordPress, Webflow. If your practice gets HHS funding, see the HHS Section 504 web rule and check with your attorney whether it applies. Related: salon and spa websites, dental practice websites, medical clinic websites, accessibility statement template.

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• Careers page and job application accessibility: job listings, application forms, resume uploads and applicant portals
• WCAG 2.2 explained for small-business websites
• Squarespace accessibility fixes: alt text, contrast, forms and more
• Wix accessibility fixes: a practical checklist

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.