alt text

Author: davidabram

apps/website/src/components/BookACallForm.astro

@@ -18,7 +18,7 @@ import meetingImage from "../assets/meeting-croc.png";
     <Image
       class="object-cover xl:p-6"
       src={meetingImage}
-      alt=""
+      alt="CroCoder team member in a video call consultation"
       widths={[320, 480, 640, 800, 964]}
       sizes="(max-width: 768px) calc(100vw - 32px), (max-width: 1280px) calc(67vw - 32px), calc(50vw - 28px)"
       loading="lazy"

apps/website/src/components/Clients.astro

@@ -10,21 +10,21 @@ import Section from "./Section.astro";
   </h4>
   <div class="overflow-x-auto whitespace-nowrap px-4 no-scrollbar">
     <div class="flex gap-7 justify-center my-8 lg:my-10 min-w-max">
-      <img src="/conductor.svg" alt="" class="grayscale opacity-50 w-[200px]" />
+      <img src="/conductor.svg" alt="Conductor logo" class="grayscale opacity-50 w-[200px]" />
       <img
         src="/lynes.svg"
-        alt=""
+        alt="Lynes logo"
         class="grayscale opacity-50 w-[200px] md:hidden xl:block"
       />
       <img
         src="/submix.svg"
-        alt=""
+        alt="Submix logo"
         class="grayscale invert opacity-50 w-[200px]"
       />
-      <img src="/sevdesk.svg" alt="" class="grayscale opacity-50 w-[200px]" />
+      <img src="/sevdesk.svg" alt="SevDesk logo" class="grayscale opacity-50 w-[200px]" />
       <img
         src="/misterspex.svg"
-        alt=""
+        alt="Misterspex logo"
         class="grayscale opacity-50 w-[200px]"
       />
     </div>

apps/website/src/components/cto/Hero.astro

@@ -59,7 +59,7 @@ import heroImage from "../../assets/cto-hero.png";
     >
       <Image
         src={heroImage}
-        alt="CroCoder Hero Image"
+        alt="CTO consulting with CroCoder team for strategic technology solutions"
         widths={[320, 480, 640, 800, 1200, 1412]}
         sizes="(max-width: 768px) calc(100vw - 32px), (max-width: 1024px) calc(100vw - 56px), calc(50vw - 28px)"
         loading="eager"

apps/website/src/components/cto/ServiceBlock.astro

@@ -12,7 +12,7 @@ const { image, iconFirst, iconSecond, sectionTitle, titleFirst, titleSecond, des
     </div>
     <div class="rounded-2xl grid grid-cols-1 lg:grid-cols-2 gap-7 items-start">
       <div class="grid grid-cols-1 gap-y-4 text-left sm:text-left">
-        <img src={iconFirst} alt="" class="w-16 h-16 sm:mx-0" />
+        <img src={iconFirst} alt="" class="w-16 h-16 sm:mx-0" role="presentation" />
         <h4 class="font-medium text-xl leading-[22px] md:text-[28px] md:leading-[30px] tracking-tight">
           {titleFirst}
         </h4>
@@ -21,7 +21,7 @@ const { image, iconFirst, iconSecond, sectionTitle, titleFirst, titleSecond, des
         </span>
       </div>
       <div class="grid grid-cols-1 gap-y-4 text-left sm:text-left">
-        <img src={iconSecond} alt="" class="w-16 h-16 sm:mx-0" />
+        <img src={iconSecond} alt="" class="w-16 h-16 sm:mx-0" role="presentation" />
         <h4 class="font-medium text-xl leading-[22px] md:text-[28px] md:leading-[30px] tracking-tight">
           {titleSecond}
         </h4>
@@ -32,5 +32,6 @@ const { image, iconFirst, iconSecond, sectionTitle, titleFirst, titleSecond, des
     </div>
   </div>
   <img src={image}
+  alt="CroCoder team member illustration"
   class="md:absolute bottom-0 left-0 h-40 sm:h-56 lg:h-80 max-w-xs sm:max-w-md relative max-md:top-12 max-md:mt-12" />
 </div>

apps/website/src/components/hero.astro

@@ -15,7 +15,7 @@ import heroImage from "../assets/croco-13.png";
     >
       <Image
         src={heroImage}
-        alt="CroCoder Hero Image"
+        alt="CroCoder team collaborating on web development projects"
         widths={[320, 480, 640, 800, 1196]}
         sizes="(max-width: 540px) calc(67vw - 21px), (max-width: 768px) calc(67vw - 21px), (max-width: 1280px) calc(58vw - 32px), calc(50vw - 28px)"
         loading="eager"

apps/website/src/content/services/create-an-evolving-architecture.md

@@ -1,7 +1,7 @@
 ---
 title: "Create an Evolving Architecture to Withstand Trends"
 imgPath: "/pic-web-dev-topics.png"
-imgAlt: "Illustration of a video meeting with Crocoder team member"
+imgAlt: "Illustration showing web development topics and architecture planning"
 idx: 2
 iconPath: "/performance-increase.svg"
 bgColor: "bg-[#424C6DE5]/[0.9]"

apps/website/src/content/services/improving-engineering-tempo.md

@@ -1,7 +1,7 @@
 ---
 title: "Improve Engineering Tempo"
 imgPath: "/croco-charts.png"
-imgAlt: "Illustration of a video meeting with Crocoder team member"
+imgAlt: "Charts and graphs showing engineering performance metrics and improvements"
 idx: 3
 iconPath: "/stopwatch-gold.svg"
 bgColor: "bg-[#3C3843E5]/[0.9]"

apps/website/src/content/services/lead-migrations-without-imacting-customers.md

@@ -1,7 +1,7 @@
 ---
 title: "Lead Migrations Without Impacting Customers"
 imgPath: "/pic-boy-schedule.png"
-imgAlt: "Illustration of a video meeting with Crocoder team member"
+imgAlt: "Developer working on migration planning and scheduling"
 idx: 1
 iconPath: "/shield-check-gold.svg"
 bgColor: "bg-[#5362DBE5]/[0.9]"

apps/website/src/content/services/upskill-existing-team.md

@@ -1,7 +1,7 @@
 ---
 title: "Upskill Existing Teams "
 imgPath: "/croco-group.png"
-imgAlt: "Illustration of a video meeting with Crocoder team member"
+imgAlt: "Team of developers collaborating and learning together"
 idx: 4
 iconPath: "/management.svg"
 bgColor: "bg-[#1E1A1AE5]/[0.9]"