Alt tag Missing Fixed

Author: PrashantUnity

data/home.yaml

@@ -62,6 +62,8 @@ categories:
         aliases: [font, typography, typeface, download]
       - name: RAG
         icon: cfd-rag
+        iconAlt: "Random API Generator icon"
+        iconTitle: "RAG — Random API Generator"
         url: /RandomApiGenerator/docs/
         description: Random API generator docs and playground for mock APIs.
         date: "2026-04-14"
@@ -249,6 +251,8 @@ categories:
         aliases: [json, json editor, validate, format]
       - name: JS LIDE
         icon: cfd-jswebide
+        iconAlt: "JavaScript IDE in the browser icon"
+        iconTitle: "JS LIDE — JavaScript IDE"
         url: /Javascript/
         description: Lightweight JavaScript IDE in the browser.
         date: "2026-04-24"
@@ -285,6 +289,8 @@ categories:
         aliases: [json visualizer, json mapper, visual mapper, tree view]
       - name: CSV
         icon: cfd-csv
+        iconAlt: "CSV editor and converter icon"
+        iconTitle: "CSV — editor and converter"
         url: /CSV/
         description: View, edit, and convert CSV files online.
         date: "2025-03-03"
@@ -294,6 +300,8 @@ categories:
         aliases: [csv editor, spreadsheet, table, convert csv]
       - name: CIN
         icon: cfd-cin
+        iconAlt: "Corporate identification lookup icon"
+        iconTitle: "CIN — corporate ID lookup"
         url: /CIN/
         description: Corporate identification and business lookup utilities.
         date: "2026-04-26"
@@ -623,6 +631,8 @@ categories:
         aliases: [developer conference, devcon, announcements, cfddc]
       - name: PI
         icon: cfd-pi
+        iconAlt: "Pi digits explorer icon"
+        iconTitle: "PI — pi digits explorer"
         url: /PI/
         description: Explore Pi digits, facts, and visualizations.
         date: "2026-03-15"
@@ -632,6 +642,8 @@ categories:
         aliases: [pi digits, math, 3.14, constant]
       - name: RL
         icon: cfd-rl
+        iconAlt: "Reinforcement learning demos icon"
+        iconTitle: "RL — reinforcement learning demos"
         url: /Reinforcement/
         description: Reinforcement learning demos and experiments.
         date: "2026-03-15"

data/homepage.yaml

@@ -48,40 +48,58 @@ hubBanners:
   games:
     image: "/images/banners/games.jpg"
     title: "Games & Fun"
+    imageAlt: "Browser games and puzzles on CodeFryDev"
+    imageTitle: "Games & Fun"
     description: "Puzzles, classics, and arcade games—play instantly in your browser."
   ai:
     image: "/images/banners/ai.jpg"
     title: "AI Tools"
+    imageAlt: "AI-powered tools and generators on CodeFryDev"
+    imageTitle: "AI Tools"
     description: "Meme generators, summarizers, chat, and more—no signup required."
   designlab:
     image: "/images/banners/designlab.jpg"
     title: "Design Lab"
+    imageAlt: "Design lab tools and creative resources for makers"
+    imageTitle: "Design Lab"
     description: "Creative design tools, visualizers, and resources for makers."
   store:
     image: "/images/banners/store.jpg"
     title: "CodeFryDev Store"
+    imageAlt: "CodeFryDev mobile apps on Google Play"
+    imageTitle: "CodeFryDev Store"
     description: "Mobile apps and downloads on Google Play."
 
 categoryBanners:
   creative-assets:
     image: "/images/banners/creative-assets.jpg"
     title: "Explore Creative & Assets"
+    imageAlt: "Creative tools, digital art, and learning assets on CodeFryDev"
+    imageTitle: "Explore Creative & Assets"
     description: "Art tools, wallpapers, 3D models, and learning resources for makers."
   tools-utilities:
     image: "/images/banners/tools-utilities.jpg"
     title: "Tools & Utilities Collection"
+    imageAlt: "Productivity and developer utilities in the browser"
+    imageTitle: "Tools & Utilities Collection"
     description: "Productivity apps, formatters, SEO tools, and dev utilities in your browser."
   games-fun:
     image: "/images/banners/games-fun.jpg"
     title: "Games & Fun"
+    imageAlt: "Free browser games including Wordle, Snake, and Chain Reaction"
+    imageTitle: "Games & Fun"
     description: "Wordle, Snake, Chain Reaction, and more—play instantly in your browser."
   site-links:
     image: "/images/banners/site-links.jpg"
     title: "Site & Resources"
+    imageAlt: "Site links, about pages, and external resources"
+    imageTitle: "Site & Resources"
     description: "About, updates, store, privacy, and external links."
   containers-packages:
     image: "/images/banners/containers-packages.jpg"
     title: "Containers & Packages"
+    imageAlt: "Docker images and npm packages from CodeFryDev"
+    imageTitle: "Containers & Packages"
     description: "Official Docker images and npm packages from CodeFryDev."
 
 hero:
@@ -91,14 +109,17 @@ hero:
   slides:
     - image: "/images/hero/slide-1.webp"
       imageAlt: "Team collaborating on laptops"
+      imageTitle: "Tools, games & AI in your browser"
       title: "Tools, games & AI in your browser"
       description: "This is a platform where we learn, work on experimental projects, play games, come up with innovative ideas, and build many more..."
     - image: "/images/hero/slide-2.webp"
       imageAlt: "Developers working together at a desk"
+      imageTitle: "Build faster with CodeFryDev"
       title: "Build faster with CodeFryDev"
       description: "From JSON playgrounds to design lab resources—everything runs in your browser."
     - image: "/images/hero/slide-3.webp"
       imageAlt: "Laptop showing code on a desk"
+      imageTitle: "No install. Just open and use."
       title: "No install. Just open and use."
       description: "Explore creative assets, productivity tools, games, and AI helpers in one place."
 

layouts/about-us/about-us.html

@@ -105,7 +105,7 @@ <h2 id="about-team-heading" class="about-heading m-0">Our team</h2>
         <li>
           <a href="{{ .RelPermalink }}" class="about-team-card no-underline group">
             <span class="about-team-card__avatar-wrap">
-              <img src="{{ .Params.listProfile_image }}" alt="" width="64" height="64" class="about-team-card__avatar" loading="lazy">
+              <img src="{{ .Params.listProfile_image }}" alt="{{ .Title }}" width="64" height="64" class="about-team-card__avatar" loading="lazy">
             </span>
             <span class="about-team-card__body">
               <span class="about-team-card__name">{{ .Title }}</span>

layouts/partials/home/browse-index.html

@@ -52,7 +52,7 @@ <h2 class="browse-index__section-title">Categories</h2>
             <span class="browse-category-card__previews" aria-hidden="true">
               {{- range $previews -}}
               <span class="browse-category-card__preview" title="{{ .name }}">
-                <img src="/images/home/{{ .icon }}.svg" alt="" width="32" height="32" loading="lazy">
+                <img src="/images/home/{{ .icon }}.svg" alt="{{ .iconAlt | default (printf "%s icon" .name) }}" width="32" height="32" loading="lazy"{{- with .iconTitle }} title="{{ . }}"{{ end }}>
               </span>
               {{- end -}}
             </span>

layouts/partials/home/category-banner.html

@@ -19,6 +19,7 @@
         class="absolute inset-0 h-full w-full object-cover"
         loading="lazy"
         decoding="async"
+        {{- with $banner.imageTitle }} title="{{ . }}"{{ end }}
       >
     {{- else -}}
       <img
@@ -29,6 +30,7 @@
         class="absolute inset-0 h-full w-full object-cover"
         loading="lazy"
         decoding="async"
+        {{- with $banner.imageTitle }} title="{{ . }}"{{ end }}
       >
     {{- end -}}
     <div class="absolute inset-0 bg-gradient-to-r from-slate-950/65 via-transparent to-slate-950/10" aria-hidden="true"></div>

layouts/partials/home/footer.html

@@ -10,7 +10,7 @@
   <div class="site-footer__inner">
     <div class="site-footer__mast">
       <a href="/" class="site-footer__brand" aria-label="CodeFryDev home">
-        <img src="/images/IconCodefrydev.svg" alt="" width="28" height="28" class="site-footer__logo" loading="lazy">
+        <img src="/images/IconCodefrydev.svg" alt="CodeFryDev" width="28" height="28" class="site-footer__logo" loading="lazy">
         <span class="site-footer__name">CodeFryDev</span>
       </a>
       <p class="site-footer__tagline">

layouts/partials/home/hero.html

@@ -5,25 +5,27 @@
 {{- $autoplay := $hero.autoplayMs | default 6000 -}}
 {{- $slides := $hero.slides -}}
 {{- $firstSlide := index $slides 0 -}}
+{{- $firstSlideAlt := $firstSlide.imageAlt | default $firstSlide.title -}}
 
 <section id="hero" data-section-label="Home" class="home-hero relative text-center flex flex-col items-center justify-center px-4 py-8 overflow-hidden bg-[#edf2f8]" aria-roledescription="carousel" aria-label="Featured highlights">
   <div class="home-hero__bg" aria-hidden="true">
     <div id="bg-layer-1" class="home-hero__bg-layer opacity-100">
       <img
         id="hero-bg-img-1"
         src="{{ $firstSlide.image }}"
-        alt=""
+        alt="{{ $firstSlideAlt }}"
         width="1600"
         height="840"
         class="home-hero__bg-img"
         fetchpriority="high"
         decoding="async"
+        {{- with $firstSlide.imageTitle }} title="{{ . }}"{{ end }}
       >
     </div>
     <div id="bg-layer-2" class="home-hero__bg-layer opacity-0">
       <img
         id="hero-bg-img-2"
-        alt=""
+        alt="{{ $firstSlideAlt }}"
         width="1600"
         height="840"
         class="home-hero__bg-img"

layouts/partials/home/nav.html

@@ -9,7 +9,7 @@
     <nav class="flex items-center justify-between gap-4 h-[73px]" aria-label="Main navigation">
       <div class="flex items-center gap-2.5 shrink-0 z-20">
         <a href="/" id="ladybug-logo-anchor" class="flex items-center no-underline shrink-0" aria-label="CodeFryDev home">
-          <img src="/images/IconCodefrydev.svg" alt="" width="36" height="36" class="h-9 w-9 shrink-0" fetchpriority="high">
+          <img src="/images/IconCodefrydev.svg" alt="CodeFryDev" width="36" height="36" class="h-9 w-9 shrink-0" fetchpriority="high">
         </a>
         <span class="hidden sm:inline-flex items-baseline font-bold text-lg tracking-tight text-brand leading-none">
           <a href="/" class="text-inherit no-underline hover:opacity-90">CODEFRYDEV</a>

layouts/partials/home/tool-card.html

@@ -13,6 +13,7 @@
 {{- end -}}
 {{- $titleClass := "text-lg xl:text-xl font-semibold text-slate-900 tracking-tight leading-tight truncate m-0 min-w-0" -}}
 {{- $linkClass := "tool-card__link text-inherit no-underline hover:text-brand after:absolute after:inset-0 after:rounded-2xl after:z-10 after:content-['']" -}}
+{{- $iconAlt := $item.iconAlt | default (printf "%s icon" $item.name) -}}
 
 <article
   class="tool-card relative bg-white border border-gray-100 p-3.5 rounded-2xl flex items-center gap-3 hover:-translate-y-1 hover:shadow-md transition-all group"
@@ -50,7 +51,7 @@ <h3 class="{{ $titleClass }}">
     </div>
   </div>
   <div class="w-20 h-20 xl:w-[104px] xl:h-[104px] bg-gray-50/80 rounded-xl shrink-0 flex items-center justify-center p-2 border border-gray-50 group-hover:border-gray-100 transition-colors relative z-0">
-    <img src="/images/{{ $iconDir }}/{{ $item.icon }}.svg" alt="" class="w-full h-full object-contain opacity-80 group-hover:opacity-100 transition-opacity" loading="lazy" width="80" height="80">
+    <img src="/images/{{ $iconDir }}/{{ $item.icon }}.svg" alt="{{ $iconAlt }}" class="w-full h-full object-contain opacity-80 group-hover:opacity-100 transition-opacity" loading="lazy" width="80" height="80"{{- with $item.iconTitle }} title="{{ . }}"{{ end }}>
     {{- if $isExternal -}}
     <span class="absolute top-1 right-1 text-[9px] text-slate-400" aria-hidden="true">↗</span>
     {{- end -}}

static/js/home-hero.js

@@ -27,14 +27,24 @@
   const autoplayMs = prefersReducedMotion ? 0 : Number(window.heroAutoplayMs) || 6000;
   const fadeMs = prefersReducedMotion ? 0 : 500;
 
-  function setLayerImage(layerEl, url) {
-    if (!layerEl || !url) return;
+  function slideImageAlt(slide) {
+    return (slide && (slide.imageAlt || slide.title)) || '';
+  }
+
+  function setLayerImage(layerEl, slide) {
+    if (!layerEl || !slide || !slide.image) return;
     var img = layerEl.querySelector('img');
     if (img) {
-      img.src = url;
+      img.src = slide.image;
+      img.alt = slideImageAlt(slide);
+      if (slide.imageTitle) {
+        img.title = slide.imageTitle;
+      } else {
+        img.removeAttribute('title');
+      }
       return;
     }
-    layerEl.style.backgroundImage = "url('" + String(url).replace(/'/g, "\\'") + "')";
+    layerEl.style.backgroundImage = "url('" + String(slide.image).replace(/'/g, "\\'") + "')";
   }
 
   function syncLadybugBackup() {
@@ -113,7 +123,7 @@
     const nextLayer = activeLayer === 1 ? bgLayer2 : bgLayer1;
     const currentLayerEl = activeLayer === 1 ? bgLayer1 : bgLayer2;
 
-    setLayerImage(nextLayer, slide.image);
+    setLayerImage(nextLayer, slide);
 
     if (fadeMs === 0) {
       applySlideContent(slide);