diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000000..f8a0fe8bed
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-07-06 - Improve accessibility for icon-only Material Symbol buttons
+**Learning:** Screen readers will frustratingly read aloud raw ligature text (like 'vertical_align_top') when Material Symbols are used in icon-only buttons without proper ARIA attributes, causing user confusion.
+**Action:** Always add an `aria-label` to the parent `<button>` and explicitly set `aria-hidden="true"` on the inner `<span>` when using ligature-based icons for icon-only interactive elements.
diff --git a/webui/index.html b/webui/index.html
index 95973c79e0..d4697aee74 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -104,17 +104,17 @@
 
               <!-- Chat Navigation Buttons (floating over chat area) -->
               <div id="chat-nav-buttons" aria-label="Chat navigation" x-cloak>
-                <button class="btn-icon-action" title="Scroll to top" @click="$store.chatNavigation.scrollToTop()">
-                  <span class="material-symbols-outlined">vertical_align_top</span>
+                <button class="btn-icon-action" title="Scroll to top" aria-label="Scroll to top" @click="$store.chatNavigation.scrollToTop()">
+                  <span class="material-symbols-outlined" aria-hidden="true">vertical_align_top</span>
                 </button>
-                <button class="btn-icon-action" title="Previous user message" @click="$store.chatNavigation.scrollToPrevUserMessage()">
-                  <span class="material-symbols-outlined">keyboard_arrow_up</span>
+                <button class="btn-icon-action" title="Previous user message" aria-label="Previous user message" @click="$store.chatNavigation.scrollToPrevUserMessage()">
+                  <span class="material-symbols-outlined" aria-hidden="true">keyboard_arrow_up</span>
                 </button>
-                <button class="btn-icon-action" title="Next user message" @click="$store.chatNavigation.scrollToNextUserMessage()">
-                  <span class="material-symbols-outlined">keyboard_arrow_down</span>
+                <button class="btn-icon-action" title="Next user message" aria-label="Next user message" @click="$store.chatNavigation.scrollToNextUserMessage()">
+                  <span class="material-symbols-outlined" aria-hidden="true">keyboard_arrow_down</span>
                 </button>
-                <button class="btn-icon-action" title="Scroll to bottom" @click="$store.chatNavigation.scrollToBottom()">
-                  <span class="material-symbols-outlined">vertical_align_bottom</span>
+                <button class="btn-icon-action" title="Scroll to bottom" aria-label="Scroll to bottom" @click="$store.chatNavigation.scrollToBottom()">
+                  <span class="material-symbols-outlined" aria-hidden="true">vertical_align_bottom</span>
                 </button>
               </div>
             </div>