Jump to content

Recommended Posts

There are far too many basic accessibility issues with Squarespace, that need to be corrected with injecting custom code. Their new "integrations" for auto-focus and skip to content, is far from enough. After building a site for a client, here are some basic things I've had to implement to make it SEMI W.C.A.G. 2.1 compliant [and who are we kidding, compliance is the bare minimum for accessibility]:

  • Links & Hover States: CSS for hover states on interactive elements. Inline and button links edited for padding and legibility.

  • Header & Navigation: Site tagline within a content property for screen readers. Navigation link styling, Mobile fixes for better spacing and alignment.

  • Footer Social Links: Original block was not screen-reader accessible using VoiceOver and TalkBack. Custom HTML block replacement for better descriptions, and sizing.

  • Newsletter, Search & Forms: Field style edits for better visibility. Error box edited for better contrast. Replacing red with the redwood brown and ivory moon text.

  • Squarespace Pages: Custom CSS and coding to fix internal pages. Including search results, 301 password protected pages, and blog and shop features. (As much as possible.)

And that's just a brief overview. The fact that we can't even add a compliant hover state, is ridiculous. I had to build out an entirely custom social footer link block just because it doesn't read out the social platform the icon goes to. For example, Patreon doesn't have an icon, so it uses the link icon. Which screen readers call out "link". That's it.

Adding custom CSS/development code is not best practice, and causes clunky loading. Who can we get in touch with to improve Squarespace accessibility?

Link to comment
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.