Adding meta description to cart icon for accessibility

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

Hello, 

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

@tuanphan @WillMyers any ideas?

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. 

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

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

    preText.classList.add('visually-hidden');
    postText.classList.add('visually-hidden');

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

    cart.parentElement.prepend(preText);
    cart.parentElement.append(postText);
  });
</script>