From 64917a423b6a0185451ccbc36723738de8965773 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sat, 22 Aug 2026 02:38:49 +0000 Subject: [PATCH] Improve accessibility of background removal radio buttons 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..022d5a9 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. + +## 2025-02-12 - Radio Button Groups Semantics +**Learning:** Radio buttons grouped within generic `
` wrappers often lack structural context, causing screen readers to announce the options without their associated group question or label. +**Action:** Always replace generic `
` wrappers around radio button groups with semantic `
` tags, and replace the group's label with a ``. Use inline reset styles (`border: none; padding: 0; margin: 0;`) to prevent the browser's default fieldset rendering from breaking the visual design system. diff --git a/web_app/templates/index.html b/web_app/templates/index.html index 7b2abb2..321fb31 100644 --- a/web_app/templates/index.html +++ b/web_app/templates/index.html @@ -121,8 +121,8 @@

Processing Options

-
- +
+ Background Removal Method
-
+