Jump to content

Adding meta description to cart icon for accessibility

Recommended Posts

Site URL: https://mouse-trout-epjy.squarespace.com/


I have recently tested this site with screen reader users. One user told us that the screen reader (VoiceOver on Mac) read the cart icon in nav as 'ZERO' simply listing the number of products in the cart instead of describing the cart icon. 

I would like to add meta to describe the cart icon but not sure where I can put this? 

Any help would be appreciated 🙂

site pw: spong123

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

So what we want to do is add content before and after the cart quantity count that works with screenreaders, but doesn't show up on the screen. So we'll be using Javascript to inject some code. 

Squarespace has this CSS Class called "Visually Hidden" which hides text on the screen, but keeps it accessible to Screen-readers, like voiceOver. 

What we want to do its check out the DOM and add a span before and after the cart quantity count element with the text that we want the voiceOver to speak. That's what my JS below is doing. Be sure to put this in the footer of the website. 

Let me know if you or anyone else reading this wants a video tutorial on this. Might be helpful for other things in the future. 

  let cartQuantities = document.querySelectorAll('.sqs-cart-quantity');

  cartQuantities.forEach(cart => {
    let preText = document.createElement('span'),
        postText = document.createElement('span');


    preText.textContent = "Your cart has:";
    postText.textContent = "items";



Hey-o, my name is Will and I help Squarespace designers and developers with technical things.

I would be happy to answer any questions you have about Javascript, CSS, or the meaning of life  - although I'm only an expert in 2 of these. 

Check out my plugin store or sign up for my newsletter

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.