Jump to content

Attempting to Replace "aria-label" Tags

Go to solution Solved by jpeter,

Recommended Posts

Howdy!

I'm attempting to fix the mediocre social media links Squarespace provides by changing the 'aria-label' properties. I've got some simple JS that finds the appropriate elements and makes the change, but strangely screen readers don't seem to pick up the change and grab the useless 'aria-label' text that Squarespace puts in the rendered HTML.

Any thoughts? I can see the new property value if I query from the console in the browser, but screen readers seem to fixate on the original setting.

Link to comment
  • Replies 4
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Please share the URL of the page in your post so we can see the issue. A screenshot of the issue will also help.

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

Thanks! The page is here:

https://www.propositionchicken.com

I've attached three screenshots. The first shows the code that is being injected, and the third shows that the injected code is running on the site and is readable from the console, even though the screen reader isn't picking it up .The second screenshot shows what the screen reader is reading out.

I'm using Voiceover on the Mac, but if folks have a recommendation I can try a different screen reader to see if it behaves differently.

Screenshot 2024-01-18 at 2.58.15 PM.png

Screenshot 2024-01-18 at 2.56.03 PM.png

Screenshot 2024-01-18 at 2.54.44 PM.png

Link to comment
  • Solution

@Mataway The JavaScript below should fix the issue. Looks like there's multiple social media elements on the page with the same class and using document.querySelector will only target the first instance. The JS below uses document.querySelectorAll to updates all instances. 

JavaScript

window.Squarespace.onInitialize(Y, function () {
  document.querySelectorAll(".facebook")
    .forEach(el => el.setAttribute("aria-label", "Open Proposition Chicken Facebook page (in a new window)"));

  document.querySelectorAll(".instagram-unauth")
    .forEach(el => el.setAttribute("aria-label", "Open Proposition Chicken Instagram (in a new window)"));
});

OR 

If you don't want to change all instances, you can update the specificity of each selector you're passing to the querySelector method by adding .socialaccountlinks-v2-block as a parent like so:

window.Squarespace.onInitialize(Y, function () {
  document.querySelector(".socialaccountlinks-v2-block .facebook")
    .setAttribute("aria-label", "Open Proposition Chicken Facebook page (in a new window)");
  
    document.querySelector(".socialaccountlinks-v2-block .instagram-unauth")
    .setAttribute("aria-label", "Open Proposition Chicken Instagram(In a new window)");
});

 

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

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.