diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..74978aa
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-29 - [Expandable sections need ARIA attributes]
+**Learning:** Found an accordion/expandable pattern in `overview-stats.tsx` that lacked `aria-expanded` and `aria-controls`. The content block was also missing an `id` tying back to `aria-controls`.
+**Action:** Applied standard disclosure pattern by providing `aria-expanded` to the toggler button, assigning an `id` to the toggled content, and adding `aria-controls="<id>"` to link them.
diff --git a/packages/web/src/components/dashboard/overview-stats.tsx b/packages/web/src/components/dashboard/overview-stats.tsx
index cce93b6..c0d8aa4 100644
--- a/packages/web/src/components/dashboard/overview-stats.tsx
+++ b/packages/web/src/components/dashboard/overview-stats.tsx
@@ -86,35 +86,39 @@ export function OverviewStats({
         type="button"
         onClick={() => setExpanded(v => !v)}
         className="mt-4 flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        aria-expanded={expanded}
+        aria-controls="overview-stats-explanation"
       >
         <span className={cn('inline-block transition-transform', expanded && 'rotate-90')}>▸</span>
         <span className="font-medium text-foreground">What do these numbers mean?</span>
         <span>— {expanded ? 'click to collapse' : 'click to expand'}</span>
       </button>
 
-      {expanded && (
-        <div className="mt-3 text-xs text-muted-foreground space-y-2 leading-relaxed">
-          <p>
-            <span className="font-medium text-foreground">Sessions</span> — 팀원들이 시작한 Claude Code 세션 수.
-          </p>
-          <p>
-            <span className="font-medium text-foreground">Turns</span> — Human → Assistant 한 번의 왕복(Stop 이벤트 기준).
-          </p>
-          <p>
-            <span className="font-medium text-foreground">Input / Output</span> — Claude에 보낸 토큰과 Claude가 응답으로 쓴 토큰의 합계.
-          </p>
-          <p>
-            <span className="font-medium text-foreground">Cache Create</span> — 재사용을 위해 저장된 토큰(예: CLAUDE.md).
-            한 번 지불하면 이후 읽기는 훨씬 저렴해집니다.
-          </p>
-          <p>
-            <span className="font-medium text-foreground">Cache Read</span> — 캐시에서 재사용된 토큰. 일반 input 대비 약 ~10× 싸므로 이 숫자가 높은 건 좋은 신호입니다.
-          </p>
-          <p>
-            <span className="font-medium text-foreground">Est. Cost</span> — 모델별 공식 단가로 계산한 추정 청구액 (USD).
-          </p>
-        </div>
-      )}
+      <div
+        id="overview-stats-explanation"
+        hidden={!expanded}
+        className="mt-3 text-xs text-muted-foreground space-y-2 leading-relaxed"
+      >
+        <p>
+          <span className="font-medium text-foreground">Sessions</span> — 팀원들이 시작한 Claude Code 세션 수.
+        </p>
+        <p>
+          <span className="font-medium text-foreground">Turns</span> — Human → Assistant 한 번의 왕복(Stop 이벤트 기준).
+        </p>
+        <p>
+          <span className="font-medium text-foreground">Input / Output</span> — Claude에 보낸 토큰과 Claude가 응답으로 쓴 토큰의 합계.
+        </p>
+        <p>
+          <span className="font-medium text-foreground">Cache Create</span> — 재사용을 위해 저장된 토큰(예: CLAUDE.md).
+          한 번 지불하면 이후 읽기는 훨씬 저렴해집니다.
+        </p>
+        <p>
+          <span className="font-medium text-foreground">Cache Read</span> — 캐시에서 재사용된 토큰. 일반 input 대비 약 ~10× 싸므로 이 숫자가 높은 건 좋은 신호입니다.
+        </p>
+        <p>
+          <span className="font-medium text-foreground">Est. Cost</span> — 모델별 공식 단가로 계산한 추정 청구액 (USD).
+        </p>
+      </div>
     </div>
   )
 }