feat: add meta description

src/app/ui/Layout.svelte

@@ -73,6 +73,10 @@ onDestroy(() => themeManager.destroy());
         />
     </noscript>
     <title>GlyphDiff | Typography & Typefaces</title>
+    <meta
+        name="description"
+        content="Compare typefaces side by side. Adjust size, weight, leading, and tracking to find the perfect typographic pairing."
+    />
 </svelte:head>
 
 <ResponsiveProvider>

src/routes/Page.svelte

@@ -12,7 +12,7 @@ import { fade } from 'svelte/transition';
     class="h-full flex flex-col gap-3 sm:gap-4"
     in:fade={{ duration: 500, delay: 150, easing: cubicIn }}
 >
-    <section class="w-auto">
+    <main class="w-auto">
         <ComparisonView />
-    </section>
+    </main>
 </div>

src/shared/ui/ComboControl/ComboControl.svelte

@@ -128,7 +128,7 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
                                     ? 'bg-paper dark:bg-dark-card shadow-sm border-subtle'
                                     : 'hover:bg-paper/50 dark:hover:bg-dark-card/50',
                             )}
-                            aria-label={controlLabel}
+                            aria-label={controlLabel ? `${controlLabel}: ${formattedValue()}` : undefined}
                         >
                             <!-- Label row -->
                             {#if displayLabel}

src/widgets/ComparisonView/ui/FontList/FontList.svelte

@@ -91,7 +91,7 @@ $effect(() => {
                     variant="tertiary"
                     {active}
                     onclick={() => handleSelect(font, index)}
-                    class="w-full px-3 md:px-4 py-2.5 md:py-3 justify-between text-left text-sm flex"
+                    class="w-full px-3 md:px-4 py-2.5 md:py-3 flex !justify-between text-left text-sm"
                     iconPosition="right"
                 >
                     <FontApplicator {font}>{font.name}</FontApplicator>

src/widgets/ComparisonView/ui/Header/Header.svelte

@@ -86,6 +86,7 @@ const fontBName = $derived(comparisonStore.fontB?.name ?? '');
             variant="underline"
             size="lg"
             placeholder="The quick brown fox..."
+            aria-label="Preview text"
             fullWidth
         />
     </div>

src/widgets/ComparisonView/ui/Search/Search.svelte

@@ -13,6 +13,7 @@ import { SearchBar } from '$shared/ui';
         id="font-search"
         class="w-full"
         placeholder="Typeface Search"
+        aria-label="Search typefaces"
         bind:value={filterManager.queryValue}
         fullWidth
     />

src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte

@@ -65,6 +65,7 @@ function toggleFilters() {
             id="font-search"
             class="w-full"
             placeholder="Typeface Search"
+            aria-label="Search typefaces"
             bind:value={filterManager.queryValue}
             fullWidth
         />