spongebob-smc Posted March 31, 2021 Share Posted March 31, 2021 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 Link to comment
spongebob-smc Posted April 6, 2021 Author Share Posted April 6, 2021 @tuanphan @WillMyers any ideas? Link to comment
WillMyers Posted April 6, 2021 Share Posted April 6, 2021 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> 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment