Squarespace Accessibility: What Website Owners Need to Know

Squarespace accessibility matters for site owners who must meet WCAG standards and for anyone who wants their pages to work for all visitors. This guide explains what Squarespace provides, what you must fix, and a clear 10-step audit you can run today.

What Squarespace provides and what it does not

What Squarespace provides

• Responsive templates that adapt to screen sizes.
• Built-in fields for image alt text and captions in the image block.
• Semantic HTML in many template components such as nav and footer markup.
• Site language and basic metadata controls in Settings.
• Code Injection for site-wide HTML, CSS and JavaScript when you need custom fixes.

What Squarespace does not fix for you

• Meaningful link text and logical heading order. Editors can create poor text even when the template is sound.
• Accessible forms and custom ARIA for advanced widgets. Form blocks need correct labels and error handling set by you.
• Colour contrast changes that require design decisions beyond simple site styles.
• Embedded third-party content such as some map widgets, calendars or video players. These often need extra work.
• PDF accessibility. Uploading an inaccessible PDF remains inaccessible unless you remediate it before upload.

Squarespace accessibility checklist for site owners

Use this checklist to find the most common issues. Each item names the place in the Squarespace editor where you make the change.

1. Images: Add descriptive alt text in the Image Block or the Gallery Block. For decorative images, mark them as decorative if the editor allows it.
2. Headings: Use headings in correct order inside Text Blocks. Start with H2 if your page has a site H1 elsewhere. Avoid skipping levels.
3. Link text: Make link text specific. Avoid “click here”. Edit link text inside the editor; do not rely on surrounding context.
4. Keyboard focus: Test the site by tabbing. Ensure navigation, forms and modal dialogs are reachable and operable with keyboard only.
5. Forms: Use visible labels on form fields and clear error messages. For custom HTML, pair inputs with <label for="...">.
6. Colour contrast: Check contrast for body text and UI elements. Use site Styles to change colours or add custom CSS when needed.
7. Multimedia: Provide captions for videos and transcripts for audio. Use player controls that are keyboard accessible.
8. ARIA and roles: Avoid adding ARIA unless you know why. Use native HTML where possible. Add ARIA only to fix specific, tested problems.
9. PDFs and downloads: Remediate PDFs for text order, tags and alt text before you upload.
10. Accessibility statement: Publish a short statement that lists your accessibility goals, known limitations and contact details for feedback.

Quick 10-step Squarespace accessibility audit (practical)

Run this audit on one representative page. It takes 15 to 45 minutes and finds the biggest, high-impact problems.

1. Open the page and use keyboard only. Tab through the page, open menus and forms, then note any element you cannot reach.
2. Run an automated check with a browser extension such as axe or WAVE. Save or export the report for fixes.
3. Check headings by scanning the page source or using the browser accessibility tree. Confirm a logical order for H2, H3 and so on.
4. Inspect all images and enter alt text for content images. Mark purely decorative images as decorative when possible.
5. Click each link and read its text. Make link text descriptive and unique within context.
6. Open every form, submit with empty values and check that error messages are clear and associated with the input fields.
7. Use a contrast checker on body text, buttons and links. Aim for WCAG 2.1 AA: 4.5:1 for normal text and 3:1 for large text.
8. Play any video. Confirm captions are available and that controls are keyboard accessible. Provide a transcript for audio-only content.
9. Test with a screen reader. Use NVDA on Windows or VoiceOver on macOS for a basic pass. Focus should move to main content and forms should announce labels.
10. Publish an accessibility statement page that lists the date of review, what you checked, and how users can contact you about problems.

Simple fixes you can make in Squarespace today

• Add alt text in the image editor. Be concise and describe the image function in context.
• Edit heading levels directly in the text editor. Use the Block toolbar to change heading size to H2, H3 and so on.
• Use the Summary Block with clear link titles if you show a list of posts or products.
• Enable captions or upload a VTT file where your video block supports it.
• Replace vague link text with a short, specific phrase such as “View menu PDF” or “Buy tickets for 12 Oct”.

How to add a skip link on Squarespace

A skip link helps keyboard and screen reader users jump to main content. Add this snippet to Code Injection in Settings if you can edit site-wide header HTML.

HTML

<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Put an id="main-content" on the page content block or a section -->

CSS

.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;left:0;width:auto;height:auto;overflow:visible}

Place id="main-content" on the block that contains the main page content. Test by tabbing to the first focusable element and by using a screen reader.

Testing tools and methods

• Automated tools: axe DevTools, WAVE, Lighthouse. These catch common problems but not everything.
• Screen readers: NVDA for Windows, VoiceOver for macOS and iOS.
• Keyboard testing: try full navigation and form use with Tab, Shift+Tab and Enter.
• Contrast checkers: any WCAG contrast tool to confirm 4.5:1 for normal text.
• Mobile testing: test with TalkBack on Android and VoiceOver on iPhone for touchscreen accessibility.

Common Squarespace-specific mistakes and how to fix them

1. Decorative images left with empty alt or with non-descriptive alt

Fix: Set decorative images to empty alt or mark them as decorative. For content images write text that describes purpose, not appearance alone.

2. Headings used only for visual size

Fix: Use paragraph text and adjust size for visual design if you need smaller text. Reserve heading tags for structure and outline.

3. Link text copied from titles or buttons without context

Fix: Edit the link label to include context. For example change “Read more” to “Read more about accessibility”.

4. Embedded third-party widgets without accessibility checks

Fix: Test the embed with a screen reader and keyboard. Replace or add accessible alternatives if the widget fails basic tests.

Accessibility statements and legal context for UK sites

Public sector websites in the UK must follow the Public Sector Bodies Accessibility Regulations. The Equality Act 2010 also affects how businesses manage accessibility when providing services. An accessibility statement should note standards used, testing methods, and contact details for users to report barriers.

When to bring in an expert

Hire an accessibility specialist when you have complex interactions, custom code, a large site, or when you must meet legal compliance and need an audit against WCAG 2.1 AA or WCAG 2.2. A specialist can produce a remediation plan, test with assistive technology, and verify fixes.

What to avoid

• Do not rely on automated overlays or widgets alone. They may create new problems and do not guarantee compliance.
• Avoid adding ARIA attributes without testing. Incorrect ARIA can worsen accessibility.
• Do not publish inaccessible documents. Remediate offline before upload.

Next steps for site owners

Pick one page and run the 10-step audit. Fix the high-impact items such as alt text, headings and link labels. Publish an accessibility statement and set a date to review the whole site. For complicated issues consult a specialist who can test with assistive technology and produce a remediation plan.

If you want, I can give a short checklist tailored to one page on your site or a code snippet for a specific issue. Tell me which page or which problem to target.