Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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

There were 3550 lawsuits last year against websites that were inaccessible to people with disabilities. Is your Squarespace site ADA compliant? Find out in 60 seconds with our free accessibility audit

Link to comment

Create an account or sign in to comment

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

  • Create New...