Jump to content

Links do not have a discernible name

Go to solution Solved by jpeter,

Recommended Posts

Hello, I am working my way through a lighthouse report and fixing some accessibility issues.

https://www.116pallmall.com/

Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn how to make links accessible.
 
Failing Elements
div.Header-social > nav.SocialLinks > div.SocialLinks-inner > a.SocialLinks-link
<a href="https://www.instagram.com/116pallmall/" target="_blank" class="SocialLinks-link instagram-unauth" style="">
div.Header-social > nav.SocialLinks > div.SocialLinks-inner > a.SocialLinks-link
<a href="https://www.linkedin.com/company/116-pall-mall" target="_blank" class="SocialLinks-link linkedin-unauth" style="">
div.Header-social > nav.SocialLinks > div.SocialLinks-inner > a.SocialLinks-link
<a href="https://www.facebook.com/116pallmall/" target="_blank" class="SocialLinks-link facebook-unauth" style="">
div.Header-social > nav.SocialLinks > div.SocialLinks-inner > a.SocialLinks-link
<a href="https://twitter.com/116PallMall" target="_blank" class="SocialLinks-link twitter-unauth" style="">
 
Any tips on how to fix please - thanks!
Link to comment

I have the same issue Links do not have a discernible name

News years Resolution? Help us find
<a href="https://www.instagram.com/p/D3VfSds/" class=" image-slide-anchor …" style="overflow: hidden;">

Any help?

 

Link to comment
  • Solution

@Vic_O @DanFar
You can add an aria-label attribute on the <a> tag for each social media link by adding the following JavaScript to the Footer using Code Injection:

(function(){
  // Add aria-label to Instagram link
  document.querySelectorAll('.instagram-unauth')
    .forEach(el => el.setAttribute('aria-label', 'Instagram'));
  
  // Add aria-label to Facebook link
  document.querySelectorAll('.facebook-unauth')
    .forEach(el => el.setAttribute('aria-label', 'Facebook'));

  // Add aria-label to Twitter link
  document.querySelectorAll('.twitter-unauth')
    .forEach(el => el.setAttribute('aria-label', 'Twitter'));

  // Add aria-label to LinkedIn link
  document.querySelectorAll('.linkedin-unauth')
    .forEach(el => el.setAttribute('aria-label', 'LinkedIn'));
})()

 

Be sure to add the JS between <script> tags, e.g.

<script>
  // Add JS here
</script>

 

Edited by jpeter

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment

I have the same issue Links do not have a discernible name

News years Resolution? Help us find
<a href="https://www.instagram.com/p/D3VfSds/" class=" image-slide-anchor …" style="overflow: hidden;">

So my code will look like ?


 

// Add aria-label to Instagram link
  document.querySelectorAll('.image-slide-anchor')
    .forEach(el => el.setAttribute('aria-label', 'Instagram'));


Its like 4-5 links with different Instagram stories, how can I pick up the name of the post and use that as a ARIA-Label

Thank you

Link to comment

@DanFar for your case, I would use following code to target each individual link leveraging the a[href^="<URL>"] CSS attribute selector as the string in the querySelectorAll method:

(function(){
  // Add aria-label to Instagram story link
  document.querySelectorAll('a[href^="https://www.instagram.com/p/D3VfSds/"]')
    .forEach(el => el.setAttribute('aria-label', 'My Story'));

  // Add aria-label to Instagram story link
  document.querySelectorAll('a[href^="https://www.instagram.com/p/TEST124/"]')
    .forEach(el => el.setAttribute('aria-label', 'My Story 2'));
})()



 

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Link to comment
On 1/19/2024 at 7:02 AM, jpeter said:

@Vic_O @DanFar
You can add an aria-label attribute on the <a> tag for each social media link by adding the following JavaScript to the Footer using Code Injection:

(function(){
  // Add aria-label to Instagram link
  document.querySelectorAll('.instagram-unauth')
    .forEach(el => el.setAttribute('aria-label', 'Instagram'));
  
  // Add aria-label to Facebook link
  document.querySelectorAll('.facebook-unauth')
    .forEach(el => el.setAttribute('aria-label', 'Facebook'));

  // Add aria-label to Twitter link
  document.querySelectorAll('.twitter-unauth')
    .forEach(el => el.setAttribute('aria-label', 'Twitter'));

  // Add aria-label to LinkedIn link
  document.querySelectorAll('.linkedin-unauth')
    .forEach(el => el.setAttribute('aria-label', 'LinkedIn'));
})()

 

Be sure to add the JS between <script> tags, e.g.

<script>
  // Add JS here
</script>

 

Legend! Thank you!!

Link to comment
  • 5 months later...

Hi there,

To improve AMA compliance of my website, I need to add names to the social media icons in the Social Links block at the bottom of the page. I can't find a way to do this. I saw some posts about injecting code into the Footer, but when I tried that I just got a bunch of code text on the bottom of the page. I assume that's because there's nothing in the footer block (there isn't an option to inject code into the Social Links block. Or maybe it wasn't a simple copy/paste of the code given in the example (that stuff is above my head)

You'd think Squarespace would have an easier way to do this seeing as AMA compliance is so important.

Does anyone have a suggestion? Thank you.

Link to comment
On 7/10/2024 at 4:31 PM, editdroid said:

To improve AMA compliance of my website, I need to add names to the social media icons in the Social Links block at the bottom of the page.

Please provide a link so we can see the issue. 

If you've added these icons using a Social Icons Block on the latest version of Squarespace (v7.1) then each icon should already have an aria-label, although two of them (Twitter and Instagram) do unhelpfully seem to have a bug that adds "-unauth" to the labels.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
On 7/13/2024 at 5:11 AM, paul2009 said:

Please provide a link so we can see the issue. 

If you've added these icons using a Social Icons Block on the latest version of Squarespace (v7.1) then each icon should already have an aria-label, although two of them (Twitter and Instagram) do unhelpfully seem to have a bug that adds "-unauth" to the labels.

For some reason, I'm not getting that ding anymore when running the DevTool AXE extension. I did use the Social Icon Block in Squarespace. I didn't change anything since writing this post.

Now my issue is consistency between ADA checkers. The DevTool extension says one of the sites is pretty good, but when I try website ADA checkers I get various alerts. I assume that's because they want me to buy something.

The one site I'm checking is:

foxaltadena.com

I have two more sites, but this is the one for my original post.

Thanks.

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

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.