From 78076b91008e85cda6ae179fa8adfd12e515d3f2 Mon Sep 17 00:00:00 2001
From: Vincent Agra <agravj007@gmail.com>
Date: Sun, 3 May 2026 13:13:40 -0300
Subject: [PATCH] fix(a11y): add descriptive alt text to images with empty alt
 attributes

---
 src/lib/components/channel/WebhookItem.svelte       | 4 ++--
 src/lib/components/chat/Messages/UserMessage.svelte | 2 +-
 src/lib/components/chat/Navbar.svelte               | 2 +-
 src/lib/components/playground/Images.svelte         | 4 ++--
 src/routes/auth/+page.svelte                        | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/channel/WebhookItem.svelte b/src/lib/components/channel/WebhookItem.svelte
index 6ee031f22f..dcc9f166d0 100644
--- a/src/lib/components/channel/WebhookItem.svelte
+++ b/src/lib/components/channel/WebhookItem.svelte
@@ -92,7 +92,7 @@
 		<img
 			src={image || `${WEBUI_BASE_URL}/static/favicon.png`}
 			class="rounded-full size-8 object-cover flex-shrink-0"
-			alt=""
+			alt={name}
 		/>
 		<div class="flex-1 text-left min-w-0">
 			<div class="font-medium text-gray-900 dark:text-white truncate">
@@ -126,7 +126,7 @@
 					<img
 						src={image || `${WEBUI_BASE_URL}/static/favicon.png`}
 						class="size-8 object-cover"
-						alt=""
+						alt={name}
 					/>
 				</button>
 				<div class="flex-1">
diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index acc73c6446..760e0096f1 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -213,7 +213,7 @@
 									: `${WEBUI_API_BASE_URL}/files/${file.url}${file?.content_type ? '/content' : ''}`}
 							<div class={($settings?.chatBubble ?? true) ? 'self-end' : ''}>
 								{#if file.type === 'image' || (file?.content_type ?? '').startsWith('image/')}
-									<Image src={fileUrl} imageClassName=" max-h-96 rounded-lg" />
+									<Image src={fileUrl} alt={$i18n.t('Uploaded image')} imageClassName=" max-h-96 rounded-lg" />
 								{:else}
 									<FileItem
 										item={file}
diff --git a/src/lib/components/chat/Navbar.svelte b/src/lib/components/chat/Navbar.svelte
index 5c4e1364b4..4feb881016 100644
--- a/src/lib/components/chat/Navbar.svelte
+++ b/src/lib/components/chat/Navbar.svelte
@@ -247,7 +247,7 @@
 									<img
 										src={`${WEBUI_API_BASE_URL}/users/${$user?.id}/profile/image`}
 										class="size-6 object-cover rounded-full"
-										alt=""
+										alt={$user?.name ? $i18n.t("{{name}}'s avatar", { name: $user.name }) : ""}
 										draggable="false"
 									/>
 								</div>
diff --git a/src/lib/components/playground/Images.svelte b/src/lib/components/playground/Images.svelte
index f61a3fe4ed..20079b804e 100644
--- a/src/lib/components/playground/Images.svelte
+++ b/src/lib/components/playground/Images.svelte
@@ -140,7 +140,7 @@
 									>
 										<img
 											src={image.url}
-											alt=""
+											alt={$i18n.t('Generated image')}
 											class="w-full aspect-square object-cover rounded-lg border border-gray-100/30 dark:border-gray-850/30"
 										/>
 										<div
@@ -184,7 +184,7 @@
 							{#each sourceImages as image, index}
 								<div class=" relative group">
 									<div class="relative flex items-center">
-										<img src={image} alt="" class="size-10 rounded-xl object-cover" />
+										<img src={image} alt={$i18n.t('Source image')} class="size-10 rounded-xl object-cover" />
 									</div>
 									<div class=" absolute -top-1 -right-1">
 										<button
diff --git a/src/routes/auth/+page.svelte b/src/routes/auth/+page.svelte
index b11f85b7a5..154bb39513 100644
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -595,7 +595,7 @@
 							crossorigin="anonymous"
 							src="{WEBUI_BASE_URL}/static/favicon.png"
 							class=" w-6 rounded-full"
-							alt=""
+							alt="Open WebUI logo"
 						/>
 					</div>
 				</div>