feat: improve accessibility of site landmarks

google-labs-jules[bot] · google-labs-jules[bot] · commit 2074f33a5106 · 2026-01-11T12:28:35.000Z
diff --git a/.Jules/palette.md b/.Jules/palette.md
@@ -0,0 +1,9 @@
+# Palette's Journal
+
+## 2024-05-22 - Accessibility in Code Blocks
+**Learning:** Code blocks often lack proper labeling for screen readers, making them just "blocks of text".
+**Action:** Ensure code blocks or their containers have `aria-label` or `title` attributes where appropriate, or use `role="region"` with a label if they are scrollable.
+
+## 2024-05-22 - Contrast in Documentation
+**Learning:** Documentation often uses subtle colors for syntax highlighting which might fail contrast checks.
+**Action:** Regularly check contrast ratios for syntax highlighting themes.
diff --git a/docs/src/components/Header/Header.astro b/docs/src/components/Header/Header.astro
@@ -7,7 +7,7 @@ import ThemeToggleButton from "./ThemeToggleButton";
 
 <header>
   <SkipToContent />
-  <nav class="nav-wrapper" title="Top Navigation">
+  <nav class="nav-wrapper" aria-label="Top Navigation">
     <div class="menu-toggle">
       <SidebarToggle client:idle />
     </div>
diff --git a/docs/src/layouts/MainLayout.astro b/docs/src/layouts/MainLayout.astro
@@ -118,7 +118,7 @@ const currentPage = Astro.url.pathname;
   <body>
     <Header />
     <main class="layout">
-      <aside id="grid-left" class="grid-sidebar" title="Site Navigation">
+      <aside id="grid-left" class="grid-sidebar" aria-label="Site Navigation">
         <LeftSidebar currentPage={currentPage} />
       </aside>
       <div id="grid-main">
