From 1ec7d655ba7185e31135fcb3e59bc2cfb43e9d95 Mon Sep 17 00:00:00 2001
From: Adam <adam.gaborjani.szabo@gmail.com>
Date: Fri, 30 Oct 2026 19:31:41 +0000
Subject: [PATCH] Give the hero owls and tool-page logo descriptive alt text

Bing flagged two images on the homepage with missing alt: the pointing
owl in the hero, which renders twice (one per breakpoint). Owl and
OwlAvatar now put their label on the <img> as alt, and the hero passes a
localized hero.owlAlt. The free-tool header logo had the same gap on all
15 tool pages; it now uses common.logoAlt like the other public headers.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/brand/Owl.tsx                 | 4 ++--
 src/components/free-tools/ToolPageLayout.tsx | 2 +-
 src/components/landing/Hero.tsx              | 4 ++--
 src/locales/en.json                          | 1 +
 src/locales/es.json                          | 1 +
 src/locales/hu.json                          | 1 +
 6 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/brand/Owl.tsx b/src/components/brand/Owl.tsx
index ffc664ce..bb6d93c0 100644
--- a/src/components/brand/Owl.tsx
+++ b/src/components/brand/Owl.tsx
@@ -134,7 +134,7 @@ export function Owl({ pose, size, className, label, priority = false, gesture, b
                 src={POSES[pose]}
                 width={size}
                 height={size}
-                alt=""
+                alt={label ?? ''}
                 draggable={false}
                 decoding="async"
                 loading={priority ? 'eager' : 'lazy'}
@@ -192,7 +192,7 @@ export function OwlAvatar({ pose, size = 40, className, label, blink = false }:
             src={POSES[pose]}
             width={size}
             height={size}
-            alt=""
+            alt={label ?? ''}
             draggable={false}
             decoding="async"
             className="absolute inset-0 h-full w-full select-none object-contain"
diff --git a/src/components/free-tools/ToolPageLayout.tsx b/src/components/free-tools/ToolPageLayout.tsx
index f26c5559..7d5a1640 100644
--- a/src/components/free-tools/ToolPageLayout.tsx
+++ b/src/components/free-tools/ToolPageLayout.tsx
@@ -116,7 +116,7 @@ export function ToolPageLayout({ route, title, intro, shortAnswer, tool, childre
       <header className="border-b border-border/60 print:hidden">
         <div className="container flex h-14 items-center justify-between gap-4 px-4">
           <Link to={home} aria-label={t('translation:common.homeLink')} className="flex items-center gap-2 rounded-md pointer-coarse:min-h-11">
-            <OwlMark size={32} />
+            <OwlMark size={32} alt={t('translation:common.logoAlt')} />
             <span className="font-display text-lg font-[600] tracking-[-0.01em] text-heading">{site.product}</span>
           </Link>
           <Link to={hub} className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground pointer-coarse:min-h-11">
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
index 7fb4915f..5651b884 100644
--- a/src/components/landing/Hero.tsx
+++ b/src/components/landing/Hero.tsx
@@ -29,7 +29,7 @@ const Hero = () => {
                     <div className="mx-auto w-full max-w-2xl lg:mx-0 lg:max-w-none">
                         {/* Below lg the product preview is hidden, so Ollie greets the visitor here instead. */}
                         <Reveal onLoad className="mb-3 lg:hidden">
-                            <Owl pose="point" size={88} priority breathe={false} className="-ml-2" />
+                            <Owl pose="point" size={88} label={t('hero.owlAlt')} priority breathe={false} className="-ml-2" />
                         </Reveal>
 
                         <Reveal onLoad delay={0.05}>
@@ -111,7 +111,7 @@ const HeroPreview = () => {
         <Reveal onLoad delay={0.1} className="relative hidden w-full lg:block">
             <div className="absolute -inset-8 bg-linear-to-r from-plume-400/25 via-plume-200/20 to-[rgb(255_196_20/0.22)] blur-3xl" />
             {/* The owl points the visitor at the product. */}
-            <Owl pose="point" size={140} priority breathe={false} className="absolute -bottom-10 -left-24 z-20 -scale-x-100" />
+            <Owl pose="point" size={140} label={t('hero.owlAlt')} priority breathe={false} className="absolute -bottom-10 -left-24 z-20 -scale-x-100" />
             <div className="relative overflow-hidden rounded-xl border-2 border-border bg-card shadow-2xl">
                 {/* Browser chrome */}
                 <div className="flex items-center border-b-2 border-border px-5 py-3">
diff --git a/src/locales/en.json b/src/locales/en.json
index dc48f91f..c5cd15b0 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -901,6 +901,7 @@
     "cta": "Start free trial",
     "trustBullet1": "No credit card required",
     "trustBullet2": "Cancel anytime",
+    "owlAlt": "The owl, pointing you to the app",
     "preview": {
       "topicLabel": "Motion",
       "topicValue": "Should schools ban phones?",
diff --git a/src/locales/es.json b/src/locales/es.json
index 3f4ae831..66a2e049 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -901,6 +901,7 @@
     "cta": "Comenzar prueba gratis",
     "trustBullet1": "Sin tarjeta de crédito",
     "trustBullet2": "Cancela cuando quieras",
+    "owlAlt": "El búho, señalándote la app",
     "preview": {
       "topicLabel": "Moción",
       "topicValue": "¿Deberían las escuelas prohibir los teléfonos?",
diff --git a/src/locales/hu.json b/src/locales/hu.json
index f79e053a..6af345e9 100644
--- a/src/locales/hu.json
+++ b/src/locales/hu.json
@@ -901,6 +901,7 @@
     "cta": "Ingyenes próba indítása",
     "trustBullet1": "Bankkártya nem szükséges",
     "trustBullet2": "Bármikor lemondható",
+    "owlAlt": "A bagoly az alkalmazásra mutat",
     "preview": {
       "topicLabel": "Indítvány",
       "topicValue": "Tiltsák be az iskolák a telefonokat?",