diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 000000000..5c600ad10
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-22 - [Hiding visual characters from screen readers]
+**Learning:** Icon-only buttons or buttons using characters like `×` or `×` as icons can be confusing for screen reader users if not properly labeled. The character itself might be announced as "multiplication sign" or similar.
+**Action:** Always provide an explicit `aria-label` for such buttons and wrap the visual character in a `<span>` with `aria-hidden="true"`.
diff --git a/apps/app/src/components/ConversationsSidebar.tsx b/apps/app/src/components/ConversationsSidebar.tsx
index 75d768bee..6752879fe 100644
--- a/apps/app/src/components/ConversationsSidebar.tsx
+++ b/apps/app/src/components/ConversationsSidebar.tsx
@@ -119,7 +119,7 @@ export function ConversationsSidebar({
             onClick={onClose}
             aria-label="Close chats panel"
           >
-            &times;
+            <span aria-hidden="true">&times;</span>
           </button>
         </div>
       )}
@@ -199,6 +199,7 @@ export function ConversationsSidebar({
                           className="px-1.5 py-0.5 text-[10px] border border-danger bg-danger text-white cursor-pointer hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed"
                           onClick={() => void handleConfirmDelete(conv.id)}
                           disabled={deletingId === conv.id}
+                          aria-label="Confirm delete"
                         >
                           {deletingId === conv.id ? "..." : "Yes"}
                         </button>
@@ -207,6 +208,7 @@ export function ConversationsSidebar({
                           className="px-1.5 py-0.5 text-[10px] border border-border bg-card text-muted cursor-pointer hover:border-accent hover:text-accent disabled:opacity-50 disabled:cursor-not-allowed"
                           onClick={() => setConfirmDeleteId(null)}
                           disabled={deletingId === conv.id}
+                          aria-label="Cancel delete"
                         >
                           No
                         </button>
@@ -221,8 +223,9 @@ export function ConversationsSidebar({
                           setConfirmDeleteId(conv.id);
                         }}
                         title="Delete conversation"
+                        aria-label="Delete conversation"
                       >
-                        ×
+                        <span aria-hidden="true">×</span>
                       </button>
                     )}
                   </>