Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#15,096 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
82/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
scss
Domaine
accessibility

Piste de recherche

Lisez src/resources/projects/website/navigation/quarto-nav.scss autour des règles .sidebar-item et .sidebar-item-toggle mentionnées dans l’issue. Ajustez la taille des cibles et l’espacement entre les éléments pour respecter WCAG 2.5.8 tout en conservant le comportement des lignes indiqué. Ensuite, affichez la reproduction du site web fournie et mesurez les cibles de la barre latérale à 320px et 1280px. La tâche est terminée lorsque chaque cible respecte l’exigence de taille ou d’espacement aux deux largeurs.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
JavaScript
Étoiles
6.1k
Forks
471
Merge moyen
22 h 53 min
PR mergées (30 j)
87

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de quarto-dev/quarto-cli

Toutes les issues de quarto-dev/quarto-cli

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.