Liquid Theme A11y

<body>  <a href="#main-content" class="skip-link">{{ 'accessibility.skip_to_content' | t }}</a>  <header role="banner">    <nav aria-label="{{ 'accessibility.main_navigation' | t }}">...</nav>  </header>  <main id="main-content">    <!-- All page content inside main -->  </main>  <footer role="contentinfo">    <nav aria-label="{{ 'accessibility.footer_navigation' | t }}">...</nav>  </footer></body>

<article class="product-card" aria-labelledby="ProductTitle-{{ product.id }}">  <a href="{{ product.url }}" class="product-card__link" aria-labelledby="ProductTitle-{{ product.id }}">    <img      src="{{ product.featured_image | image_url: width: 400 }}"      alt="{{ product.featured_image.alt | escape }}"      loading="lazy"      width="{{ product.featured_image.width }}"      height="{{ product.featured_image.height }}"    >  </a>  <h3 id="ProductTitle-{{ product.id }}">    <a href="{{ product.url }}">{{ product.title }}</a>  </h3>  <div class="product-card__price" aria-label="{{ 'products.price_label' | t: price: product.price | money }}">    {{ product.price | money }}  </div>  <button    class="product-card__quick-add"    tabindex="-1"    aria-label="{{ 'products.quick_add' | t: title: product.title }}"  >    {{ 'products.add_to_cart' | t }}  </button></article>

<div  role="region"  aria-roledescription="carousel"  aria-label="{{ section.settings.heading | escape }}">  <div class="carousel__controls">    <button      aria-label="{{ 'accessibility.previous_slide' | t }}"      aria-controls="CarouselSlides-{{ section.id }}"    >{% render 'icon-chevron-left' %}</button>    <button      aria-label="{{ 'accessibility.next_slide' | t }}"      aria-controls="CarouselSlides-{{ section.id }}"    >{% render 'icon-chevron-right' %}</button>    <button      aria-label="{{ 'accessibility.pause_slideshow' | t }}"      aria-pressed="false"    >{% render 'icon-pause' %}</button>  </div>
  <div id="CarouselSlides-{{ section.id }}" aria-live="polite">    {% for slide in section.blocks %}      <div        role="group"        aria-roledescription="slide"        aria-label="{{ 'accessibility.slide_n_of_total' | t: n: forloop.index, total: forloop.length }}"        {% unless forloop.first %}aria-hidden="true"{% endunless %}      >        {{ slide.settings.content }}      </div>    {% endfor %}  </div></div>

<dialog  id="Modal-{{ section.id }}"  aria-labelledby="ModalTitle-{{ section.id }}"  aria-modal="true">  <div class="modal__header">    <h2 id="ModalTitle-{{ section.id }}">{{ title }}</h2>    <button      type="button"      aria-label="{{ 'accessibility.close' | t }}"      on:click="/closeModal"    >{% render 'icon-close' %}</button>  </div>  <div class="modal__content">    <!-- Content -->  </div></dialog>

<form action="{{ routes.cart_url }}" method="post">  <div class="form__field">    <label for="Email-{{ section.id }}">{{ 'forms.email' | t }}</label>    <input      type="email"      id="Email-{{ section.id }}"      name="email"      required      aria-required="true"      autocomplete="email"      aria-describedby="EmailError-{{ section.id }}"    >    <p      id="EmailError-{{ section.id }}"      class="form__error"      role="alert"      hidden    >{{ 'forms.email_required' | t }}</p>  </div></form>

<form class="facets">  <div class="facets__group">    <button      type="button"      aria-expanded="false"      aria-controls="FilterColor-{{ section.id }}"    >{{ 'filters.color' | t }}</button>    <fieldset id="FilterColor-{{ section.id }}" hidden>      <legend class="visually-hidden">{{ 'filters.filter_by_color' | t }}</legend>      {% for color in colors %}        <label>          <input type="checkbox" name="filter.color" value="{{ color }}">          {{ color }}        </label>      {% endfor %}    </fieldset>  </div>  <div aria-live="polite" aria-atomic="true">    {{ 'filters.results_count' | t: count: results.size }}  </div></form>

{% if product.compare_at_price > product.price %}  <div class="price" aria-label="{{ 'products.sale_price_label' | t: sale_price: product.price | money, original_price: product.compare_at_price | money }}">    <s aria-hidden="true">{{ product.compare_at_price | money }}</s>    <span>{{ product.price | money }}</span>  </div>{% else %}  <div class="price" aria-label="{{ 'products.price_label' | t: price: product.price | money }}">    {{ product.price | money }}  </div>{% endif %}

<details>  <summary>{{ block.settings.heading }}</summary>  <div class="accordion__content">    {{ block.settings.content }}  </div></details>

<div role="tablist" aria-label="{{ 'accessibility.product_tabs' | t }}">  {% for tab in tabs %}    <button      role="tab"      id="Tab-{{ tab.id }}"      aria-selected="{% if forloop.first %}true{% else %}false{% endif %}"      aria-controls="Panel-{{ tab.id }}"      tabindex="{% if forloop.first %}0{% else %}-1{% endif %}"    >{{ tab.title }}</button>  {% endfor %}</div>{% for tab in tabs %}  <div    role="tabpanel"    id="Panel-{{ tab.id }}"    aria-labelledby="Tab-{{ tab.id }}"    {% unless forloop.first %}hidden{% endunless %}    tabindex="0"  >{{ tab.content }}</div>{% endfor %}

<nav aria-label="{{ 'accessibility.main_navigation' | t }}">  <ul role="list">    {% for link in linklists.main-menu.links %}      <li>        {% if link.links.size > 0 %}          <button aria-expanded="false" aria-controls="Submenu-{{ forloop.index }}">            {{ link.title }}          </button>          <ul id="Submenu-{{ forloop.index }}" hidden role="list">            {% for child in link.links %}              <li><a href="{{ child.url }}">{{ child.title }}</a></li>            {% endfor %}          </ul>        {% else %}          <a href="{{ link.url }}">{{ link.title }}</a>        {% endif %}      </li>    {% endfor %}  </ul></nav>

<button aria-describedby="Tooltip-{{ block.id }}">  {{ 'labels.info' | t }}</button><div id="Tooltip-{{ block.id }}" role="tooltip" popover>  {{ block.settings.tooltip_text }}</div>

{%- comment -%} Variant picker with noscript fallback {%- endcomment -%}<variant-picker>  <!-- JS-enhanced radio buttons / swatches here --></variant-picker><noscript>  <select name="id" aria-label="{{ 'products.select_variant' | t }}">    {% for variant in product.variants %}      <option value="{{ variant.id }}" {% unless variant.available %}disabled{% endunless %}>        {{ variant.title }} - {{ variant.price | money }}      </option>    {% endfor %}  </select></noscript>

<div aria-live="polite" aria-atomic="true" class="visually-hidden">  {{ 'products.variant_selected' | t: variant: selected_variant.title }}</div>