Skip to content

a11y: dashboard header nav landmark has no accessible name #14809

Description

@cwickham

Every dashboard emits a <nav class="navbar"> header, with no aria-label. The template includes it unconditionally (template.html#L31title-block.html#L2), even when the dashboard has no title. For multi-page dashboards this nav is the primary navigation: the page tabs are injected into it (format-dashboard-page.ts#L43).

Two problems:

  1. The nav has no accessible name. On a standalone dashboard this is a missing-name issue; when a dashboard page renders inside a website project, it can coexist with the website navbar and then fails axe landmark-unique (a11y: navbar and sidebar nav landmarks have no aria-label (landmark-unique) #14376).
  2. The navbar toggler has a hardcoded English label, aria-label="Toggle navigation" (title-block.html#L4). The website equivalent uses the localized toggle-navigation language key (navtoggle.ejs#L2).

Both are one-line template fixes: Pandoc templates can read localized strings with $quarto.language.<key>$ variables (docs). The mechanism applies to built-in templates too — verified by a render of this template with lang: fr, where $quarto.language.toggle-navigation$ resolves to "Basculer la navigation".

Repro:

---
title: "My Dashboard"
format: dashboard
---

# Page 1

Content

# Page 2

Content

The rendered header nav has no aria-label, and the toggler label stays English regardless of lang.

Fix sketch: in title-block.html, set the nav label with $quarto.language.<key>$ (reuse the nav label key that the fix for #14376 introduces) and replace the toggler string with $quarto.language.toggle-navigation$. Note: #14685 also touches dashboard markup, so coordinate.

Split from #14376. Part of #8706.

Investigation was AI-assisted, grounded in a local clone (per CONTRIBUTING.md).

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions