Squarespace accessibility fixes: alt text, contrast, forms and more

Before you start

Work through the fixes in the order below. They are the issues automated scans find most often on small-business sites and the ones that most often block visitors who use screen readers, keyboards or zoom.

1. Add alt text to images

Edit the page, click the image block, open the pencil (Edit) icon, and fill in the Alt text field (on some layouts the caption/filename field is used as alt). Describe what the image shows and why it's there: “Hygienist cleaning a patient's teeth”, not “IMG_2041”. Leave decorative images empty only if they add no information.

2. Fix low-contrast text

Go to Site Styles → Colors and look at each section theme. Light grey text on white and white text on pale photos are the usual problems. Aim for at least 4.5:1 for body text and 3:1 for large headings. Free checker: WebAIM Contrast Checker.

3. Label your form fields

In each Form block, give every field a clear Label. Don't rely on placeholder text alone, because it disappears when people start typing and some screen readers skip it.

4. Name your social and icon links

In Social Links, make sure each profile is a recognised network so Squarespace outputs its name. For image links, set alt text that says where the link goes (“Book an appointment”).

5. Use headings in order

Use one Heading 1 per page (usually the page title), then Heading 2 for sections and Heading 3 inside them. Pick heading levels for structure; change their size in Site Styles if needed.

Custom CSS for contrast (Design → Custom CSS)

/* example: darken body text */
.sqs-block-content p { color: #333; }

Related guides

All guides

Check your own site

Run a free homepage snapshot to see your top 3 issues, or order the $149 Fix-Pack for up to 10 pages with copy-paste fixes.