Links do not have a discernible name

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

https://www.116pallmall.com/

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?
 

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

@jpeterpls review

BUMP!

@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'));
})()

Let me test it - thanks

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