perf: optimizing website accessibility

src/components/astro/footer.astro

@@ -23,7 +23,7 @@ const currentYear = new Date().getFullYear()
         <p>{item.text}</p>
         <a
           href={item.link}
-          class="text-blue-500 transition-colors duration-200 hover:text-blue-700"
+          class="text-blue-600 transition-colors duration-200 hover:text-blue-800"
           data-umami-event={`footer-${item.label}`}
         >
           {item.label}

src/components/astro/header.astro

@@ -10,14 +10,24 @@ const config = lang === "zh" ? zh : en
 ---
 
 <header class="flex h-24 w-full items-center justify-between">
-  <a href="/" data-umami-event="site-name">
+  <a
+    href="/"
+    data-umami-event="site-name"
+    aria-label={`${config.siteName} - 首页`}
+  >
     <div class="text-2xl font-semibold">{config.siteName}</div>
   </a>
 
   <div class="flex items-center gap-6">
     {
       config.rss && (
-        <a href="/atom.xml" target="_blank" data-umami-event="rss">
+        <a
+          href="/atom.xml"
+          target="_blank"
+          data-umami-event="rss"
+          aria-label="RSS"
+          title="RSS"
+        >
           <Rss />
         </a>
       )
@@ -29,6 +39,8 @@ const config = lang === "zh" ? zh : en
           target="_blank"
           class="hidden md:block"
           data-umami-event={social.label}
+          aria-label={social.label}
+          title={social.label}
         >
           <social.icon />
         </a>

src/components/astro/nav.astro

@@ -18,6 +18,8 @@ const { home, archive, custom, links, about } =
         href={`/${lang}`}
         class="hover:underline hover:underline-offset-4"
         data-umami-event="nav-home"
+        aria-label={t("nav.home")}
+        title={t("nav.home")}
       >
         <p>{t("nav.home")}</p>
       </a>
@@ -29,6 +31,8 @@ const { home, archive, custom, links, about } =
         href={`/${lang}/archive`}
         class="hover:underline hover:underline-offset-4"
         data-umami-event="nav-archive"
+        aria-label={t("nav.archive")}
+        title={t("nav.archive")}
       >
         <p>{t("nav.archive")}</p>
       </a>
@@ -41,6 +45,8 @@ const { home, archive, custom, links, about } =
         class="hover:underline hover:underline-offset-4"
         target="_blank"
         data-umami-event={`nav-${tab.label}`}
+        aria-label={tab.label}
+        title={tab.label}
       >
         <p>{tab.label}</p>
       </a>
@@ -52,6 +58,8 @@ const { home, archive, custom, links, about } =
         href={`/${lang}/links`}
         class="hover:underline hover:underline-offset-4"
         data-umami-event="nav-links"
+        aria-label={t("nav.links")}
+        title={t("nav.links")}
       >
         <p>{t("nav.links")}</p>
       </a>
@@ -63,6 +71,8 @@ const { home, archive, custom, links, about } =
         href={`/${lang}/about`}
         class="hover:underline hover:underline-offset-4"
         data-umami-event="nav-about"
+        aria-label={t("nav.about")}
+        title={t("nav.about")}
       >
         <p>{t("nav.about")}</p>
       </a>

src/components/react/theme-toggle.tsx

@@ -23,7 +23,12 @@ export function ThemeToggle() {
   }
 
   return (
-    <button onClick={handleToggleClick} data-umami-event="theme-toggle">
+    <button
+      onClick={handleToggleClick}
+      data-umami-event="theme-toggle"
+      aria-label="Toggle theme"
+      title="Toggle theme"
+    >
       <Sun className="dark:hidden" />
       <Moon className="hidden dark:block" />
     </button>