Jump to content

Squarespace Social Links are NOT Accessible

Recommended Posts

I checked my site's WCAG compliance using the WAVE Accessibility Tool and I am getting errors on every page for the social links in the Footer. The error is: "Empty Link: A link contains no text". I believe the code should identify the link as Twitter, Instagram, Mail, etc. so people with disabilities using screen readers know what they are clicking on. I was told by Squarespace Technical Support that there is not currently a solution in place for this. I was told I would need to upgrade my subscription and manually fix the code. I was surprised about this response. Social Links are a standard block tool and I imagine they are used quite a bit. 

Does anyone know if Squarespace is working on a solution to ensure that this block meets accessibility standards? Or is there a workaround that does not require upgrading my subscription? Thanks for the help. 

Edited by Caroline_D
Link to comment
  • 3 weeks later...

I am having this problem as well! I ended up individually downloading all the icons for social media sites and remaking the social links in my footer with a code block with alt text.  I had to add an inline css height attribute to make all the icons the same height and width. It looks more or less the same and it doesn't flag any errors for WAVE... but now you have to know HTML to edit it. Not a great trade off since  I'm may have to pass the website off to someone less HTML-literate at some point, but works for me for now. I used this kind of code:

<a href="twitter.com/isfsd"><img style="height: 3em;" alt="Twitter" src="https://images.squarespace-cdn.com/content/5e4467780f0455f95cff518/1585073685193-GKZBXZ9EXWCXL2URQS29/Twitter_Social_Icon_Square_White.png?content-type=image%2Fpng"></a>

Can you access Markdown blocks? I know lower-tier plans don't have code blocks, but I tested this code in a Markdown block and it worked there as well.



Link to comment
  • 1 month later...

Hey @glidinsk,

Still having issues with this? We developed a way to make the native social icon blocks fully accessible using aria-labels instead of alt text. Visually impaired users who rely on a screen reader hear them announced as "twitter," "facebook," etc. instead of the default "button" - that way there's enough context to help them understand the purpose of each link.

If you're interested in making your site fully accessible (including zero WAVE errors), I'd encourage you to check out our free accessibility audit. Our team at Square ADA specializes in making Squarespace sites ADA compliant, and we do all the heavy lifting so you don't have to worry about that "HTML literacy" you mentioned 🙂

Edited by tcp13

Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas.

Link to comment
  • 2 years later...

Its a while since this topic was discussed.

I think Squarespace have improved their web build to make it easier to be more WCAG compliant but they still fall short.

I want to add a button or widget like Wordpress have which lets users highlight some text content and a voice reads it out.

I also want to know exactly how to use the "skip to content" as it does not seem to work.I am on the latest squarespace version...7.1 but only as a individual not a business.

Is there anybody out there that is up to speed on Squarespace and WCAG compliancy?


Link to comment
  • 3 months 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.