From 377e113529097da0f2ed674da48ef2396735a4de Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 24 Aug 2026 02:52:48 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20fieldset=20and?=
 =?UTF-8?q?=20legend=20to=20radio=20button=20group?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: Replaced a generic `div` and `label` with a semantic `<fieldset>` and `<legend>` for the background removal method radio buttons.
🎯 Why: Improves context for screen reader users by properly grouping radio buttons so they know what the options relate to.
📸 Before/After: Visuals remain unchanged due to inline CSS `border: none; padding: 0; margin: 0;`.
♿ Accessibility: Added structural context for screen readers navigating the radio group.

Co-authored-by: benpiper <4343814+benpiper@users.noreply.github.com>
---
 .Jules/palette.md            | 4 ++++
 web_app/templates/index.html | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/.Jules/palette.md b/.Jules/palette.md
index 07928e1..3c72d30 100644
--- a/.Jules/palette.md
+++ b/.Jules/palette.md
@@ -5,3 +5,7 @@
 ## 2025-05-18 - Dynamic UI State Context Loss
 **Learning:** Dynamic DOM section swaps (like hiding a progress bar and showing a completion section) cause loss of context and leave keyboard/screen reader users stranded without an anchor point.
 **Action:** When dynamically swapping major UI sections, explicitly move focus to a newly revealed heading by adding `tabindex="-1"` and calling `.focus()`. Furthermore, use native ARIA roles (e.g. `role="progressbar"`) and `aria-live="polite"` to ensure progress transitions are accessible.
+
+## 2026-08-24 - Fieldsets for Radio Button Groups
+**Learning:** Generic `div` elements and orphaned `label` tags used to group radio buttons fail to provide structural context to screen readers, meaning users hear options without knowing what they belong to.
+**Action:** When creating radio button groups, always use a `<fieldset>` to group them and a `<legend>` to describe the group. Use inline styles like `border: none; padding: 0; margin: 0;` to maintain visual consistency without adding borders.
diff --git a/web_app/templates/index.html b/web_app/templates/index.html
index 7b2abb2..4782591 100644
--- a/web_app/templates/index.html
+++ b/web_app/templates/index.html
@@ -121,8 +121,8 @@ <h2>Processing Options</h2>
                         </select>
                         
                         <!-- Background Removal Mode -->
-                        <div style="margin-top: 1rem;">
-                            <label>Background Removal Method</label>
+                        <fieldset style="border: none; padding: 0; margin: 0; margin-top: 1rem;">
+                            <legend style="padding: 0; font-weight: 600; margin-bottom: 0.5rem; color: var(--text);">Background Removal Method</legend>
                             <div style="margin-top: 0.5rem;">
                                 <label style="display: block; margin-bottom: 0.5rem;">
                                     <input type="radio" name="bg-method" value="rvm" checked>
@@ -133,7 +133,7 @@ <h2>Processing Options</h2>
                                     Person Segmentation (better for occlusions)
                                 </label>
                             </div>
-                        </div>
+                        </fieldset>
                         
                         <!-- Morphological Cleanup (RVM only) -->
                         <div id="morph-cleanup-section" style="margin-top: 1rem;">