Strikethrough pricing is a visual way to show that a product is on sale. But, this formatting is not accessible to site visitors using a screen reader. With a few lines of code, we can improve the default WooCommerce sale price formatting for anyone using a screen reader to access our website.
This code snippet is all thanks to the excellent advice from Amber Hinds of Equalize Digital. For more information on best practices for screen reader text, watch this meetup recording by Nick Croft.
The Code Recipe
Adding the Recipe to Your Website
You can add this recipe to your site by creating a custom plugin or using the Code Snippets plugin available for free in the WordPress repository. We have a post on how to create a customizations plugin on our partner website, Paid Memberships Pro.
Note that this recipe requires theme support for the CSS class sr-only. If your theme does not have built-in support for this selector, add the following custom CSS to your child theme, a customizations stylesheet, or your WordPress site’s Additional CSS customizer settings:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}