Merge pull request #23 from youcan-shop/TH-79

TH-79: All themes > Performance > Every <img> tag must include an "alt" attribute

themes/aura/assets/add-to-cart.js

@@ -141,7 +141,7 @@ function cartTemplate(item) {
     <li class="cart-item">
       <div class="item-body">
       <div class="right-items">
-        ${imageUrl && `<img src="${imageUrl}" />`}
+        ${imageUrl && `<img src="${imageUrl}" alt="${item.productVariant.product.name}" />`}
         <div class="item-details">
           <p class="product-name">${item.productVariant.product.name}</p>
           <div class="variants">

themes/aura/sections/main-cart.liquid

@@ -29,7 +29,7 @@
       <div class="row cart__item" id='{{ item.id }}'>
         <div class="cell">
             <div class='product-image'>
-              <img loading='lazy' src='{{ item.image }}' alt='product-name'>
+              <img loading='lazy' src='{{ item.image }}' alt='{{ item.name }}'>
             </div>
         </div>
         <div class='cell'>

themes/aura/sections/main-page.liquid

@@ -7,7 +7,7 @@
         <a href="/" class="first-listing">{{ 'snippets.collection-listing.home' | t }}</a>
       </div>
       <div class="listings__item">
-        <img src='{{ 'left-arrow.png' | asset_url }}'>
+        <img src='{{ 'left-arrow.png' | asset_url }}' alt='Left arrow' >
       </div>
       <div class="listings__item">
         <span class="second-listing">{{ page.name }}</span>

themes/aura/sections/main-search.liquid

@@ -40,6 +40,7 @@
                 <img
                   loading='lazy'
                   src='{{ 'fallback-product-img.webp' | asset_url }}'
+                  alt='{{ item.name }}'
                 >
               {% endif %}
             </div>

themes/aura/sections/main-video.liquid

@@ -21,7 +21,7 @@
   {% if section.settings.video_link %}
     {% if section.settings.video_type == 'youtube' %}
       <div class='youtube-video'>
-        <img class='youtube-thumbnail' src='' loading='lazy'>
+        <img class='youtube-thumbnail' src='' loading='lazy' alt='YouTube thumbnail'>
         <div class='youtube-play-button'></div>
         <div class="spinner video-spinner"></div>
       </div>

themes/aura/sections/multi-column.liquid

@@ -110,7 +110,12 @@
         <div class='column-block' {{ block.youcan_attributes }}>
           {% if block_setting.image %}
             <div class="column-image-wrapper">
-              <img class='column-image' src='{{ block_setting.image.src }}' loading='lazy'>
+              <img 
+                class='column-image' 
+                src='{{ block_setting.image.src }}' 
+                loading='lazy'
+                alt='{{ block_setting.heading }}'
+              >
             </div>
           {% else %}
             <div class="column-image-wrapper">

themes/aura/sections/notice-bar.liquid

@@ -16,7 +16,7 @@
 {%- if section.settings.notice_bar_show %}
   <div class='yc-notice'>
     <div class='content container '>
-      {%- if section.settings.notice_bar_logo.src -%} <img src='{{ section.settings.notice_bar_logo.src }}'>{%- endif -%}
+      {%- if section.settings.notice_bar_logo.src -%} <img src='{{ section.settings.notice_bar_logo.src }}' alt='Notice logo'>{%- endif -%}
       <div class="notice-content">
         {{ section.settings.notice_bar_content }}
       </div>

themes/aura/snippets/collection-preview.liquid

@@ -8,11 +8,13 @@
       <img
         loading='lazy'
         src='{{ category.image }}'
+        alt='{{ category.name }}'
       >
     {% else %}
       <img
         loading='lazy'
         src='{{ 'default_product.jpeg' | asset_url }}'
+        alt='{{ category.name }}'
       >
     {% endif %}
   </div>

themes/aura/snippets/product-card.liquid

@@ -6,7 +6,7 @@
       <img
         class="main-image"
         src="{% if product.images.size > 0 %}{{ product.images.first }}{% else %}{{ 'default_product.jpeg' | asset_url }}{% endif %}"
-        alt="product image">
+        alt="{{ product.name }}">
     </div>
     <div class="details">
       <span class="product-name" id="product-name"></span>

themes/aura/snippets/product-preview.liquid

@@ -11,11 +11,13 @@
       <img
         loading='lazy'
         src='{{ item.thumbnail }}'
+        alt='{{ item.name }}'
       >
     {% else %}
       <img
         loading='lazy'
         src='{{ 'default_product.jpeg' | asset_url }}'
+        alt='{{ item.name }}'
       >
     {% endif %}
     {% if block_settings.tag_text %}

themes/aura/snippets/product-slider.liquid

@@ -70,6 +70,7 @@
                   <img
                     loading='lazy'
                     src='{%- if block.settings.product.thumbnail -%} {{ block.settings.product.thumbnail }} {%- else -%} {{ 'default_product.jpeg' | asset_url }} {%- endif -%}'
+                    alt='{{ block.settings.product.name }}'
                     >
                     {% if block.settings.tag_text %}
                       <div

themes/aura/snippets/reviews.liquid

@@ -49,7 +49,7 @@
                 {{ 'reviews.upload_image' | t }}
               </span>
             </div>
-            <img class="uploaded-image" onclick="showExpandedImageView(this);" />
+            <img class="uploaded-image" onclick="showExpandedImageView(this);" alt="Uploaded image" />
             <button class="add-more" type="button" onclick="event.stopPropagation(); uploadReviewImage(this.parentElement, event);">+</button>
           </div>
           <div class="image-big-view" onclick="hideExpandedImageView(this)" style="display: none;">

themes/aura/snippets/subCategory.liquid

@@ -7,11 +7,13 @@
         <img
           loading='lazy'
           src='{{ subcategory.image }}'
+          alt='{{ subcategory.name }}'
         >
       {% else %}
         <img
           loading='lazy'
           src='{{ 'default_product.jpeg' | asset_url }}'
+          alt='{{ subcategory.name }}'
         >
       {% endif %}
     </div>

themes/harmony/assets/add-to-cart.js

@@ -147,7 +147,7 @@ function cartTemplate(item) {
     <li class="cart-item">
       <div class="item-body">
         <div class="right-items">
-          ${imageUrl && `<img src="${imageUrl}" />`}
+          ${imageUrl && `<img src="${imageUrl}" alt="${item.productVariant.product.name}" />`}
           <div class="item-details">
             <p class="product-name">${item.productVariant.product.name}</p>
             <div class="variants">

themes/harmony/sections/main-cart.liquid

@@ -34,7 +34,7 @@
               <div class="product-preview">
                 <div class="cell">
                   <div class='product-image'>
-                    <img loading='lazy' src='{{ item.image }}' alt='product-name'>
+                    <img loading='lazy' src='{{ item.image }}' alt='{{ item.name  }}'>
                   </div>
                 </div>
               </div>

themes/harmony/sections/main-search.liquid

@@ -39,7 +39,8 @@
               {% else %}
                 <img
                   loading='lazy'
-                  src='{{ 'fallback-product-img.webp' | asset_url }}'
+                  src='{{ 'default_product.jpeg' | asset_url }}'
+                  alt="{{ item.name }}"
                 >
               {% endif %}
             </div>

themes/harmony/sections/main-video.liquid

@@ -21,7 +21,7 @@
   {% if section.settings.video_link %}
     {% if section.settings.video_type == 'youtube' %}
       <div class='youtube-video'>
-        <img class='youtube-thumbnail' src='' loading='lazy'>
+        <img class='youtube-thumbnail' src='' loading='lazy' alt="YouTube thumbnail">
         <div class='youtube-play-button'></div>
         <div class="spinner video-spinner"></div>
       </div>

themes/harmony/sections/multi-column.liquid

@@ -110,6 +110,7 @@
               class='column-image'
               src='{{ block_setting.image.src }}'
               loading='lazy'
+              alt='{{ block_setting.heading }}'
             >
           </div>
           {% else %}

themes/harmony/sections/thankyou.liquid

@@ -35,7 +35,7 @@
       <ul class="product-list">
         {% for item in order.order_variants %}
           <li class="product-item">
-            <img class="product-image" src="{{- item.image -}}" />
+            <img class="product-image" src="{{- item.image -}}" alt="{{- item.name -}}" />
             <div class="product-details">
               <a class="product-name" href="/products/{{- item.slug -}}" target="_blank">{{- item.name -}}</a>
               <ul class="product-variations">

themes/harmony/snippets/collection-preview.liquid

@@ -8,11 +8,13 @@
       <img
         loading='lazy'
         src='{{ category.image }}'
+        alt='{{ category.name }}'
       >
     {% else %}
       <img
         loading='lazy'
         src='{{ 'default_product.jpeg' | asset_url }}'
+        alt='{{ category.name }}'
       >
     {% endif %}
   </div>

themes/harmony/snippets/product-card.liquid

@@ -5,7 +5,7 @@
     <img
       class="main-image"
       src="{% if product.images.size > 0 %}{{ product.images.first }}{% else %}{{ 'default_product.jpeg' | asset_url }}{% endif %}"
-      alt="product image"
+      alt="{{ product.name }}"
     >
     <div class="details">
       <span class="product-name" id="product-name"></span>

themes/harmony/snippets/product-preview.liquid

@@ -19,9 +19,9 @@
       {% endif %}
     </div>
     {% if item.thumbnail %}
-      <img loading='lazy' src='{{ item.thumbnail }}'>
+      <img loading='lazy' src='{{ item.thumbnail }}' alt="{{ item.name }}">
     {% else %}
-      <img loading='lazy' src='{{ 'default_product.jpeg' | asset_url }}'>
+      <img loading='lazy' src='{{ 'default_product.jpeg' | asset_url }}' alt="{{ item.name }}">
     {% endif %}
   </div>
   <div class='product-details'>

themes/harmony/snippets/product-slider.liquid

@@ -48,7 +48,11 @@
             <a href='{{ block.settings.product.url }}' class='product-block'>
               <div class="product-slider">
                 <div class='product-thumbnail'>
-                  <img loading='lazy' src='{%- if block.settings.product.thumbnail -%} {{ block.settings.product.thumbnail }} {%- else -%} {{ 'default_product.jpeg' | asset_url }} {%- endif -%}'>
+                  <img 
+                    loading='lazy' 
+                    src='{%- if block.settings.product.thumbnail -%} {{ block.settings.product.thumbnail }} {%- else -%} {{ 'default_product.jpeg' | asset_url }} {%- endif -%}'
+                    alt='{{ block.settings.product.name }}'
+                  >
                   {% if block.settings.tag_text %}
                     <div class="tag {{ section_settings.tag_position }}" style="background: {{ section_settings.banner_background_color.hex }}; color: {{ section_settings.tag_text_color.hex }}">
                       {{ block.settings.tag_text }}

themes/harmony/snippets/reviews.liquid

@@ -48,7 +48,7 @@
                 {{ 'reviews.upload_image' | t }}
               </span>
             </div>
-            <img class="uploaded-image" onclick="showExpandedImageView(this);" />
+            <img class="uploaded-image" alt="Uploaded image" onclick="showExpandedImageView(this);" />
             <button class="add-more" type="button" onclick="event.stopPropagation(); uploadReviewImage(this.parentElement, event);">+</button>
           </div>
           <div class="image-big-view" onclick="hideExpandedImageView(this)" style="display: none;">

themes/harmony/snippets/subCategory.liquid

@@ -7,11 +7,13 @@
         <img
           loading='lazy'
           src='{{ subcategory.image }}'
+          alt='{{ subcategory.name }}'
         >
       {% else %}
         <img
           loading='lazy'
           src='{{ 'default_product.jpeg' | asset_url }}'
+          alt='{{ subcategory.name }}'
         >
       {% endif %}
     </div>

themes/meraki/assets/add-to-cart.js

@@ -98,7 +98,7 @@ function cartTemplate(item) {
   return `
     <li class="cart-item">
       <div class="item-body">
-        ${imageUrl && `<img src="${imageUrl}" />`}
+        ${imageUrl && `<img src="${imageUrl}" alt="${item.productVariant.product.name}" />`}
         <div class="item-details">
           <p class="product-name">${item.productVariant.product.name}</p>
           <div class="variants">

themes/meraki/sections/featured-collections.liquid

@@ -38,7 +38,7 @@
               {% endif %}
             </div>
             {% if block.settings.category.image %}
-                <img src='{{ block.settings.category.image }}' class="category-img">
+                <img src='{{ block.settings.category.image }}' class="category-img" alt='{{ block.settings.category.name }}'>
             {% endif %}
           </div>
         </div>

themes/meraki/sections/main-cart.liquid

@@ -21,7 +21,7 @@
           <div class="row cart__item" id='{{ item.id }}'>
             <div class="cell">
               <div class='product-image'>
-                <img loading='lazy' src='{{ item.image }}' alt='product-name'>
+                <img loading='lazy' src='{{ item.image }}' alt='{{ item.name }}'>
               </div>
             </div>
             <div class='cell mobile-view'>

themes/meraki/sections/main-page.liquid

@@ -7,7 +7,7 @@
         <a href="/" class="first-listing">{{ 'snippets.collection-listing.home' | t }}</a>
       </div>
       <div class="listings__item">
-        <img src='{{ 'left-arrow.png' | asset_url }}'>
+        <img src='{{ 'left-arrow.png' | asset_url }}' alt='Left arrow'>
       </div>
       <div class="listings__item">
         <span class="second-listing">{{ page.name }}</span>

themes/meraki/sections/main-search.liquid

@@ -44,6 +44,7 @@
                 <img
                   loading='lazy'
                   src='{{ 'fallback-product-img.webp' | asset_url }}'
+                  alt='{{ item.name }}'
                 >
               {% endif %}
             </div>

themes/meraki/sections/main-video.liquid

@@ -21,7 +21,7 @@
   {% if section.settings.video_link %}
     {% if section.settings.video_type == 'youtube' %}
       <div class='youtube-video'>
-        <img class='youtube-thumbnail' src='' loading='lazy'>
+        <img class='youtube-thumbnail' src='' loading='lazy' alt='YouTube thumbnail'>
         <div class='youtube-play-button'>
           <div class="triangle"></div>
         </div>

themes/meraki/sections/multi-column.liquid

@@ -135,6 +135,7 @@
               class='column-image'
               src='{{ block_setting.image.src }}'
               loading='lazy'
+              alt='{{ block_setting.heading  }}'
             >
           </div>
           {% else %}

themes/meraki/sections/notice-bar.liquid

@@ -16,7 +16,7 @@
 {%- if section.settings.notice_bar_show %}
   <div class='yc-notice'>
     <div class='content container '>
-      {%- if section.settings.notice_bar_logo.src -%} <img src='{{ section.settings.notice_bar_logo.src }}'>{%- endif -%}
+      {%- if section.settings.notice_bar_logo.src -%} <img src='{{ section.settings.notice_bar_logo.src }}' alt='Notice logo'>{%- endif -%}
       <div class="notice-content">
         {{ section.settings.notice_bar_content }}
       </div>

themes/meraki/sections/thankyou.liquid

@@ -34,7 +34,7 @@
       <ul class="product-list">
         {% for item in order.order_variants %}
           <li class="product-item">
-            <img class="product-image" src="{{- item.image -}}" />
+            <img class="product-image" src="{{- item.image -}}" alt="{{- item.name -}}" />
             <div class="product-details">
               <a class="product-name" href="/products/{{- item.slug -}}" target="_blank">{{- item.name -}}</a>
               <ul class="product-variations">

themes/meraki/snippets/collection-preview.liquid

@@ -7,11 +7,13 @@
       <img
         loading='lazy'
         src='{{ category.image }}'
+        alt='{{ category.name }}'
       >
     {% else %}
       <img
         loading='lazy'
         src='{{ 'default_product.jpeg' | asset_url }}'
+        alt='{{ category.name }}'
       >
     {% endif %}
     <div class='collection-details'>

themes/meraki/snippets/product-card.liquid

@@ -5,7 +5,7 @@
     <img
       class="main-image"
       src="{% if product.images.size > 0 %}{{ product.images.first }}{% else %}{{ 'default_product.jpeg' | asset_url }}{% endif %}"
-      alt="product image">
+      alt="{{ product.name }}">
   </div>
   <div class="details">
     <span class="product-name" id="product-name"></span>

themes/meraki/snippets/product-preview.liquid

@@ -16,9 +16,9 @@
     </div>
 
     {% if item.thumbnail %}
-      <img loading='lazy' src='{{ item.thumbnail }}'>
+      <img loading='lazy' src='{{ item.thumbnail }}' alt='{{ item.name }}'>
     {% else %}
-      <img loading='lazy' src='{{ 'default_product.jpeg' | asset_url }}'>
+      <img loading='lazy' src='{{ 'default_product.jpeg' | asset_url }}' alt='{{ item.name }}'>
     {% endif %}
   </div>
   <div class='product-details'>

themes/meraki/snippets/product-slider.liquid

@@ -55,7 +55,8 @@
                   <img
                     loading='lazy'
                     src='{%- if block.settings.product.thumbnail -%} {{ block.settings.product.thumbnail }} {%- else -%} {{ 'default_product.jpeg' | asset_url }} {%- endif -%}'
-                    >
+                    alt='{{ block.settings.product.name }}'
+                  >
                     {% if block.settings.tag_text %}
                       <div
                         class="tag {{ section_settings.tag_position }}"

themes/meraki/snippets/reviews.liquid

@@ -50,7 +50,7 @@
                   {{ 'reviews.upload_image' | t }}
                 </span>
               </div>
-              <img class="uploaded-image" onclick="showExpandedImageView(this);" />
+              <img class="uploaded-image" onclick="showExpandedImageView(this);" alt="Uploaded image" />
               <button class="add-more" type="button" onclick="event.stopPropagation(); uploadReviewImage(this.parentElement, event);">+</button>
             </div>
             <div class="image-big-view" onclick="hideExpandedImageView(this)" style="display: none;">