Dermatology practices sit at an unusual intersection of healthcare and retail: a single clinic website may host an online appointment scheduler, a patient portal with biopsy and pathology results, a teledermatology platform for remote skin checks, and an e-commerce store selling prescription-strength and cosmetic skincare products. Each of these touchpoints carries its own accessibility obligations, and dermatology sites routinely fail all of them. Because so much dermatology content is inherently visual—before-and-after galleries, mole and lesion photos, procedure explainer videos—designers lean heavily on imagery and neglect the text alternatives that blind and low-vision patients depend on. This is not a niche concern: roughly one in four American adults lives with a disability, and skin conditions such as psoriasis, eczema, and skin cancer affect people across every disability group. Legally, dermatology clinics are places of public accommodation under ADA Title III, and their patient-facing digital tools have drawn demand letters alleging inaccessible booking flows and portals. The European Accessibility Act adds obligations for the e-commerce components of dermatology sites—online product sales and paid teledermatology consultations—serving EU consumers. This guide explains the specific legal requirements, the accessibility failures most common on dermatology websites, and a practical checklist your practice can work through without hiring a specialist.

Legal Requirements

Key Accessibility Issues in Dermatology & Skin Clinics

Patient Portal Pathology and Lab Result Tables

Dermatology portals display biopsy results, pathology reports, and medication histories in data tables that frequently lack header cells, scope attributes, and captions. Screen reader users cannot tell which result corresponds to which sample, date, or body location—a serious problem when a table row indicates whether a lesion was benign or malignant.

How to fix:

Structure all result tables with proper <th> headers, scope attributes, and descriptive <caption> elements (for example, 'Pathology results for shave biopsy, left forearm, March 2026'). Provide a downloadable accessible PDF or plain-text summary of results. Test table navigation with a screen reader before launch.

Before-and-After Galleries and Clinical Photos Without Alt Text

Dermatology sites are dominated by imagery: before-and-after treatment galleries, close-up lesion photos, and procedure illustrations. These images almost never carry meaningful alt text, so screen reader users encounter 'image', a filename, or nothing at all. When a gallery is the primary evidence of a treatment's results, missing alternatives exclude blind patients from the same decision-making information sighted patients receive.

How to fix:

Write descriptive alt text that conveys the clinically relevant content of each image (for example, 'Before: raised red plaque on right cheek. After: clear skin following three laser sessions'). For decorative dividers, use empty alt attributes so screen readers skip them. Ensure gallery carousels are keyboard-operable with visible pause and navigation controls.

Inaccessible Appointment and Teledermatology Booking Widgets

Practices commonly embed third-party scheduling and telehealth widgets that were never tested for accessibility. These often use custom date pickers without keyboard support, time-slot grids that screen readers cannot parse, and video-visit interfaces where the 'join call' control is unlabeled. Patients who cannot use a mouse are locked out of booking or attending appointments.

How to fix:

Evaluate booking and telehealth widgets for WCAG 2.1 AA conformance before integration. If a widget is inaccessible, provide an accessible HTML form alternative with labeled fields and document a phone booking option. Confirm that video-visit controls (join, mute, end call) have text labels and are reachable by keyboard.

Skincare E-commerce: Filters, Variants, and Cart Updates

Dermatology stores sell products by skin type, concern (acne, rosacea, pigmentation), and prescription status. Product filters and variant selectors are often built with custom controls that lack labels and do not announce results, and cart updates happen silently. Low-vision and screen reader shoppers cannot confirm what they added or filtered.

How to fix:

Make product filters keyboard-operable and announce result counts through an aria-live region. Label every variant control and associate it with its product. Announce cart additions and removals via aria-live. Provide alt text for product images that includes product name, active ingredient, and concentration where relevant.

Insufficient Color Contrast on Clinical and Marketing Content

Dermatology brands favor soft, low-contrast palettes—pale pinks, light grays, and thin typography—that fall below WCAG contrast minimums. Critical details such as appointment confirmations, dosage instructions, and form validation errors can be nearly invisible to users with low vision or color vision deficiency.

How to fix:

Ensure body text meets a 4.5:1 contrast ratio and large text and UI components meet 3:1. Never rely on color alone to convey state (for example, red-only error text); pair color with icons and text labels. Test the full palette with a contrast checker and verify that focus indicators remain visible against every background.

Compliance Checklist

  • Patient portal result tables use proper <th> headers, scope attributes, and descriptive captions
  • Before-and-after galleries and clinical photos have meaningful, clinically descriptive alt text
  • Appointment and teledermatology booking widgets are fully keyboard-operable with labeled controls
  • Teledermatology video controls (join, mute, end) have text labels and keyboard access
  • Skincare product filters and variant selectors are keyboard-operable and announce updates via aria-live
  • Prescription and checkout forms maintain logical focus order with validation errors announced to screen readers
  • Color contrast meets WCAG 2.1 AA (4.5:1 for text, 3:1 for large text and UI components)
  • Color is never the only means of conveying information such as errors or availability
  • Procedure and explainer videos have synchronized captions and do not auto-play on page load
  • An accessibility statement is published with a contact method for reporting barriers and requesting accommodations

Further Reading

Other Industry Guides