I recently joined Xero Shoes. They're one of the largest WooCommerce stores in the world. And as luck would have it we received the results of an accessibility (a11y) audit right after I started. That meant my first project is to dive deep into accessibility with WordPress & WooCommerce.
And the first item I looked into was making sure our sale prices were accessible. 👇
How Can a Sale Price Not Be Accessible!?
This is best explained visually. Imagine you are blind and you use screen-reader software to tell you what's on a webpage, what would you expect to hear if you landed on this product page?
I'd expect to hear the product title, the star ratings, the number of reviews, and for me to make a purchase decision about this product I also expect to know that there's a sale going on and how much this product is discounted.
If you take a look at the source-code you'll see some pesky code that's well-meaning but doesn't help blind users:
<del aria-hidden="true">$119.99</del>The sale price is wrapped in a <del> tag. That tag is the strike-through pricing, but that's actually not the problem. The problem is the aria-hidden="true" attribute.
Aria-hidden tells screen-reading software what to do, and this code tells screen-reading software to ignore this element. So blind users don't know there's a sale going on and they have no idea the current price is actually a discount.
This breaks accessibility guidelines – if you're presenting information to sighted users. You are required to present that same information to screen readers.
Let's Make the WooCommerce Sale Price Accessible
Okay we've defined the problem, so how do we fix this. Well there are two routes:
- You can wait. I submitted a pull request to WooCommerce with fixes. That means if they like the way I solve the problem they can merge in my code and release it with the next version of WooCommerce.
- You can solve this on your own website (while waiting for WooCommerce). This is what we're doing at Xero Shoes. We want to make WooCommerce better. But we also want to make our site accessible now.
I wrote a single-file utility plugin which solves this in a simple way. You can upload this to your site and screen reading software not only sees the sale price but explains it. 👇
So what does this sound like?
Original price was $119.99. Current price is $83.99.
That gives users who use screen reader software context around the sale. They know the original price and can figure out how big of a discount it is. This will help them make a purchase decision.
And it also makes your website accessible. 🙂
Areas for Improvement
I didn't write my code to be robust or work well with other code. If you have another plugin that modifies sale price HTML my code will basically blast it away. You could write more sophisticated code that preserves other logic by looping through each HTML tag and inserting the right content at the right time.
But that's going to take more time to write, and it also takes more PHP processing time when users hit your product page.
Certainly do-able, but we don't have any other plugins that modify the sale price so we don't need our code to be robust.
You can also change my language. Maybe you don't like “Original price was…” and you want to change it to “Full price is…” or something similar. You can do that by changing those lines of text in my plugin before uploading it to your site.
Here's to boosting your sales with accessible pricing! Cheers! 🥂