quarto-dev / quarto-dev/quarto-cli

Document alt text for the dashboard navbar logo

Open
#14,690 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

accessibility dashboards documentation
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

A format: dashboard navbar logo renders as a link wrapping an <img>, and unless the author supplies alt text it ships with alt="" — leaving the link with no accessible name (axe link-name, serious; WCAG 2.2 SC 2.4.4 Link Purpose (In Context)). Quarto has two working ways to set that alt text, but neither is documented anywhere:

format:
  dashboard:
    logo:
      path: images/penguins.png
      alt: "Palmer Penguins"
format:
  dashboard:
    logo: images/penguins.png
    logo-alt: "Palmer Penguins"

Both verified on Quarto 1.10.12: the alt lands on the rendered logo and gives the logo link its accessible name. The object form has been schema-valid since 1.8 (it accepts the full logo-light-dark-specifier, including per-light/dark objects); logo-alt has been honored by the dashboard template since dashboards debuted in 1.4 and is still explicitly supported (format-dashboard.ts#L126-L140). Alt can also come from a _brand.yml named logo resource (logo: images: <name>: {path, alt}).

Two places need it:

  1. Dashboard layout guide, Navigation section — currently says only "You can also include a logo and one or more nav-buttons", and the YAML example uses the bare string form. Adding alt to that example (plus a sentence saying why) would make the accessible form the copy-paste default.

  2. Dashboard format reference — the logo entry's description ("Logo image(s) (placed on the left side of the navigation bar)") doesn't mention alt or the object form, and logo-alt is absent entirely. This page is auto-generated from the schema, and logo-alt is missing from document-dashboard.yml (it's only defined for website navbars/sidebars), so fixing the reference likely requires a schema change rather than a quarto-web edit.

An AI assistant helped investigate, grounded in a local clone of this repo (per CONTRIBUTING.md).

Related: #14660 tracks what the default should be when no alt is provided; #13131 requests logo-href for dashboards. This issue is only about documenting the alt options that already work.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Navigation section in quarto.org/docs/dashboards/layout.html and the dashboard format reference, then inspect document-dashboard.yml and the linked format-dashboard.ts implementation. Update the navigation example and descriptions to cover accessible logo alt text and the object form, and ensure the generated reference includes the supported dashboard option.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, yaml
Domain
accessibility, documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.