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

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


GreggP

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 post
  • 1 month later...
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

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 post

Create an account or sign in to comment

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


×
×
  • Create New...