From cd002d5e46dbf6e3d855e00f7a67b7d60d7ddb9d Mon Sep 17 00:00:00 2001
From: alexma233 <i@fur.im>
Date: Wed, 6 May 2026 13:16:55 +0800
Subject: [PATCH] fix(web): improve accessibility semantics

---
 web/src/lib/components/app/code-editor.svelte |  2 +-
 web/src/lib/components/app/copy-button.svelte |  4 +-
 .../app/disabled-reason-tooltip.svelte        |  8 +--
 .../lib/components/ui/card/card-title.svelte  | 12 +++--
 .../ui/input-group/input-group-addon.svelte   |  7 +++
 .../ui/pagination/pagination-ellipsis.svelte  |  3 +-
 web/src/lib/i18n/messages/en-us.ts            |  1 +
 web/src/lib/i18n/messages/zh-hans.ts          |  1 +
 web/src/routes/+layout.svelte                 |  6 ++-
 web/src/routes/+page.svelte                   |  8 +--
 web/src/routes/backups/+page.svelte           |  2 +-
 web/src/routes/backups/[id]/+page.svelte      |  2 +-
 web/src/routes/login/+page.svelte             |  2 +-
 web/src/routes/nodes/+page.svelte             |  2 +-
 web/src/routes/nodes/[id]/+page.svelte        |  6 +--
 .../nodes/[id]/docker/containers/+page.svelte |  3 +-
 .../[id]/docker/containers/[cid]/+page.svelte | 34 ++++++------
 .../nodes/[id]/docker/images/+page.svelte     |  3 +-
 .../[id]/docker/images/[img]/+page.svelte     | 12 ++---
 .../nodes/[id]/docker/networks/+page.svelte   |  3 +-
 .../[id]/docker/networks/[nid]/+page.svelte   | 14 ++---
 .../nodes/[id]/docker/volumes/+page.svelte    |  3 +-
 .../[id]/docker/volumes/[vol]/+page.svelte    | 14 ++---
 web/src/routes/services/+page.svelte          |  2 +-
 web/src/routes/services/[name]/+page.svelte   | 53 +++++++++++--------
 web/src/routes/settings/+page.svelte          | 10 ++--
 web/src/routes/tasks/+page.svelte             |  2 +-
 web/src/routes/tasks/[id]/+page.svelte        |  6 +--
 28 files changed, 129 insertions(+), 96 deletions(-)

diff --git a/web/src/lib/components/app/code-editor.svelte b/web/src/lib/components/app/code-editor.svelte
index 3e95d4a..6424764 100644
--- a/web/src/lib/components/app/code-editor.svelte
+++ b/web/src/lib/components/app/code-editor.svelte
@@ -221,4 +221,4 @@
   }
 </script>
 
-<div bind:this={host} class="h-full min-h-0 overflow-hidden rounded-xl" role="textbox" aria-label="Code editor"></div>
+<div bind:this={host} class="h-full min-h-0 overflow-hidden rounded-xl" role="region" aria-label="Code editor"></div>
diff --git a/web/src/lib/components/app/copy-button.svelte b/web/src/lib/components/app/copy-button.svelte
index 51eb157..170538b 100644
--- a/web/src/lib/components/app/copy-button.svelte
+++ b/web/src/lib/components/app/copy-button.svelte
@@ -31,9 +31,9 @@
       class="h-6 w-6 text-muted-foreground hover:text-foreground"
     >
       {#if copied}
-        <Check class="h-3.5 w-3.5 text-green-500" />
+        <Check class="h-3.5 w-3.5 text-green-500" aria-hidden="true" />
       {:else}
-        <Copy class="h-3.5 w-3.5" />
+        <Copy class="h-3.5 w-3.5" aria-hidden="true" />
       {/if}
       <span class="sr-only">{label}</span>
     </Button>
diff --git a/web/src/lib/components/app/disabled-reason-tooltip.svelte b/web/src/lib/components/app/disabled-reason-tooltip.svelte
index b1e7ee6..1a86a71 100644
--- a/web/src/lib/components/app/disabled-reason-tooltip.svelte
+++ b/web/src/lib/components/app/disabled-reason-tooltip.svelte
@@ -15,9 +15,11 @@
 {#if reason}
   <Tooltip.Root>
     <Tooltip.Trigger>
-      <span class={triggerClass}>
-        {@render children?.()}
-      </span>
+      {#snippet child({ props })}
+        <span class={triggerClass} {...props}>
+          {@render children?.()}
+        </span>
+      {/snippet}
     </Tooltip.Trigger>
     <Tooltip.Content>
       <p>{reason}</p>
diff --git a/web/src/lib/components/ui/card/card-title.svelte b/web/src/lib/components/ui/card/card-title.svelte
index 1523fc5..64a3820 100644
--- a/web/src/lib/components/ui/card/card-title.svelte
+++ b/web/src/lib/components/ui/card/card-title.svelte
@@ -6,15 +6,21 @@
 		ref = $bindable(null),
 		class: className,
 		children,
+		level = undefined as "1" | "2" | "3" | "4" | "5" | "6" | undefined,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLHeadingElement>> & {
+		level?: "1" | "2" | "3" | "4" | "5" | "6";
+	} = $props();
+
+	let tag = $derived(level ? `h${level}` : "div");
 </script>
 
-<div
+<svelte:element
+	this={tag}
 	bind:this={ref}
 	data-slot="card-title"
 	class={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
 	{...restProps}
 >
 	{@render children?.()}
-</div>
+</svelte:element>
diff --git a/web/src/lib/components/ui/input-group/input-group-addon.svelte b/web/src/lib/components/ui/input-group/input-group-addon.svelte
index ea075ea..f22b292 100644
--- a/web/src/lib/components/ui/input-group/input-group-addon.svelte
+++ b/web/src/lib/components/ui/input-group/input-group-addon.svelte
@@ -40,12 +40,19 @@
 	data-slot="input-group-addon"
 	data-align={align}
 	class={cn(inputGroupAddonVariants({ align }), className)}
+	tabindex="-1"
 	onclick={(e) => {
 		if ((e.target as HTMLElement).closest("button")) {
 			return;
 		}
 		e.currentTarget.parentElement?.querySelector("input")?.focus();
 	}}
+	onkeydown={(e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			e.currentTarget.parentElement?.querySelector("input")?.focus();
+		}
+	}}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/web/src/lib/components/ui/pagination/pagination-ellipsis.svelte b/web/src/lib/components/ui/pagination/pagination-ellipsis.svelte
index ca9b8c3..155fe16 100644
--- a/web/src/lib/components/ui/pagination/pagination-ellipsis.svelte
+++ b/web/src/lib/components/ui/pagination/pagination-ellipsis.svelte
@@ -12,11 +12,10 @@
 
 <span
 	bind:this={ref}
-	aria-hidden="true"
 	data-slot="pagination-ellipsis"
 	class={cn("size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4 flex items-center justify-center", className)}
 	{...restProps}
 >
-	<MoreHorizontalIcon  />
+	<MoreHorizontalIcon aria-hidden="true" />
 	<span class="sr-only">More pages</span>
 </span>
diff --git a/web/src/lib/i18n/messages/en-us.ts b/web/src/lib/i18n/messages/en-us.ts
index 9ff6950..e6b3995 100644
--- a/web/src/lib/i18n/messages/en-us.ts
+++ b/web/src/lib/i18n/messages/en-us.ts
@@ -12,6 +12,7 @@ export const enUS = {
     subtitle: "Service-first self-hosted operations",
   },
   nav: {
+    navLabel: "Main navigation",
     overview: "Dashboard",
     services: "Services",
     nodes: "Nodes",
diff --git a/web/src/lib/i18n/messages/zh-hans.ts b/web/src/lib/i18n/messages/zh-hans.ts
index 4e920b3..24dacd9 100644
--- a/web/src/lib/i18n/messages/zh-hans.ts
+++ b/web/src/lib/i18n/messages/zh-hans.ts
@@ -4,6 +4,7 @@ export const zhHans = {
     subtitle: "面向服务的自托管运维平台",
   },
   nav: {
+    navLabel: "主导航",
     overview: "概览",
     services: "服务",
     nodes: "节点",
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index c447d97..35342a5 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -77,7 +77,7 @@
             >
           </div>
 
-          <nav class="flex shrink-0 gap-2 text-sm whitespace-nowrap">
+          <nav class="flex shrink-0 gap-2 text-sm whitespace-nowrap" aria-label={$messages.nav.navLabel}>
             {#each visibleLinks as link}
               <a
                 href={link.href}
@@ -110,5 +110,7 @@
     </header>
   {/if}
 
-  {@render children?.()}
+  <main>
+    {@render children?.()}
+  </main>
 </div>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 4e34e70..49a2447 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -49,7 +49,7 @@
     <CardHeader>
       <div class="page-header">
         <div class="page-heading">
-          <CardTitle class="page-title">{$messages.dashboard.title}</CardTitle>
+          <CardTitle class="page-title" level="1">{$messages.dashboard.title}</CardTitle>
         </div>
       </div>
 
@@ -65,7 +65,7 @@
 		<Card>
         <CardHeader>
           <div class="flex items-center justify-between gap-3">
-            <CardTitle class="section-title">
+            <CardTitle class="section-title" level="2">
               <a class="hover:text-foreground/80 transition-colors" href="/services">{$messages.dashboard.services}</a>
             </CardTitle>
             <Badge variant="outline">{data.dashboard?.services.length ?? 0}</Badge>
@@ -103,7 +103,7 @@
 			<Card>
           <CardHeader>
             <div class="flex items-center justify-between gap-3">
-              <CardTitle class="section-title">
+              <CardTitle class="section-title" level="2">
                 <a class="hover:text-foreground/80 transition-colors" href="/nodes">{$messages.dashboard.nodes}</a>
               </CardTitle>
               <Badge variant="outline">{data.dashboard?.nodes.length ?? 0}</Badge>
@@ -141,7 +141,7 @@
 			<Card>
           <CardHeader>
             <div class="flex items-center justify-between gap-3">
-              <CardTitle class="section-title">
+              <CardTitle class="section-title" level="2">
                 <a class="hover:text-foreground/80 transition-colors" href="/tasks">{$messages.dashboard.tasks}</a>
               </CardTitle>
               <Badge variant="outline">{totalTaskCount()}</Badge>
diff --git a/web/src/routes/backups/+page.svelte b/web/src/routes/backups/+page.svelte
index 41e02fe..24c3797 100644
--- a/web/src/routes/backups/+page.svelte
+++ b/web/src/routes/backups/+page.svelte
@@ -322,7 +322,7 @@
     <CardHeader>
       <div class="page-header">
         <div class="page-heading">
-          <CardTitle class="page-title">{$messages.backups.title}</CardTitle>
+          <CardTitle class="page-title" level="1">{$messages.backups.title}</CardTitle>
         </div>
         <div class="flex items-center gap-2">
           <Popover.Root bind:open={filterOpen}>
diff --git a/web/src/routes/backups/[id]/+page.svelte b/web/src/routes/backups/[id]/+page.svelte
index 5842471..d5be9bc 100644
--- a/web/src/routes/backups/[id]/+page.svelte
+++ b/web/src/routes/backups/[id]/+page.svelte
@@ -158,7 +158,7 @@
       <CardHeader>
       <div class="page-header">
         <div class="page-heading">
-          <CardTitle class="page-title"
+          <CardTitle class="page-title" level="1"
             >{$messages.backups.detailsTitle}</CardTitle
           >
           {#if data.backup}
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index 27d3f02..96c28fb 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -29,7 +29,7 @@
 <div class="flex min-h-screen items-center justify-center px-4 py-10">
   <Card class="w-full max-w-md border-border/70 bg-background/95 shadow-lg backdrop-blur">
     <CardHeader class="space-y-2 text-center">
-      <CardTitle class="text-2xl font-semibold tracking-tight">{$messages.auth.login.title}</CardTitle>
+      <CardTitle class="text-2xl font-semibold tracking-tight" level="1">{$messages.auth.login.title}</CardTitle>
       <CardDescription>{$messages.auth.login.description}</CardDescription>
     </CardHeader>
     <CardContent>
diff --git a/web/src/routes/nodes/+page.svelte b/web/src/routes/nodes/+page.svelte
index 75f61bf..1bb76d0 100644
--- a/web/src/routes/nodes/+page.svelte
+++ b/web/src/routes/nodes/+page.svelte
@@ -33,7 +33,7 @@
     <CardHeader>
       <div class="page-header">
         <div class="page-heading">
-          <CardTitle class="page-title">{$messages.nodes.title}</CardTitle>
+          <CardTitle class="page-title" level="1">{$messages.nodes.title}</CardTitle>
         </div>
         <Badge variant="outline">{data.nodes.length}</Badge>
       </div>
diff --git a/web/src/routes/nodes/[id]/+page.svelte b/web/src/routes/nodes/[id]/+page.svelte
index 960edf1..8b1aee5 100644
--- a/web/src/routes/nodes/[id]/+page.svelte
+++ b/web/src/routes/nodes/[id]/+page.svelte
@@ -199,7 +199,7 @@
         {#if data.node}
           <div class="page-header">
             <div class="page-heading">
-              <CardTitle class="page-title">{data.node.displayName}</CardTitle>
+              <CardTitle class="page-title" level="1">{data.node.displayName}</CardTitle>
               {#if data.node.displayName !== data.node.nodeId}
                 <p class="page-meta">
                   {data.node.nodeId} · {$messages.dashboard.lastHeartbeat}
@@ -231,7 +231,7 @@
 
     <Card>
       <CardHeader>
-        <CardTitle class="section-title"
+        <CardTitle class="section-title" level="2"
           >{$messages.nodes.docker.title}</CardTitle
         >
       </CardHeader>
@@ -497,7 +497,7 @@
     <Card>
       <CardHeader class="section-header">
         <div class="section-heading">
-          <CardTitle class="section-title">
+          <CardTitle class="section-title" level="2">
             {#if data.node}
               <a
                 class="hover:text-foreground/80 transition-colors"
diff --git a/web/src/routes/nodes/[id]/docker/containers/+page.svelte b/web/src/routes/nodes/[id]/docker/containers/+page.svelte
index 5b0b878..5302e2b 100644
--- a/web/src/routes/nodes/[id]/docker/containers/+page.svelte
+++ b/web/src/routes/nodes/[id]/docker/containers/+page.svelte
@@ -266,7 +266,7 @@
 			<CardHeader>
         <div class="page-header">
           <div class="page-heading">
-            <CardTitle class="page-title">{$messages.docker.containers.title}</CardTitle>
+            <CardTitle class="page-title" level="1">{$messages.docker.containers.title}</CardTitle>
             <p class="page-description">
               {$messages.docker.containers.titleOnNode.replace('{nodeId}', data.nodeId)}
               {#if !loading}
@@ -285,6 +285,7 @@
             <Input
               type="text"
               placeholder={$messages.docker.containers.searchPlaceholder}
+              aria-label={$messages.docker.containers.searchPlaceholder}
               class="pl-9"
               bind:value={searchQuery}
               oninput={handleSearchInput}
diff --git a/web/src/routes/nodes/[id]/docker/containers/[cid]/+page.svelte b/web/src/routes/nodes/[id]/docker/containers/[cid]/+page.svelte
index 113a993..fac5d80 100644
--- a/web/src/routes/nodes/[id]/docker/containers/[cid]/+page.svelte
+++ b/web/src/routes/nodes/[id]/docker/containers/[cid]/+page.svelte
@@ -408,7 +408,7 @@
       <CardHeader>
         <div class="page-header">
           <div class="page-heading">
-            <CardTitle class="page-title">
+            <CardTitle class="page-title" level="1">
               {#if containerData}
                 {containerData.Name?.replace(/^\//, "") || data.containerId}
               {:else}
@@ -520,7 +520,7 @@
               <div class="grid gap-4 md:grid-cols-2">
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base"
+                    <CardTitle class="text-base" level="3"
                       >{$messages.docker.containers.general}</CardTitle
                     >
                   </CardHeader>
@@ -593,7 +593,7 @@
 
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base"
+                    <CardTitle class="text-base" level="3"
                       >{$messages.docker.containers.runtime}</CardTitle
                     >
                   </CardHeader>
@@ -696,7 +696,7 @@
 
               <Card>
                 <CardHeader class="pb-3">
-                  <CardTitle class="text-base"
+                  <CardTitle class="text-base" level="3"
                     >{$messages.docker.containers.process}</CardTitle
                   >
                 </CardHeader>
@@ -744,7 +744,7 @@
                     class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
                   >
                     <div>
-                      <CardTitle class="text-base"
+                      <CardTitle class="text-base" level="3"
                         >{$messages.docker.containers.containerLogs}</CardTitle
                       >
                       <CardDescription
@@ -755,7 +755,7 @@
                     <div
                       class="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center"
                     >
-                      <Input bind:value={logTail} class="w-full sm:w-24" />
+                      <Input bind:value={logTail} class="w-full sm:w-24" aria-label={$messages.docker.containers.containerLogs} />
                       <Button
                         variant="outline"
                         size="sm"
@@ -788,7 +788,7 @@
             <TabsContent value="terminal" class="space-y-4">
               <Card>
                 <CardHeader class="pb-3">
-                  <CardTitle class="text-base"
+                  <CardTitle class="text-base" level="3"
                     >{$messages.docker.containers.terminal.title}</CardTitle
                   >
                   <CardDescription
@@ -802,6 +802,8 @@
                       bind:value={terminalCommand}
                       placeholder={$messages.docker.containers.terminal
                         .placeholder}
+                      aria-label={$messages.docker.containers.terminal
+                        .placeholder}
                       class="w-full sm:min-w-[220px] sm:flex-1"
                     />
                     <Button
@@ -856,7 +858,7 @@
               <div class="grid gap-4 md:grid-cols-2">
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base"
+                    <CardTitle class="text-base" level="3"
                       >{$messages.docker.containers.configuration}</CardTitle
                     >
                   </CardHeader>
@@ -969,7 +971,7 @@
 
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base"
+                    <CardTitle class="text-base" level="3"
                       >{$messages.docker.containers.hostConfig}</CardTitle
                     >
                   </CardHeader>
@@ -1069,7 +1071,7 @@
             <TabsContent value="env" class="space-y-4">
               <Card>
                 <CardHeader class="pb-3">
-                  <CardTitle class="text-base"
+                  <CardTitle class="text-base" level="3"
                     >{$messages.docker.containers.environment}</CardTitle
                   >
                 </CardHeader>
@@ -1103,7 +1105,7 @@
             <TabsContent value="network" class="space-y-4">
               <Card>
                 <CardHeader class="pb-3">
-                  <CardTitle class="text-base"
+                  <CardTitle class="text-base" level="3"
                     >{$messages.docker.containers.portBindings}</CardTitle
                   >
                 </CardHeader>
@@ -1142,7 +1144,7 @@
 
               <Card>
                 <CardHeader class="pb-3">
-                  <CardTitle class="text-base"
+                  <CardTitle class="text-base" level="3"
                     >{$messages.docker.containers.exposedPorts}</CardTitle
                   >
                 </CardHeader>
@@ -1163,7 +1165,7 @@
 
               <Card>
                 <CardHeader class="pb-3">
-                  <CardTitle class="text-base"
+                  <CardTitle class="text-base" level="3"
                     >{$messages.docker.containers.networkSettings}</CardTitle
                   >
                 </CardHeader>
@@ -1205,7 +1207,7 @@
             <TabsContent value="volumes" class="space-y-4">
               <Card>
                 <CardHeader class="pb-3">
-                  <CardTitle class="text-base"
+                  <CardTitle class="text-base" level="3"
                     >{$messages.docker.containers.mounts}</CardTitle
                   >
                 </CardHeader>
@@ -1261,7 +1263,7 @@
             <TabsContent value="labels" class="space-y-4">
               <Card>
                 <CardHeader class="pb-3">
-                  <CardTitle class="text-base"
+                  <CardTitle class="text-base" level="3"
                     >{$messages.docker.containers.containerLabels}</CardTitle
                   >
                 </CardHeader>
@@ -1294,7 +1296,7 @@
             <TabsContent value="raw">
               <Card>
                 <CardHeader class="pb-3">
-                  <CardTitle class="text-base"
+                  <CardTitle class="text-base" level="3"
                     >{$messages.docker.containers.rawJson}</CardTitle
                   >
                   <CardDescription>
diff --git a/web/src/routes/nodes/[id]/docker/images/+page.svelte b/web/src/routes/nodes/[id]/docker/images/+page.svelte
index f34763f..33ab3e2 100644
--- a/web/src/routes/nodes/[id]/docker/images/+page.svelte
+++ b/web/src/routes/nodes/[id]/docker/images/+page.svelte
@@ -226,7 +226,7 @@
 			<CardHeader>
         <div class="page-header">
           <div class="page-heading">
-            <CardTitle class="page-title">{$messages.docker.images.title}</CardTitle>
+            <CardTitle class="page-title" level="1">{$messages.docker.images.title}</CardTitle>
             <p class="page-description">
               {$messages.docker.images.titleOnNode.replace('{nodeId}', data.nodeId)}
               {#if !loading}
@@ -245,6 +245,7 @@
             <Input
               type="text"
               placeholder={$messages.docker.images.searchPlaceholder}
+              aria-label={$messages.docker.images.searchPlaceholder}
               class="pl-9"
               bind:value={searchQuery}
               oninput={handleSearchInput}
diff --git a/web/src/routes/nodes/[id]/docker/images/[img]/+page.svelte b/web/src/routes/nodes/[id]/docker/images/[img]/+page.svelte
index 0643d29..4cc0e8c 100644
--- a/web/src/routes/nodes/[id]/docker/images/[img]/+page.svelte
+++ b/web/src/routes/nodes/[id]/docker/images/[img]/+page.svelte
@@ -44,7 +44,7 @@
 			<CardHeader>
         <div class="page-header">
           <div class="page-heading">
-            <CardTitle class="page-title">
+            <CardTitle class="page-title" level="1">
               {#if imageData}
                 {imageData.RepoTags?.[0]?.split(':')[0] || data.imageId.substring(0, 12)}
               {:else}
@@ -90,7 +90,7 @@
               <div class="grid gap-4 md:grid-cols-2">
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base">{$messages.docker.images.identity}</CardTitle>
+                    <CardTitle class="text-base" level="3">{$messages.docker.images.identity}</CardTitle>
                   </CardHeader>
                   <CardContent class="space-y-2 text-sm">
                     <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
@@ -127,7 +127,7 @@
 
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base">{$messages.docker.images.details}</CardTitle>
+                    <CardTitle class="text-base" level="3">{$messages.docker.images.details}</CardTitle>
                   </CardHeader>
                   <CardContent class="space-y-2 text-sm">
                     <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
@@ -159,7 +159,7 @@
               {#if imageData.Config?.Env && imageData.Config.Env.length > 0}
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base">{$messages.docker.images.environmentVariables}</CardTitle>
+                    <CardTitle class="text-base" level="3">{$messages.docker.images.environmentVariables}</CardTitle>
                   </CardHeader>
                   <CardContent>
                     <div class="space-y-1">
@@ -181,7 +181,7 @@
               {#if imageData.RootFS?.Layers && imageData.RootFS.Layers.length > 0}
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base">{$messages.docker.images.layers} ({imageData.RootFS.Layers.length})</CardTitle>
+                    <CardTitle class="text-base" level="3">{$messages.docker.images.layers} ({imageData.RootFS.Layers.length})</CardTitle>
                   </CardHeader>
                   <CardContent>
                     <div class="space-y-2">
@@ -204,7 +204,7 @@
             <TabsContent value="raw">
               <Card>
                 <CardHeader class="pb-3">
-                  <CardTitle class="text-base">{$messages.docker.images.rawJson}</CardTitle>
+                  <CardTitle class="text-base" level="3">{$messages.docker.images.rawJson}</CardTitle>
                   <CardDescription>{$messages.docker.images.rawJsonDescription}</CardDescription>
                 </CardHeader>
                 <CardContent>
diff --git a/web/src/routes/nodes/[id]/docker/networks/+page.svelte b/web/src/routes/nodes/[id]/docker/networks/+page.svelte
index 87eb6a9..392502a 100644
--- a/web/src/routes/nodes/[id]/docker/networks/+page.svelte
+++ b/web/src/routes/nodes/[id]/docker/networks/+page.svelte
@@ -223,7 +223,7 @@
 			<CardHeader>
         <div class="page-header">
           <div class="page-heading">
-            <CardTitle class="page-title">{$messages.docker.networks.title}</CardTitle>
+            <CardTitle class="page-title" level="1">{$messages.docker.networks.title}</CardTitle>
             <p class="page-description">
               {$messages.docker.networks.titleOnNode.replace('{nodeId}', data.nodeId)}
               {#if !loading}
@@ -242,6 +242,7 @@
             <Input
               type="text"
               placeholder={$messages.docker.networks.searchPlaceholder}
+              aria-label={$messages.docker.networks.searchPlaceholder}
               class="pl-9"
               bind:value={searchQuery}
               oninput={handleSearchInput}
diff --git a/web/src/routes/nodes/[id]/docker/networks/[nid]/+page.svelte b/web/src/routes/nodes/[id]/docker/networks/[nid]/+page.svelte
index 6b2dedd..eeab59c 100644
--- a/web/src/routes/nodes/[id]/docker/networks/[nid]/+page.svelte
+++ b/web/src/routes/nodes/[id]/docker/networks/[nid]/+page.svelte
@@ -54,7 +54,7 @@
 			<CardHeader>
         <div class="page-header">
           <div class="page-heading">
-            <CardTitle class="page-title">
+            <CardTitle class="page-title" level="1">
               {#if networkData}
                 {networkData.Name || data.networkId.substring(0, 12)}
               {:else}
@@ -107,7 +107,7 @@
               <div class="grid gap-4 md:grid-cols-3">
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base">{$messages.docker.networks.configuration}</CardTitle>
+                    <CardTitle class="text-base" level="3">{$messages.docker.networks.configuration}</CardTitle>
                   </CardHeader>
                   <CardContent class="space-y-2 text-sm">
                     <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
@@ -133,7 +133,7 @@
 
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base">{$messages.docker.networks.networkSettings}</CardTitle>
+                    <CardTitle class="text-base" level="3">{$messages.docker.networks.networkSettings}</CardTitle>
                   </CardHeader>
                   <CardContent class="space-y-2 text-sm">
                     {#if networkData.IPAM?.Config && networkData.IPAM.Config.length > 0}
@@ -170,7 +170,7 @@
 
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base">{$messages.docker.networks.accessControl}</CardTitle>
+                    <CardTitle class="text-base" level="3">{$messages.docker.networks.accessControl}</CardTitle>
                   </CardHeader>
                   <CardContent class="space-y-2 text-sm">
                     <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
@@ -198,7 +198,7 @@
               {#if networkData.Labels && Object.keys(networkData.Labels).length > 0}
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base">{$messages.docker.networks.labels}</CardTitle>
+                    <CardTitle class="text-base" level="3">{$messages.docker.networks.labels}</CardTitle>
                   </CardHeader>
                   <CardContent>
                     <div class="space-y-1">
@@ -218,7 +218,7 @@
               {#if networkData.Containers && Object.keys(networkData.Containers).length > 0}
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base">{$messages.docker.networks.connectedContainers} ({Object.keys(networkData.Containers).length})</CardTitle>
+                    <CardTitle class="text-base" level="3">{$messages.docker.networks.connectedContainers} ({Object.keys(networkData.Containers).length})</CardTitle>
                   </CardHeader>
                   <CardContent>
                     <div class="space-y-3">
@@ -262,7 +262,7 @@
             <TabsContent value="raw">
               <Card>
                 <CardHeader class="pb-3">
-                  <CardTitle class="text-base">{$messages.docker.networks.rawJson}</CardTitle>
+                  <CardTitle class="text-base" level="3">{$messages.docker.networks.rawJson}</CardTitle>
                   <CardDescription>{$messages.docker.networks.rawJsonDescription}</CardDescription>
                 </CardHeader>
                 <CardContent>
diff --git a/web/src/routes/nodes/[id]/docker/volumes/+page.svelte b/web/src/routes/nodes/[id]/docker/volumes/+page.svelte
index c4607a2..9b0d1ab 100644
--- a/web/src/routes/nodes/[id]/docker/volumes/+page.svelte
+++ b/web/src/routes/nodes/[id]/docker/volumes/+page.svelte
@@ -208,7 +208,7 @@
 			<CardHeader>
         <div class="page-header">
           <div class="page-heading">
-            <CardTitle class="page-title">{$messages.docker.volumes.title}</CardTitle>
+            <CardTitle class="page-title" level="1">{$messages.docker.volumes.title}</CardTitle>
             <p class="page-description">
               {$messages.docker.volumes.titleOnNode.replace('{nodeId}', data.nodeId)}
               {#if !loading}
@@ -227,6 +227,7 @@
             <Input
               type="text"
               placeholder={$messages.docker.volumes.searchPlaceholder}
+              aria-label={$messages.docker.volumes.searchPlaceholder}
               class="pl-9"
               bind:value={searchQuery}
               oninput={handleSearchInput}
diff --git a/web/src/routes/nodes/[id]/docker/volumes/[vol]/+page.svelte b/web/src/routes/nodes/[id]/docker/volumes/[vol]/+page.svelte
index 0932784..adb19ad 100644
--- a/web/src/routes/nodes/[id]/docker/volumes/[vol]/+page.svelte
+++ b/web/src/routes/nodes/[id]/docker/volumes/[vol]/+page.svelte
@@ -46,7 +46,7 @@
 			<CardHeader>
         <div class="page-header">
           <div class="page-heading">
-            <CardTitle class="page-title">
+            <CardTitle class="page-title" level="1">
               {#if volumeData}
                 {volumeData.Name || data.volumeName}
               {:else}
@@ -93,7 +93,7 @@
               <div class="grid gap-4 md:grid-cols-2">
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base">{$messages.docker.volumes.details}</CardTitle>
+                    <CardTitle class="text-base" level="3">{$messages.docker.volumes.details}</CardTitle>
                   </CardHeader>
                   <CardContent class="space-y-2 text-sm">
                     <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
@@ -119,7 +119,7 @@
 
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base">{$messages.docker.volumes.storage}</CardTitle>
+                    <CardTitle class="text-base" level="3">{$messages.docker.volumes.storage}</CardTitle>
                   </CardHeader>
                   <CardContent class="space-y-2 text-sm">
                     {#if volumeData.UsageData?.Size}
@@ -146,7 +146,7 @@
               {#if volumeData.Labels && Object.keys(volumeData.Labels).length > 0}
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base">{$messages.docker.volumes.labels}</CardTitle>
+                    <CardTitle class="text-base" level="3">{$messages.docker.volumes.labels}</CardTitle>
                   </CardHeader>
                   <CardContent>
                     <div class="space-y-1">
@@ -164,7 +164,7 @@
               {#if volumeData.Options && Object.keys(volumeData.Options).length > 0}
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base">{$messages.docker.volumes.options}</CardTitle>
+                    <CardTitle class="text-base" level="3">{$messages.docker.volumes.options}</CardTitle>
                   </CardHeader>
                   <CardContent>
                     <div class="space-y-1">
@@ -184,7 +184,7 @@
               {#if volumeData.UsageData}
                 <Card>
                   <CardHeader class="pb-3">
-                    <CardTitle class="text-base">{$messages.docker.volumes.usageStatistics}</CardTitle>
+                    <CardTitle class="text-base" level="3">{$messages.docker.volumes.usageStatistics}</CardTitle>
                   </CardHeader>
                   <CardContent class="space-y-2 text-sm">
                     <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
@@ -211,7 +211,7 @@
             <TabsContent value="raw">
               <Card>
                 <CardHeader class="pb-3">
-                  <CardTitle class="text-base">{$messages.docker.volumes.rawJson}</CardTitle>
+                  <CardTitle class="text-base" level="3">{$messages.docker.volumes.rawJson}</CardTitle>
                   <CardDescription>{$messages.docker.volumes.rawJsonDescription}</CardDescription>
                 </CardHeader>
                 <CardContent>
diff --git a/web/src/routes/services/+page.svelte b/web/src/routes/services/+page.svelte
index 63bdca4..fc5b0de 100644
--- a/web/src/routes/services/+page.svelte
+++ b/web/src/routes/services/+page.svelte
@@ -58,7 +58,7 @@
     <CardHeader>
       <div class="page-header">
         <div class="page-heading">
-          <CardTitle class="page-title">{$messages.services.title}</CardTitle>
+          <CardTitle class="page-title" level="1">{$messages.services.title}</CardTitle>
         </div>
         <div class="flex items-center gap-3">
           {#if data.repoHead}
diff --git a/web/src/routes/services/[name]/+page.svelte b/web/src/routes/services/[name]/+page.svelte
index 3812d57..39c152a 100644
--- a/web/src/routes/services/[name]/+page.svelte
+++ b/web/src/routes/services/[name]/+page.svelte
@@ -1191,20 +1191,23 @@
       <CardHeader class="gap-3 py-4">
         <div class="page-header">
           <div class="page-heading">
-            <CardTitle class="page-title">
+            <CardTitle class="page-title" level="1">
               <Popover.Root bind:open={serviceSwitchOpen}>
                 <Popover.Trigger class="inline-flex">
-                  <button
-                    type="button"
-                    class="flex items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground"
-                  >
-                    <span
-                      class="min-w-0 truncate font-semibold text-foreground"
+                  {#snippet child({ props })}
+                    <button
+                      type="button"
+                      class="flex items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground"
+                      {...props}
                     >
-                      {workspace?.displayName ?? $messages.services.selectService}
-                    </span>
-                    <ChevronsUpDown class="size-4 shrink-0 opacity-50" />
-                  </button>
+                      <span
+                        class="min-w-0 truncate font-semibold text-foreground"
+                      >
+                        {workspace?.displayName ?? $messages.services.selectService}
+                      </span>
+                      <ChevronsUpDown class="size-4 shrink-0 opacity-50" />
+                    </button>
+                  {/snippet}
                 </Popover.Trigger>
                 <Popover.Content
                   class="w-[min(92vw,28rem)] p-0"
@@ -1311,7 +1314,7 @@
         <CardHeader class="gap-3">
           <div class="flex flex-wrap items-start justify-between gap-3">
             <div>
-              <CardTitle class="section-title"
+              <CardTitle class="section-title" level="2"
                 >{$messages.services.instances.title}</CardTitle
               >
               <div class="text-sm text-muted-foreground">
@@ -1321,7 +1324,7 @@
 
             {#if hasMultipleInstanceNodes}
               <Select type="single" bind:value={selectedInstanceNode as any}>
-                <SelectTrigger class="w-[240px]">
+                <SelectTrigger class="w-[240px]" aria-label={$messages.services.instances.title}>
                   {#if selectedInstanceNode === "__all__"}
                     <span>{$messages.services.allNodes}</span>
                   {:else}
@@ -1420,7 +1423,7 @@
                       <div class="mt-1 text-xs text-muted-foreground">
                         {container.image}
                       </div>
-                      <div class="mt-1 text-[11px] text-muted-foreground/80">
+                      <div class="mt-1 text-xs text-muted-foreground">
                         {container.composeProject}/{container.composeService}
                       </div>
                     </a>
@@ -1444,7 +1447,7 @@
     >
       <Card class="flex min-h-0 min-w-0 flex-col">
         <CardHeader class="section-header border-b">
-          <CardTitle class="section-title"
+          <CardTitle class="section-title" level="2"
             >{$messages.services.files.title}</CardTitle
           >
           <div class="flex flex-wrap items-center gap-2">
@@ -1466,6 +1469,7 @@
                     <Input
                       bind:value={newFilePath}
                       placeholder={$messages.services.files.newFilePathPlaceholder}
+                      aria-label={$messages.common.newFile}
                     />
                   <div class="flex items-center justify-between gap-3">
                     <p class="text-xs text-muted-foreground">
@@ -1501,6 +1505,7 @@
                     <Input
                       bind:value={newFolderPath}
                       placeholder={$messages.services.files.newFolderPathPlaceholder}
+                      aria-label={$messages.common.newFolder}
                     />
                   <div class="flex items-center justify-between gap-3">
                     <p class="text-xs text-muted-foreground">
@@ -1544,7 +1549,7 @@
         {#if showRename}
           <div class="border-b px-4 py-3 text-sm">
             <div class="space-y-3">
-              <Input bind:value={renamePath} placeholder={$messages.services.files.newFilePlaceholder} />
+              <Input bind:value={renamePath} placeholder={$messages.services.files.newFilePlaceholder} aria-label={$messages.common.rename} />
               <div class="flex justify-end">
                 <Button
                   type="button"
@@ -1575,7 +1580,7 @@
       <Card class="flex min-h-0 min-w-0 flex-col">
         <CardHeader class="border-b">
           <div class="section-header">
-            <CardTitle class="section-title"
+            <CardTitle class="section-title" level="2"
               >{$messages.services.files.editor}</CardTitle
             >
             <div class="flex items-center gap-2">
@@ -1633,6 +1638,7 @@
                 <button
                   type="button"
                   class="text-xs text-muted-foreground hover:text-foreground"
+                  aria-label={$messages.common.close}
                   onclick={() => closeTab(tab.path)}>x</button
                 >
               </div>
@@ -1760,7 +1766,7 @@
       >
         <Card class="xl:col-span-2 2xl:col-span-1">
           <CardHeader class="section-header">
-            <CardTitle class="section-title"
+            <CardTitle class="section-title" level="2"
               >{$messages.services.operations.title}</CardTitle
             >
           </CardHeader>
@@ -1771,7 +1777,7 @@
                   {$messages.services.operations.recreate.label}
                 </div>
                 <Select type="single" bind:value={composeRecreateMode as any}>
-                  <SelectTrigger class="w-full">
+                  <SelectTrigger class="w-full" aria-label={$messages.services.operations.recreate.label}>
                     {composeRecreateModeLabel(composeRecreateMode)}
                   </SelectTrigger>
                   <SelectContent>
@@ -1901,7 +1907,7 @@
                       {$messages.services.operations.migrate.title}
                     </div>
                     <Select type="single" bind:value={migrateSourceNode as any}>
-                      <SelectTrigger>
+                      <SelectTrigger aria-label={$messages.services.operations.migrate.selectSource}>
                         <span
                           >{migrateSourceNode ||
                             $messages.services.operations.migrate
@@ -1918,6 +1924,8 @@
                       bind:value={migrateTargetNode}
                       placeholder={$messages.services.operations.migrate
                         .targetNodeId}
+                      aria-label={$messages.services.operations.migrate
+                        .targetNodeId}
                     />
                     <DisabledReasonTooltip reason={migrateReason}>
                       <Button
@@ -1966,6 +1974,7 @@
                 <Input
                   bind:value={renameServiceFolder}
                   placeholder={$messages.services.files.newServiceFolderPlaceholder}
+					aria-label={$messages.services.operations.renameFolder}
                 />
                 <div class="flex justify-end">
                   <Button
@@ -1993,7 +2002,7 @@
         <Card>
           <CardHeader class="section-header">
             <div class="section-heading">
-              <CardTitle class="section-title">
+              <CardTitle class="section-title" level="2">
                 {#if workspace?.serviceName}
                   <a
                     class="hover:text-foreground/80 transition-colors"
@@ -2019,7 +2028,7 @@
 
         <Card>
           <CardHeader>
-            <CardTitle class="section-title">
+            <CardTitle class="section-title" level="2">
               {#if workspace?.serviceName}
                 <a
                   class="hover:text-foreground/80 transition-colors"
diff --git a/web/src/routes/settings/+page.svelte b/web/src/routes/settings/+page.svelte
index c31594d..af64d09 100644
--- a/web/src/routes/settings/+page.svelte
+++ b/web/src/routes/settings/+page.svelte
@@ -146,7 +146,7 @@
         <CardHeader>
           <div class="page-header">
             <div class="page-heading">
-              <CardTitle class="page-title">{$messages.settings.title}</CardTitle>
+              <CardTitle class="page-title" level="1">{$messages.settings.title}</CardTitle>
             </div>
           </div>
 
@@ -158,14 +158,14 @@
           {/if}
         </CardHeader>
         <CardContent>
-          <CardTitle class="section-title">{$messages.settings.appearance.title}</CardTitle>
+          <CardTitle class="section-title" level="2">{$messages.settings.appearance.title}</CardTitle>
           <ThemeControls />
         </CardContent>
       </Card>
 
       <Card>
         <CardHeader>
-          <CardTitle class="section-title"
+          <CardTitle class="section-title" level="2"
             >{$messages.settings.controller.title}</CardTitle
           >
         </CardHeader>
@@ -216,7 +216,7 @@
       <Card class="lg:col-span-2">
         <CardHeader class="section-header">
           <div class="section-heading">
-            <CardTitle class="section-title"
+            <CardTitle class="section-title" level="2"
               >{$messages.settings.repoSync.title}</CardTitle
             >
           </div>
@@ -306,7 +306,7 @@
         <Card class="lg:col-span-2">
           <CardHeader class="section-header">
             <div class="section-heading">
-              <CardTitle class="section-title"
+              <CardTitle class="section-title" level="2"
                 >{$messages.settings.rustic.title}</CardTitle
               >
             </div>
diff --git a/web/src/routes/tasks/+page.svelte b/web/src/routes/tasks/+page.svelte
index 002b1c1..cf332fb 100644
--- a/web/src/routes/tasks/+page.svelte
+++ b/web/src/routes/tasks/+page.svelte
@@ -382,7 +382,7 @@
     <CardHeader>
       <div class="page-header">
         <div class="page-heading">
-          <CardTitle class="page-title">{$messages.tasks.taskHistory}</CardTitle>
+          <CardTitle class="page-title" level="1">{$messages.tasks.taskHistory}</CardTitle>
         </div>
         <div class="flex items-center gap-2">
           <Popover.Root bind:open={filterOpen}>
diff --git a/web/src/routes/tasks/[id]/+page.svelte b/web/src/routes/tasks/[id]/+page.svelte
index 3f78b7e..241c1de 100644
--- a/web/src/routes/tasks/[id]/+page.svelte
+++ b/web/src/routes/tasks/[id]/+page.svelte
@@ -235,7 +235,7 @@
         {#if data.task}
           <div class="page-header">
             <div class="page-heading">
-              <CardTitle class="page-title">{taskTypeLabel(data.task.type, $messages)}</CardTitle>
+              <CardTitle class="page-title" level="1">{taskTypeLabel(data.task.type, $messages)}</CardTitle>
               <div class="page-meta">
                 {data.task.taskId} · {data.task.serviceName || `${$messages.tasks.nodeLevel}: ${data.task.nodeId || $messages.common.na}`}
               </div>
@@ -329,7 +329,7 @@
 
 		<Card>
       <CardHeader>
-        <CardTitle class="section-title">{$messages.tasks.taskSteps}</CardTitle>
+        <CardTitle class="section-title" level="2">{$messages.tasks.taskSteps}</CardTitle>
       </CardHeader>
       <CardContent>
         <div class="space-y-3">
@@ -353,7 +353,7 @@
 
 		<Card>
       <CardHeader class="section-header">
-        <CardTitle class="section-title">{$messages.tasks.taskLogs}</CardTitle>
+        <CardTitle class="section-title" level="2">{$messages.tasks.taskLogs}</CardTitle>
         <div class="metric-label">{logStateLabel(logState)}</div>
       </CardHeader>
       <CardContent class="space-y-4">
-- 
2.54.0