Hiding for screen readers...what am I missing?

Shopify Partner
3 0 0

Hello there,

I have some code to allow screen readers to tell the difference between sale price and regular price (because screen readers don't indicate that a strikethrough price is the regular, non-sale price)  However, it keeps reading as "product name, Sale Price Regular Price $10.00 $15.00"  instead of "product name, Sale Price $10.00 Regular Price $15.00"

 

my CSS is as follows (although I currently have the position statement commented out)

.visually-hidden {
    position: absolute !important;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0; 
    border: 0;
  }

My liquid code is as follows

 <div class="info">
      <span class="title" itemprop="name">{{ product.title }}</span>
      
      

              <div style="display:none;">
          {{ products_per_row }}
        </div>
      {% if settings.enable_shopify_collection_badges %}
      {% comment %}
          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
      {% endcomment %}
        {% endif %}
      {% if settings.display_vendor_collection %}
        <br />
        <span itemprop="brand">{{ product.vendor }}</span>
      {% endif %}

      {% include 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: '', concierge_install: true %}
      {% unless collection_handles contains 'coming-soon' or collection_handles contains 'japan' %}
        <span class="price {% if product.compare_at_price_max > product.price %}sale{% endif %}" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <meta itemprop="price" content="{{ product.price_min | money_without_currency }}" />
          <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
          <meta itemprop="seller" content="{{ shop.name | escape }}" />
          <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
          <meta itemprop="itemCondition" content="New" />

          {% if product.available %}
            {% if product.price_varies and product.price_min > 0 %}
              <small><em>{{ 'products.general.from' | t }}</em></small>
            {% endif %}
            {% if product.price_min > 0 %}
          <span class="visually-hidden">Sale Price</span>
              <span class="money">{{ product.price_min | money }}</span>
            {% else %}
              {{ settings.free_price_text }}
            {% endif %}
            {% if product.compare_at_price_max > product.price %}
          
              <span class="was_price">
                <span class="visually-hidden">Regular Price</span>
                <span class="money">{{ product.compare_at_price_max | money }}</span>
                
              </span>
            {% endif %}
          {% else %}
            <span class="sold_out">{{ 'products.product.sold_out' | t }}</span>
          {% endif %}
        </span>
      {% endunless %}
    </div>

Screen Shot 2019-04-05 at 4.50.12 PM.jpgscreen reader is out of order

Thoughts?

0 Likes
Shopify Partner
1346 22 208

Hey,

 

As far as the accessibility tree will see that content, this looks good to me:

You should get "Climbing Hold The Brain The Brain - Overstock Sale Price $ 57.00 Regular Price $ 81.84".

Punctuation will help.

 

Not sure how NVDA or JAWS  will read this, but the code looks good to me.

Please see my Chrome and FF screenshots.

 

Happy people care about accessibility!

 

Screen Shot 2019-04-06 at 02.01.56.pngChrome accessibility link contentsScreen Shot 2019-04-06 at 02.06.36.pngFireFox accessibility link contents

https://sections.design tips, tricks & Shopify sections
0 Likes
Shopify Partner
3 0 0

Thanks for showing that.  I probably should have noted that these were the results of using Voice Over on a Mac (the out of order reading that is)

0 Likes
Shopify Staff
Shopify Staff
2 0 0

This is an issue specifically with VoiceOver with no apparent resolve.

 

I would suggest using aria-label on the link to provide an accessible name. Set its value to the exact output desired as aria-label overrides any content within the element:

 

<a
href="#"
aria-label="{{ product.title }}, Sale Price: {{ product.price_min | money }}, Regular Price: {{ product.compare_at_price_max | money }}"

>
<!-- … -->
</a>

 

0 Likes