How to make Shopify compare-at prices accessible by adding hidden text

Screen readers don’t read strikethroughs, whether you do it through a <del> or a span class. This becomes a problem on Shopify sites with compare-at prices decorated with a strikethrough (any site that marks anything down will usually do it this way).

Imagine the price is $173 and its compare-at price is $179. Visually you would display that as:

$173 $179

But a screen reader doesn’t read that! It would say “one hundred seventy-three dollars, one hundred seventy-nine dollars” and the user is left to try to decode that. Here’s a way you can convey that meaning through hidden text:

<span class="price sale"> 
    <span class="visuallyhidden">Now:</span>
    <span class="money">$173.00</span> 
    <span class="was_price">
        <span class="visuallyhidden">Was:</span>
        <span class="money">$179.00</span>
    </span>
</span>

Now the screen reader will say “now: one hundred seventy-three dollars, was: one hundred seventy-nine dollars” which is actually meaningful to the user!

Here’s how you’d do it in your theme code:

<span itemprop="price" content="{{ variant.price | money_without_currency | remove: "," }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
                <span class="current_price {% if product.available == false %}hidden{% endif %}">
                  {% if variant.price > 0 %}
                  <span class="visuallyhidden">Now: </span> <span class="money">{{ variant.price | money }}</span>
                  {% else %}
                    {{ settings.free_price_text }}
                  {% endif %}
                </span>
              </span>
              <span class="was_price">
                {% if variant.price < variant.compare_at_price and variant.available %}
                  <span class="visuallyhidden">Was: </span><span class="money">{{ variant.compare_at_price | money }}</span>
                {% endif %}
              </span>

Your theme code may look a bit different, but you just need to find where the price and compare at prices are, and add these:

<span class="visuallyhidden">Now: </span>
<span class="visuallyhidden">Was: </span>

This uses a class “visuallyhidden” that my theme already has; your theme likely already has one named something similar. My tip is to search your css file for the word “visually”. And in the event you don’t have one, follow a tutorial for how to hide content.

Don’t forget the product page and collection page. The collection page likely uses a product-grid or product-info snippet for use in other areas.