The 10 WCAG failures in almost every Shopify lawsuit, with Liquid fixes

This article is for the developer or agency doing the work, and for the merchant who wants to know what "remediation in the theme" means in practice. Each failure names the WCAG 2.2 success criterion a plaintiff's letter cites, shows how it appears in a Shopify theme, gives the code before and after in the style of Dawn and the themes derived from it, and says how to test the fix. The snippets are patterns to adapt, not files to paste: every theme names its sections, settings and translation keys differently.

The ten failures

<img src="{{ product.featured_image | img_url: '800x' }}">

{{ product.featured_image
  | image_url: width: 800
  | image_tag: alt: product.featured_image.alt | default: product.title | escape,
               loading: 'lazy' }}

<button class="header__icon header__icon--cart">
  {% render 'icon-cart' %}
</button>

<button class="header__icon header__icon--cart"
        aria-label="{{ 'sections.header.cart' | t }}">
  {% render 'icon-cart' %}
</button>

{% comment %} inside icon-cart.liquid {% endcomment %}
<svg aria-hidden="true" focusable="false" ...>

{% for value in option.values %}
  <div class="swatch {% if value == option.selected_value %}active{% endif %}"
       data-value="{{ value }}" onclick="selectVariant(this)">
    {{ value }}
  </div>
{% endfor %}

<fieldset class="product-form__input">
  <legend class="form__label">{{ option.name }}</legend>
  {% for value in option.values %}
    <input type="radio"
           id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
           name="{{ option.name }}"
           value="{{ value | escape }}"
           form="{{ product_form_id }}"
           {% if option.selected_value == value %}checked{% endif %}>
    <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
      {{ value }}
    </label>
  {% endfor %}
</fieldset>

<input type="email" name="contact[email]" placeholder="Email">

<label for="NewsletterForm--{{ section.id }}" class="visually-hidden">
  {{ 'newsletter.label' | t }}
</label>
<input type="email"
       id="NewsletterForm--{{ section.id }}"
       name="contact[email]"
       autocomplete="email"
       placeholder="{{ 'newsletter.label' | t }}"
       required>

:root {
  --color-foreground-secondary: 153, 153, 153; /* #999 on white = 2.8:1 */
}
.price__sale .price-item--regular { color: #aaa; }

:root {
  --color-foreground-secondary: 89, 89, 89; /* #595959 on white = 7:1 */
}
.price__sale .price-item--regular { color: #595959; }

*:focus { outline: none; }
a:focus, button:focus { outline: 0; }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid rgb(var(--color-foreground));
  outline-offset: 3px;
}
[id] { scroll-margin-top: var(--header-height, 6rem); }

<a href="#" class="cart-icon" onclick="openDrawer()">Cart</a>
<div id="cart-drawer" class="drawer"> ... </div>

<button type="button" class="cart-icon"
        aria-controls="CartDrawer" aria-expanded="false">
  {{ 'sections.cart.title' | t }}
</button>

<dialog id="CartDrawer" class="drawer"
        aria-labelledby="CartDrawer-Heading">
  <h2 id="CartDrawer-Heading">{{ 'sections.cart.title' | t }}</h2>
  ...
  <button type="button" class="drawer__close" autofocus
          aria-label="{{ 'accessibility.close' | t }}">
    {% render 'icon-close' %}
  </button>
</dialog>

<script>
  // open with dialog.showModal(); on close, return focus to the trigger
</script>

<slideshow-component data-autoplay="true" data-speed="5">

<slideshow-component
  data-autoplay="{{ section.settings.auto_rotate }}"
  data-speed="{{ section.settings.change_slides_speed }}">
  {% if section.settings.auto_rotate %}
    <button type="button" class="slideshow__autoplay"
            aria-pressed="false"
            aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}">
      {% render 'icon-pause' %}
    </button>
  {% endif %}

@media (prefers-reduced-motion: reduce) {
  slideshow-component { --slide-transition: 0ms; }
}

<div class="h2 title">{{ section.settings.title }}</div>
{% for product in collection.products %}
  <div class="card__heading h3">{{ product.title }}</div>
{% endfor %}

{% comment %} theme.liquid {% endcomment %}
<a class="skip-to-content-link visually-hidden" href="#MainContent">
  {{ 'accessibility.skip_to_text' | t }}
</a>
<main id="MainContent" class="content-for-layout" role="main" tabindex="-1">
  {{ content_for_layout }}
</main>

{% comment %} featured collection section {% endcomment %}
<h2 class="title">{{ section.settings.title | escape }}</h2>
{% for product in collection.products %}
  <h3 class="card__heading">
    <a href="{{ product.url }}">{{ product.title | escape }}</a>
  </h3>
{% endfor %}

{% comment %} app embed output, as injected {% endcomment %}
<div class="rating"><img src="star.svg"><img src="star.svg">...</div>
<div class="popup" onclick="closePopup()">Get 10% off</div>

{% comment %} rating rendered from the app's metafield in the theme {% endcomment %}
{% assign rating = product.metafields.reviews.rating.value %}
<div class="rating" role="img"
     aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: rating.rating, rating_max: rating.scale_max }}">
  <span aria-hidden="true">{% render 'stars', rating: rating.rating %}</span>
</div>

{% comment %} pop-up: use the app's accessible template if it has one,
   set a delay, add a labeled close button, or replace the app {% endcomment %}

Order of work

Fix in the order a screen reader user meets the store: the header buttons and menu, the collection and product templates, the variant picker and add to cart, the cart drawer, the checkout customizations, then the forms, the slideshows and the footer. Retest each template with the keyboard and a screen reader before moving on, and log every file touched with the date. That log becomes the remediation record your attorney presents.

Frequently asked questions

Need this done inside a deadline?

If a letter or complaint arrived and the store needs these fixes on a date, send it with your store URL to gersen@gersenmedina.com. The remediation service page describes the audit, the fixes and the evidence package. Start with how the response window works if you have a letter, or what happens after a store is sued.

Gersen Medina is a Shopify accessibility specialist who remediates ADA and WCAG 2.2 issues on Shopify stores that have received demand letters or lawsuits. Working with U.S. companies since 2014, his remediation work has helped dozens of merchants avoid hundreds of thousands of dollars in accessibility litigation exposure. About Gersen