feat: add alt and title on images

index.html

@@ -42,7 +42,7 @@
       <nav class="flex flex-col md:flex-row items-center" aria-label="Global">
         <div class="flex md:w-full mb-6 md:mb-0">
           <a href="#" class="flex items-center justify-center">
-            <img class="w-auto h-12" src="/img/logo.webp" alt="Design Tokens Pro logo">
+            <img class="w-auto h-12" src="/img/logo.webp" alt="Design Tokens Course logo" title="Design Tokens Pro is a digital course on mastering design tokens">
           </a>
         </div>
         <div class="w-full flex justify-between md:justify-end text-md md:text-lg font-semibold">
@@ -76,7 +76,7 @@ <h1 class="text-5xl md:text-6xl lg:text-7xl mb-4 heading text-slate-800">Unlock
   <section class="bg-slate-800 px-6 pb-20 md:pt-20 lg:pb-0">
     <div class="max-w-screen-2xl mx-auto grid lg:grid-cols-12 z-10">
       <div class="col-span-12 lg:col-span-8 offset z-20 md:mb-6 lg:mr-16 lg:mb-0">
-        <img class="slide w-full" src="/img/course-sneak-peak.webp" alt="">
+        <img class="slide w-full" src="/img/course-sneak-peak.webp" alt="A preview of the digital course on design tokens, showing course modules" title="A preview of the digital course">
       </div>
       <article class="col-span-12 lg:col-span-4 text-white/85">
         <p class="text-xl mb-6 mt-12 md:mt-0">Design Tokens Pro is a digital course intended for designers and
@@ -113,7 +113,7 @@ <h2 class="text-5xl font-semibold heading text-slate-700 mb-6">What you'll learn
             Creating a shared taxonomy with clear naming conventions is vital. It organizes information, enhances
             clarity, and promotes teamwork and efficiency.</p>
         </header>
-        <img class="lg:col-span-6 xl:col-start-6 xl:col-end-12 w-full" src="/img/tokens-vocabulary.png" alt="">
+        <img class="lg:col-span-6 xl:col-start-6 xl:col-end-12 w-full" src="/img/tokens-vocabulary.png" alt="A list of vocabulary terms used for design tokens naming" title="Design tokens taxonomy is made of a shared naming convention">
       </article>
 
       <article class="grid lg:grid-cols-12 gap-10 mb-20 lg:mb-40 animate">
@@ -122,14 +122,14 @@ <h2 class="text-5xl font-semibold heading text-slate-700 mb-6">What you'll learn
               decisions.</span> Every token you make is a careful choice, not just a random number. As you learn more,
             you'll see how and when you make these important choices and use this understanding in real situations.</p>
         </header>
-        <img class="lg:col-span-6 xl:col-start-6 xl:col-end-12 w-full" src="/img/tokens-decisions.png" alt="">
+        <img class="lg:col-span-6 xl:col-start-6 xl:col-end-12 w-full" src="/img/tokens-decisions.png" alt="Example of design tokens application, using appropriate terms to make design decisions" title="Design tokens levels increase specificity, from a raw value to a design decision">
       </article>
 
       <article class="grid lg:grid-cols-12 gap-10 mb-20 lg:mb-40 animate">
         <header class="lg:col-span-6 xl:col-start-2 xl:col-end-6">
           <p class="text-2xl text-slate-600"><span class="font-bold text-orange-500">Use tokens with purpose.</span> Choosing the right token is vital for different use cases, as it ensures functionality. Make careful choices on specific use being flexible and aware of any potential implications.</p>
         </header>
-        <img class="lg:col-span-6 xl:col-start-6 xl:col-end-12 w-full" src="/img/tokens-purpose.png" alt="">
+        <img class="lg:col-span-6 xl:col-start-6 xl:col-end-12 w-full" src="/img/tokens-purpose.png" alt="Example of design tokens application, using appropriate terms to use design tokens with purpose" title="The do's and dont's in design tokens usage">
       </article>
 
       <article class="grid lg:grid-cols-12 gap-10 animate">
@@ -138,7 +138,7 @@ <h2 class="text-5xl font-semibold heading text-slate-700 mb-6">What you'll learn
             Understanding the tools for efficient design token updates is key. As products evolve, so must these tokens.
             Developing skills to manage and update these tokens can greatly enhance the design process.</p>
         </header>
-        <img class="block lg:col-span-6 xl:col-start-6 xl:col-end-12 w-full" src="/img/tokens-process.png" alt="">
+        <img class="block lg:col-span-6 xl:col-start-6 xl:col-end-12 w-full" src="/img/tokens-process.png" alt="The design tokens lifecycle across different tools and technologies" title="The design tokens lifecycle is technologically agnostic">
       </article>
     </div>
   </section>

join.html

@@ -38,7 +38,7 @@
 
   <header class="max-w-2xl mx-auto py-10">
     <a href="/index.html" class="flex items-center justify-center">
-      <img class="w-auto h-12" src="/img/logo.webp" alt="Design Tokens Pro logo">
+      <img class="w-auto h-12" src="/img/logo.webp" alt="Design Tokens Course logo" title="Design Tokens Pro is a digital course on mastering design tokens">
     </a>
   </header>