diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..1701d74
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-06-12 - [Accessible Collapsible Stats]
+**Learning:** Using aria-expanded, aria-controls, and an ID linking the toggle to its content is a required pattern for accessible disclosures. Hiding decorative text toggles (like ▸) with aria-hidden prevents unnecessary screen reader noise.
+**Action:** Always semantically link custom collapsible UI sections with aria-controls/aria-expanded and hide visual-only decorative elements from screen readers.
diff --git a/packages/web/src/components/dashboard/overview-stats.tsx b/packages/web/src/components/dashboard/overview-stats.tsx
index cce93b6..bac8ed3 100644
--- a/packages/web/src/components/dashboard/overview-stats.tsx
+++ b/packages/web/src/components/dashboard/overview-stats.tsx
@@ -86,14 +86,16 @@ 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={cn('inline-block transition-transform', expanded && 'rotate-90')} aria-hidden="true">▸</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">
+        <div id="overview-stats-explanation" 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>