fix(a11y): the announcement banner is an unnamed navigation landmark #168

Nytt ärende

Stängd

öppnade 2026-08-02 15:48:03 +00:00 av supernaut · 0 kommentarer

supernaut kommenterad

2026-08-02 15:48:03 +00:00

Ägare

Found while giving the other navigation landmarks distinct names in #157, which did not cover this
one.

src/components/banner.astro:52 renders

<nav class:list={["banner", className]} {...rest}>

with no aria-label and no aria-labelledby. A <nav> is a landmark, so a screen reader's
landmark list gains an entry called simply "navigation", with nothing to say what it is or
distinguish it from the others on the page. That is the same defect class #157 fixed for
nav.app.label / nav.service.label, and src/pages/404.astro:32-34 already documents the rule
this breaks.

It is arguably a second defect that the element is a landmark at all: the banner is a time-boxed
announcement wrapping a single promotional link, which is not a navigation region in any useful
sense. Landmarks are a table of contents for the page, and one-link promos do not belong in it.

Two ways to fix it

Name it. Add an aria-label from a new i18n key in both dictionaries — something like
"Announcement" / "Meddelande". Smallest change, consistent with #157, keeps the landmark.
Stop it being a landmark. Render a <div> (or <aside> if it should be an announcement
region) instead of <nav>. Removes the entry from the landmark list entirely, which is
probably the more honest markup.

Option 1 is what #157 did for its siblings, so it is the consistent choice; option 2 is the better
markup. Either closes this.

Done when

No landmark on any page is exposed with a generic or empty accessible name.
Whatever is chosen, the landmark set is checked in both languages, the same way #157 verified it.
pnpm lang-check passes if a string is added.

Found while giving the other navigation landmarks distinct names in #157, which did not cover this one. `src/components/banner.astro:52` renders ```astro <nav class:list={["banner", className]} {...rest}> ``` with no `aria-label` and no `aria-labelledby`. A `<nav>` is a landmark, so a screen reader's landmark list gains an entry called simply "navigation", with nothing to say what it is or distinguish it from the others on the page. That is the same defect class #157 fixed for `nav.app.label` / `nav.service.label`, and `src/pages/404.astro:32-34` already documents the rule this breaks. It is arguably a second defect that the element is a landmark at all: the banner is a time-boxed announcement wrapping a single promotional link, which is not a navigation region in any useful sense. Landmarks are a table of contents for the page, and one-link promos do not belong in it. ## Two ways to fix it 1. **Name it.** Add an `aria-label` from a new i18n key in both dictionaries — something like "Announcement" / "Meddelande". Smallest change, consistent with #157, keeps the landmark. 2. **Stop it being a landmark.** Render a `<div>` (or `<aside>` if it should be an announcement region) instead of `<nav>`. Removes the entry from the landmark list entirely, which is probably the more honest markup. Option 1 is what #157 did for its siblings, so it is the consistent choice; option 2 is the better markup. Either closes this. ## Done when - No landmark on any page is exposed with a generic or empty accessible name. - Whatever is chosen, the landmark set is checked in both languages, the same way #157 verified it. - `pnpm lang-check` passes if a string is added.

supernaut lade till etiketterna

area/web

ready-for-implementation

type

bug

2026-08-02 15:48:12 +00:00

supernaut lade till detta till projektet Bitborg Web

2026-08-02 15:48:12 +00:00

supernaut refererade till detta ärende från en incheckning

2026-08-02 15:50:40 +00:00

fix(a11y): stop the announcement banner being an unnamed landmark

supernaut hänvisade till detta ärende från en ändringsförfrågan som kommer att stänga det