diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..8d73a687
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,4 @@
+## 2026-07-12 - Toggle Switch Accessibility
+
+**Learning:** Custom UI toggle buttons without proper `role` or `aria-checked` attributes leave screen reader users completely unaware of the component's state or purpose. Adding `role="switch"` and standardizing keyboard focus (via `focus-visible`) makes these ubiquitous micro-interactions accessible.
+**Action:** When implementing custom toggle inputs that deviate from standard checkboxes, explicitly define `role="switch"`, bind `aria-checked` to the state boolean, and add `type="button"` to prevent accidental form submission.
diff --git a/src/components/settings/UserPreferencesModal.tsx b/src/components/settings/UserPreferencesModal.tsx
index 15504ff5..69312514 100644
--- a/src/components/settings/UserPreferencesModal.tsx
+++ b/src/components/settings/UserPreferencesModal.tsx
@@ -678,9 +678,13 @@ function ToggleRow({ label, description, checked, onChange, icon: Icon }: Toggle
         </div>
       </div>
       <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        aria-label={label}
         onClick={() => onChange(!checked)}
         className={cn(
-          'relative h-6 w-11 rounded-full transition-colors',
+          'relative h-6 w-11 rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#6C63FF] focus-visible:ring-offset-2',
           checked ? 'bg-[#6C63FF]' : 'bg-[#D1D5DB]'
         )}
       >