Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

a11y: website sidebar toggles and page links are too small for WCAG 2.5.8

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#15,096 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
82/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
scss
Bereich
accessibility

Rechercherichtung

Lies in src/resources/projects/website/navigation/quarto-nav.scss den Bereich um die im Issue referenzierten Regeln für .sidebar-item und .sidebar-item-toggle. Passe die Zielgröße und den Abstand zwischen den Elementen so an, dass WCAG 2.5.8 erfüllt wird und das angegebene Zeilenverhalten erhalten bleibt. Rendere anschließend die bereitgestellte Website-Reproduktion und miss die Ziele in der Seitenleiste bei 320px und 1280px. Die Aufgabe ist abgeschlossen, wenn jedes Ziel bei beiden Breiten die Größen- oder Abstandsanforderung erfüllt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

accessibility html websites

I have:

  • searched the issue tracker for similar issues
  • installed the latest version of Quarto CLI
  • formatted my issue following the Bug Reports guide

Bug description

In the website sidebar, two kinds of targets fail
WCAG 2.5.8 Target Size (Minimum):

  • Section toggles (the chevron next to a section that has an href) are
    20.4 × 18 px. The toggle shares an edge with the section link, so the 24px
    spacing exception does not apply. The link and the toggle do different
    things, so the "equivalent" exception does not apply either.
  • Page links are 17 px tall, and their centres are 23.8 px apart. The
    24px circles of two adjacent links overlap by 0.2 px. This is a fail by a
    very small margin.

Sections without an href (one button for the label and the chevron) pass on
spacing.

On quarto.org the values are almost the same: toggles 20.4 × 18.8 px, links
17.0 px tall at a 23.8 px pitch (Safari 27 and Chrome, at 320px and 1280px).

Related: #14826 made the toggles into buttons. Open PR #14867 deletes the
toggle :focus-visible rule, which is next to the lines below. The fix below
does not touch that rule.

Cause

In quarto-nav.scss,
.sidebar-item has line-height: 1rem, margin-top: 0.4rem, and
margin-bottom: 0.2em. These give the 17px link height and the 23.8px pitch.

The toggle has padding: 0
and a 0.7rem icon,
so it is only as big as the icon and its ms-2 margin.

Possible fix
// Make the toggle a 24px target without a change to the row height:
// the negative margins cancel the extra height.
.sidebar-item .sidebar-item-toggle:not(.sidebar-item-text) {
  min-width: 24px;
  min-height: 24px;
  margin-block: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
}

.sidebar-item {
  margin-top: 0.45rem; // was 0.4rem: link pitch goes from 23.8px to 24.6px
}

I injected this CSS into the rendered repro below and measured it with
Chrome Headless at 320px and 1280px:

  • All targets pass at both widths.
  • Toggles are 24 × 24 px. Page links are 24.6 px apart.
  • The rows with a toggle keep their height. The chevron stays on the first
    line of a section name that wraps.
  • The list gets 0.8 px longer per item.
  • Toggles are 3.6 px wider, so a long section name can wrap one word earlier.

The :not(.sidebar-item-text) excludes the full-width button of a section
without an href. That button already passes.

Steps to reproduce

_quarto.yml:

project:
  type: website
website:
  sidebar:
    contents:
      - text: "Home"
        href: index.qmd
      - section: "Guide"
        href: index.qmd
        contents:
          - text: "page-a"
            href: index.qmd
          - text: "page-b"
            href: index.qmd
      - section: "Reference"
        contents:
          - text: "page-c"
            href: index.qmd
          - text: "page-d"
            href: index.qmd

index.qmd:

---
title: Home
---

Text.
  1. Render the project and open _site/index.html.
  2. In the browser console, run
    document.querySelector('#quarto-sidebar .sidebar-item-toggle').getBoundingClientRect().
  3. Do the same for the "page-a" and "page-b" links.

Actual behavior

Target Size (px) Result
"Guide" toggle 20.4 × 18.0 Fail: 24px circle overlaps the "Guide" link
page-a, page-b, page-c, page-d links 205 × 17.0, 23.8 px apart Fail: circles overlap by 0.2 px
"Reference" button (no href) 213 × 18.0 Pass on spacing

The values are the same at 320px and 1280px.

Expected behavior

Each target is at least 24 × 24 px, or it has the spacing that
2.5.8 requires.

Your environment

  • IDE: none (rendered from the terminal)
  • OS: macOS 27.0 (build 26A428)
  • Browsers: Safari 27 (manual test on quarto.org), Chrome Headless (repro)

Quarto check output

Quarto 1.11.6
[✓] Checking environment information...
      Quarto cache location: /Users/charlottewickham/Library/Caches/quarto
      Project: none found (single-file mode)
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.10.0: OK
      Dart Sass version 1.101.0: OK
      Deno version 2.7.14: OK
      Typst version 0.15.1: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.11.6
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: v2026.04
      Chrome Headless Shell: 150.0.7871.115
      VeraPDF: 1.28.2

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/charlottewickham/Library/TinyTeX/bin/universal-darwin
      Version: 2026

[✓] Checking Chrome Headless....................OK
      Using: Chrome Headless Shell installed by Quarto
      Path: /Users/charlottewickham/Library/Application Support/quarto/chrome-headless-shell/chrome-headless-shell-mac-arm64/chrome-headless-shell
      Version: 150.0.7871.115

[✓] Checking basic markdown render....OK

[✓] Checking R installation...........OK
      Version: 4.6.0
      Path: /Library/Frameworks/R.framework/Versions/4.6/Resources
      LibPaths:
        - /Users/charlottewickham/Library/R/arm64/4.6/library
        - /Library/Frameworks/R.framework/Versions/4.6/Resources/library
      knitr: 1.51
      rmarkdown: 2.31

[✓] Checking Knitr engine render......OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.2
      Path: /Users/charlottewickham/.pyenv/versions/3.12.2/bin/python3
      Jupyter: 5.9.1
      Kernels: python3

[✓] Checking Jupyter engine render....OK

[✓] Checking Julia installation...

The investigation used AI tools, grounded in a local clone of quarto-cli.

Vorherrschende Sprache
JavaScript
Sterne
6.1k
Forks
466
Ø Merge
21 Std. 36 Min.
Gemergte PRs (30 T.)
79

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus quarto-dev/quarto-cli

Alle Issues in quarto-dev/quarto-cli

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.