Jump to content

Aria Label Error - "Buttons do not have accessible name"

Go to solution Solved by paul2009,

Recommended Posts

Hello!

I'm attempting to fix the Close button on a Squarespace-provided Cookies Banner by changing the 'aria-label' properties.

I added the below JS to Code Injection > Footer, but still running into same issue on PageSpeed Insights.

This is the affected website

Any thoughts?

image.thumb.png.bef4457cb127a7b87ef699fb3ef990e4.png

image.thumb.png.69b7ec19b327de068cda0075786857d8.png

<script>
  // accessibility cookies banner script
window.Squarespace.onInitialize(Y, function () {
  document.querySelectorAll(".sqs-cookie-banner-v2-accept")
    .forEach(el => el.setAttribute("aria-label", "Accept"));

  document.querySelectorAll(".sqs-cookie-banner-v2-cta")
    .forEach(el => el.setAttribute("aria-label", "Accept"));
});
  </script>
Kaila S
Shopify Partner, Squarespace Circle Member & MailChimp Expert

yumari digital
websites · email campaigns · ads · social media · graphic design

 

 

Link to comment

@ksachse

Looks like you're code may be running to soon by the time the banner initialized, so you can wrap your code in a setTimeout and delay execution. Here's the updated code with a DELAY that will run your code after 500 milliseconds. Feel free to increase or decrease the DELAY value:

<script>
  // accessibility cookies banner script
  window.Squarespace.onInitialize(Y, function () {
    const DELAY = 500;

    setTimeout(() => {
      document.querySelectorAll(".sqs-cookie-banner-v2-accept")
      .forEach(el => el.setAttribute("aria-label", "Accept"));

      document.querySelectorAll(".sqs-cookie-banner-v2-cta")
        .forEach(el => el.setAttribute("aria-label", "Accept"));
      })
  }, DELAY);
</script>

 

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

Many thanks @jpeter I experimented between 10 milliseconds and 6000 milliseconds and no luck. Is there a tool that can be used to know what the sweet spot may be?

Kaila S
Shopify Partner, Squarespace Circle Member & MailChimp Expert

yumari digital
websites · email campaigns · ads · social media · graphic design

 

 

Link to comment
  • Solution
On 5/17/2024 at 5:07 PM, ksachse said:

I'm attempting to fix the Close button on a Squarespace-provided Cookies Banner by changing the 'aria-label' properties.

@ksachse YUI isn't loaded so you'll want to detect the page load in a different way. For example:

<!----- Accessibility cookies banner script ------>
<script>
window.addEventListener("load", function() {
  document.querySelectorAll(".sqs-cookie-banner-v2-accept")
    .forEach(el => el.setAttribute("aria-label", "Accept Cookies"));
});
</script>

As an aside, I see that this site only has opt-in enabled. If you're concerned about compliance in Europe, I recommend adding the opt-out feature so that visitors have the option to reject cookies too 🙂.

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
6 hours ago, paul2009 said:

@ksachse YUI isn't loaded so you'll want to detect the page load in a different way. For example:

<!----- Accessibility cookies banner script ------>
<script>
window.addEventListener("load", function() {
  document.querySelectorAll(".sqs-cookie-banner-v2-accept")
    .forEach(el => el.setAttribute("aria-label", "Accept Cookies"));
});
</script>

As an aside, I see that this site only has opt-in enabled. If you're concerned about compliance in Europe, I recommend adding the opt-out feature so that visitors have the option to reject cookies too 🙂.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thank you very much sir!! You are a gentleman and a scholar.

image.png.499574466a7e67b99e586136429e3dd2.png

Kaila S
Shopify Partner, Squarespace Circle Member & MailChimp Expert

yumari digital
websites · email campaigns · ads · social media · graphic design

 

 

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.