diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..2fa4ada
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-24 - Missing skip-link and focus states
+**Learning:** Found that the Astro frontend lacks a "Skip to main content" link for screen reader users and explicit `focus-visible` indicators for keyboard navigation.
+**Action:** Always verify if a skip link is present on layout templates and ensure focus indicators are clearly visible across interactive elements.
diff --git a/site/src/layouts/Base.astro b/site/src/layouts/Base.astro
index cc04dfb..c93ba45 100644
--- a/site/src/layouts/Base.astro
+++ b/site/src/layouts/Base.astro
@@ -29,6 +29,7 @@ const base = import.meta.env.BASE_URL;
+ Skip to main content
-
+
diff --git a/site/src/styles/global.css b/site/src/styles/global.css
index 6025f9d..0c7841b 100644
--- a/site/src/styles/global.css
+++ b/site/src/styles/global.css
@@ -251,6 +251,30 @@ footer.site-footer {
color: var(--muted);
}
+.skip-link {
+ position: absolute;
+ top: -40px;
+ left: 0;
+ background: var(--accent);
+ color: var(--paper);
+ padding: 8px;
+ z-index: 100;
+}
+
+.skip-link:focus {
+ top: 0;
+}
+
+main:focus {
+ outline: none;
+}
+
+a:focus-visible,
+button:focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: 2px;
+}
+
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;