Inbox, Leeslijst and Instellingen have no h1 #230

New issue

Closed

opened 2026-08-05 20:44:35 +00:00 by robbertbos · 0 comments

robbertbos commented

2026-08-05 20:44:35 +00:00

Owner

An axe scan across all nine routes (added in #224 as tests/e2e/landmarks.spec.ts) reports page-has-heading-one on three routes:

AXE /:              moderate/page-has-heading-one x1
AXE /leeslijst:     moderate/page-has-heading-one x1
AXE /instellingen:  moderate/page-has-heading-one x1
AXE /concept-berichten, /uitgaande-post, /notities, /voorwaarden, /inloggen, /account-verwijderd: clean

The clean ones get theirs from OverzichtShell.vue:26 (<h1>{{ title }}</h1>) or write one directly. The three above have none:

Inbox and Leeslijst have no page title at all in the design; their headings start at the section level ("Doe nu", "Voltooid").
Instellingen jumps straight to <h2> five times (Settings.vue:25,40,49,62,76) with no h1 above them.

page-has-heading-one is an axe best-practice rule, not a WCAG success criterion, so this is not a compliance failure. It does affect screen-reader users who navigate by heading: on these three routes there is no top-level heading to orient on, and on Instellingen the outline starts one level down.

Needs a design call before implementation, which is why it is not folded into #224:

Do Inbox and Leeslijst get a visible page title, or a visually-hidden <h1>? A visible one changes the layout of the two busiest screens; a hidden one is invisible debt but matches the current design.
On Instellingen an <h1>Instellingen</h1> above the sections is the obvious fix and probably wants to be visible.

Once settled, widen RULES in tests/e2e/landmarks.spec.ts to include page-has-heading-one; the test is scoped to landmark-one-main and region today precisely so this gap stays visible rather than being allowlisted away.

An axe scan across all nine routes (added in #224 as `tests/e2e/landmarks.spec.ts`) reports `page-has-heading-one` on three routes: ``` AXE /: moderate/page-has-heading-one x1 AXE /leeslijst: moderate/page-has-heading-one x1 AXE /instellingen: moderate/page-has-heading-one x1 AXE /concept-berichten, /uitgaande-post, /notities, /voorwaarden, /inloggen, /account-verwijderd: clean ``` The clean ones get theirs from `OverzichtShell.vue:26` (`<h1>{{ title }}</h1>`) or write one directly. The three above have none: - **Inbox** and **Leeslijst** have no page title at all in the design; their headings start at the section level ("Doe nu", "Voltooid"). - **Instellingen** jumps straight to `<h2>` five times (`Settings.vue:25,40,49,62,76`) with no h1 above them. `page-has-heading-one` is an axe best-practice rule, not a WCAG success criterion, so this is not a compliance failure. It does affect screen-reader users who navigate by heading: on these three routes there is no top-level heading to orient on, and on Instellingen the outline starts one level down. Needs a design call before implementation, which is why it is not folded into #224: - Do Inbox and Leeslijst get a visible page title, or a visually-hidden `<h1>`? A visible one changes the layout of the two busiest screens; a hidden one is invisible debt but matches the current design. - On Instellingen an `<h1>Instellingen</h1>` above the sections is the obvious fix and probably wants to be visible. Once settled, widen `RULES` in `tests/e2e/landmarks.spec.ts` to include `page-has-heading-one`; the test is scoped to `landmark-one-main` and `region` today precisely so this gap stays visible rather than being allowlisted away.

robbertbos referenced this issue

2026-08-05 20:45:33 +00:00

Skip link and main landmark on every route with TopNav #224

robbertbos referenced this issue from a commit

2026-08-10 21:24:44 +00:00

Move the menu behind a labeled button and give pages visible titles

robbertbos referenced this issue from a pull request that will close it,

2026-08-10 21:25:05 +00:00

Discoverable menu button and visible page titles #290

robbertbos referenced this issue from a commit

2026-08-10 21:39:24 +00:00

Move the menu behind a labeled button and give pages visible titles