signup steps: the region's aria-label duplicates its visible heading #121

Nytt ärende

Stängd

öppnade 2026-07-31 18:46:01 +00:00 av supernaut · 1 kommentar

supernaut kommenterad

2026-07-31 18:46:01 +00:00

Ägare

The step list names itself twice to assistive technology.

src/components/signup-steps.astro:

<section aria-label={t("signup.steps.title")} class="journey">
  <p class="hint">{t("signup.steps.title")}</p>

The same string is both the region's accessible name and its first visible child, so a screen reader announces "This takes four steps" as the region name and then reads it again as content.

Fix

Point the region at the paragraph instead of duplicating the string:

<section aria-labelledby="journey-title" class="journey">
  <p class="hint" id="journey-title">{t("signup.steps.title")}</p>

That keeps the accessible name, removes the repetition, and means the name cannot drift from the visible text.

Alternatively drop aria-label entirely — the <ol> already conveys the sequence, and the visible paragraph is read in order anyway. aria-labelledby is preferable because it keeps the region navigable by name.

Done when

The step list's title is announced once.

The step list names itself twice to assistive technology. `src/components/signup-steps.astro`: ```astro <section aria-label={t("signup.steps.title")} class="journey"> <p class="hint">{t("signup.steps.title")}</p> ``` The same string is both the region's accessible name and its first visible child, so a screen reader announces "This takes four steps" as the region name and then reads it again as content. ## Fix Point the region at the paragraph instead of duplicating the string: ```astro <section aria-labelledby="journey-title" class="journey"> <p class="hint" id="journey-title">{t("signup.steps.title")}</p> ``` That keeps the accessible name, removes the repetition, and means the name cannot drift from the visible text. Alternatively drop `aria-label` entirely — the `<ol>` already conveys the sequence, and the visible paragraph is read in order anyway. `aria-labelledby` is preferable because it keeps the region navigable by name. ## Done when The step list's title is announced once.

supernaut lade till etiketterna

area/web

ready-for-implementation

type

bug

2026-07-31 18:46:44 +00:00

supernaut lade till detta till projektet Bitborg Web

2026-07-31 18:46:46 +00:00

supernaut refererade till detta ärende från en incheckning

2026-07-31 18:55:42 +00:00

fix(signup): journey follow-ups — heading, announcement, sitemap, sign-in note

supernaut refererade till detta ärende

2026-07-31 18:55:43 +00:00

fix(signup): journey follow-ups — heading, announcement, sitemap, sign-in note, journey() seam #125

supernaut refererade till detta ärende från en incheckning

2026-07-31 19:14:57 +00:00

fix(signup): journey follow-ups — heading, announcement, sitemap, sign-in note, journey() seam (#125)

supernaut kommenterad

2026-08-01 14:17:06 +00:00

Upphovsperson

Ägare

Already done — shipped by 8439fa4 (PR #125); its close keywords never fired.

Verified at `src/components/signup-steps.astro:35-36`: the region now uses
`aria-labelledby="journey-title"` pointing at the visible paragraph, so the accessible name is the
on-screen text rather than a duplicate of it.

Closing as already implemented.

Already done — shipped by 8439fa4 (PR #125); its close keywords never fired. Verified at \`src/components/signup-steps.astro:35-36\`: the region now uses \`aria-labelledby="journey-title"\` pointing at the visible paragraph, so the accessible name is the on-screen text rather than a duplicate of it. Closing as already implemented.

supernaut stängde ärendet

2026-08-01 14:17:06 +00:00

supernaut refererade till detta ärende

2026-08-01 14:18:04 +00:00

fix(content): lead with the trial, brand the 404 page #136

supernaut refererade till detta ärende från en incheckning

2026-08-03 09:41:50 +00:00

fix(signup): journey follow-ups — heading, announcement, sitemap, sign-in note, journey() seam (#125)

Logga in för att delta i denna konversation.