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

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?

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

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

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?

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.