WCAG-fixar för Shopify

{%- comment -%} Granska: kontrast 4.5:1 → 7:1 {%- endcomment -%}
<button
  type="submit"
  name="checkout"
  class="cart__checkout-button"
  style="
    background: #0f172a;
    color: #ffffff;
    border: 2px solid #0f172a;
    min-height: 44px;
  "
  aria-label="{{ 'cart.general.checkout' | t }}"
>
  {{ 'cart.general.checkout' | t }}
</button>

{%- assign alt_fallback = product.title | append: ' — ' | append: image.alt -%}
<img
  src="{{ image | image_url: width: 800 }}"
  srcset="{{ image | image_url: width: 400 }} 400w,
          {{ image | image_url: width: 800 }} 800w,
          {{ image | image_url: width: 1200 }} 1200w"
  sizes="(min-width: 768px) 50vw, 100vw"
  alt="{{ image.alt | default: alt_fallback | escape }}"
  loading="lazy"
  decoding="async"
/>

{%- for option in product.options_with_values -%}
  <fieldset class="product-form__input">
    <legend class="form__label">{{ option.name }}</legend>
    {%- for value in option.values -%}
      <input
        type="radio"
        id="{{ option.name }}-{{ value | handle }}"
        name="options[{{ option.name | escape }}]"
        value="{{ value | escape }}"
        {% if option.selected_value == value %}checked{% endif %}
      />
      <label for="{{ option.name }}-{{ value | handle }}">
        {{ value }}
      </label>
    {%- endfor -%}
  </fieldset>
{%- endfor -%}