diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..d0a8ebc
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-09-08 - Accessible Scrollable Regions and Focus States
+**Learning:** Scrollable overflow containers (like tables) require explicit keyboard support (`tabindex="0"`, `role="region"`, `aria-label`) to be accessible. Relying solely on brightness changes for focus states is insufficient for WCAG contrast guidelines.
+**Action:** Always add proper ARIA labeling and tabindex to scrollable regions, and use distinct `outline` with `outline-offset` for interactive elements' focus states.
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index 2402ac3..2da5995 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -25,7 +25,7 @@ const description =
 
   <h2>What is measured</h2>
 
-  <div class="scroller">
+  <div class="scroller" tabindex="0" role="region" aria-label="Performance measurements">
     <table>
       <thead>
         <tr><th>Setting</th><th>Result</th></tr>
diff --git a/site/src/styles/global.css b/site/src/styles/global.css
index 6025f9d..df649bf 100644
--- a/site/src/styles/global.css
+++ b/site/src/styles/global.css
@@ -103,6 +103,11 @@ body {
   color: var(--accent);
 }
 
+.nav a:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 .theme-toggle {
   font: inherit;
   font-size: 0.82rem;
@@ -119,6 +124,11 @@ body {
   border-color: var(--accent);
 }
 
+.theme-toggle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 main {
   padding: 2.6rem 0 4rem;
 }
@@ -198,11 +208,15 @@ li {
   border: 1px solid var(--rule);
 }
 
-.btn:hover,
-.btn:focus-visible {
+.btn:hover {
   filter: brightness(1.08);
 }
 
+.btn:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 .scroller {
   overflow-x: auto;
   border: 1px solid var(--rule);
@@ -211,6 +225,11 @@ li {
   margin: 0 0 1.1rem;
 }
 
+.scroller:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
 table {
   border-collapse: collapse;
   width: 100%;