Jump to content

Google Lighthouse suggestions; what level of credence do you give them?

Recommended Posts

Site URL: https://www.serendaya.co.uk

I am in the process of rebuilding a website (our own actually) and as such it is a simply landing page at present whilst the rest is fleshed out. However I thought I'd do a lighthouse report on it anyway (in part to check the difference between a 'normal' and 'incognito' window to see what my Macbook is impacting).

Anyway despite a very simple page the 'Accessibility' score, whilst good, flags in improvements that the social links don't have any discernible names:

Failing Elements
a.sqs-svg-icon--wrapper.linkedin-unauth
a.sqs-svg-icon--wrapper.twitter-unauth
a.sqs-svg-icon--wrapper.facebook-unauth
 
Given these are input by the built in SQSP social options I'm a bit surprised by this, and as have only just discovered this haven't as yet worked out a way to input a better name for them to improve this....
 
Has anybody noticed this issue before? If so did you do anything/resolve it? Or am I simply being too picky, and should just ignore it....?
Its also to note that the LinkedIn, twitter and Facebook icons are identified but the instagram one isn't...?
 
Thoughts?
 
 
Link to comment
  • 1 month later...
  • Replies 1
  • Created
  • Last Reply

Hey @GreggP,

Lighthouse appears to be flagging the empty aria-labels on the social icons in your site footer. This has been a known issue on all Squarespace sites for quite some time.

image.png.382bc01c6eeab6492e57c6606aa591e7.png

For a blind person using a screen reader (software that audibly announces the contents of the page), the purpose of these linked icons would be unclear. One way to fix this would be to replace the icons with linked text, as is suggested by Squarespace's accessibility guide here:

image.thumb.png.77dabd4badd960af7f0799cea0ed5d98.png

That's a pretty lame solution though, so if you wanted to fix the existing icons, you could add correct aria-labels using custom code. Try adding this within Settings > Advanced > Code Injection > Footer Injection:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

<!-- Add aria-label Attributes to Social Icons -->
<script>
  $(document).ready(function() {
    $("a.linkedin-unauth").attr("aria-label", "LinkedIn");
    $("a.facebook-unauth").attr("aria-label", "Facebook");
    $("a.instagram-unauth").attr("aria-label", "Instagram");
  });
</script>

With this expected result:

image.png.6fcaae254f0826d45141bba3da1a854b.png

If you're looking for further accessibility assistance, feel free to send me a DM or check out our resources at SquareADA.com. Our custom code is often able to minimize or entirely fix the issues identified by Lighthouse and other accessibility audit tools:

image.png.6f7bdb772ed3cffa3d44407cc4e06ab5.png

Hope this helps!
-Tyler

The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.