Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta Adatta ai principianti
  • Qualcosa non va?
#15,096 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
82/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
scss
Ambito
accessibility

Direzione di ricerca

Leggi src/resources/projects/website/navigation/quarto-nav.scss nella parte che riguarda le regole .sidebar-item e .sidebar-item-toggle citate nell’issue. Regola le dimensioni delle aree cliccabili e la spaziatura tra gli elementi per soddisfare WCAG 2.5.8, mantenendo il comportamento delle righe indicato. Poi renderizza la riproduzione del sito web fornita e misura le aree cliccabili della barra laterale a 320px e 1280px. Il lavoro è completo quando ogni area cliccabile soddisfa il requisito di dimensione o spaziatura a entrambe le larghezze.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
JavaScript
Stelle
6.1k
Fork
466
Merge medio
21h 36m
PR unite (30g)
79

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di quarto-dev/quarto-cli

Tutte le issue di quarto-dev/quarto-cli

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.