diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..c03cd3ba
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-02-23 - Custom Toggle Buttons
+**Learning:** Custom UI controls like custom toggle buttons constructed from generic `<button>` elements often lack native semantics. Without `role="switch"` and `aria-checked`, screen readers will just announce them as generic buttons, making their state unclear. Furthermore, if they rely on custom styling, native focus outlines are often removed or masked, leaving keyboard users lost.
+**Action:** Always add `role="switch"` and `aria-checked={boolean}` to custom toggle buttons. Additionally, implement explicit focus indicators using `focus-visible` Tailwind utilities (e.g., `focus-visible:ring-2 focus-visible:ring-[#6C63FF] focus-visible:ring-offset-2`) to guarantee keyboard navigation accessibility.
diff --git a/src/components/settings/UserPreferencesModal.tsx b/src/components/settings/UserPreferencesModal.tsx
index b19d09cd..415feed3 100644
--- a/src/components/settings/UserPreferencesModal.tsx
+++ b/src/components/settings/UserPreferencesModal.tsx
@@ -202,6 +202,7 @@ export default function UserPreferencesModal({
                 <button
                   onClick={onClose}
                   className="rounded-lg p-2 text-[#9CA3AF] hover:bg-[#F3F4F6] hover:text-[#111827] transition-colors"
+                  aria-label="Close preferences"
                 >
                   <X className="size-5" />
                 </button>
@@ -697,9 +698,12 @@ function ToggleRow({ label, description, checked, onChange, icon: Icon }: Toggle
       <button
         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]'
         )}
+        role="switch"
+        aria-checked={checked}
+        aria-label={label}
       >
         <span
           className={cn(