Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#15,096 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
82/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
scss
Área
accessibility

Línea de trabajo

Lee src/resources/projects/website/navigation/quarto-nav.scss alrededor de las reglas de .sidebar-item y .sidebar-item-toggle mencionadas en el issue. Ajusta el tamaño de los objetivos y el espaciado entre elementos para cumplir WCAG 2.5.8 y conservar el comportamiento de fila indicado. Después, renderiza la reproducción proporcionada del sitio web y mide los objetivos de la barra lateral a 320px y 1280px. La tarea estará completa cuando cada objetivo cumpla el requisito de tamaño o espaciado en ambos anchos.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
JavaScript
Estrellas
6.1k
Forks
466
Merge medio
22 h 53 min
PR fusionados (30 d)
87

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de quarto-dev/quarto-cli

Todos los issues de quarto-dev/quarto-cli

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.