a11y: `opacity: 0.9` on h3 to h6 pushes links in headings below WCAG AA contrast

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#15,169 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
83/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
css, html, sass
Bereich
accessibility, frontend

Rechercherichtung

Beginne in src/resources/formats/html/bootstrap/_bootstrap-rules.scss bei der im Bericht verlinkten Regel für die Deckkraft von Überschriften. Rendere das bereitgestellte QMD-Beispiel und führe axe-core aus, um den Kontrast von Links in h4, h5 und h6 zu prüfen. Fertig ist die Arbeit, wenn diese Links den Kontrast ihrer Theme-Linkfarbe beibehalten und axe-core den Verstoß gegen color-contrast nicht mehr meldet.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

accessibility bug
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

The HTML stylesheet sets opacity: 0.9 on h3, h4, h5 and h6.
Opacity blends every descendant toward the page background, so a link colour that passes on its own fails inside a heading.
The built-in link colours are close to the 4.5:1 line, so there is no margin for the fade.

axe-core color-contrast (serious, WCAG 2.2 SC 1.4.3) flags a link inside h4, h5 and h6:

Theme Link colour after the fade Background Ratio
default #257dfd #ffffff 3.86:1
cosmo #3d71e6 #ffffff 4.46:1

A link inside h3 is not flagged, because h3 is large text and only needs 3:1.
Plain heading text is not flagged either.

#14679 reports the same mechanism for the appendix with opacity: 0.9.
This is a separate rule in a different place, so a fix for the appendix does not cover headings.

Steps to reproduce
---
title: "Heading link contrast test"
---

## Two

### Three [with a link](https://example.org)

#### Four [with a link](https://example.org)

##### Five [with a link](https://example.org)

###### Six [with a link](https://example.org)

Render it, then run axe-core on the page, for example with axe: output: document or with the axe.min.js that ships with Quarto.

Actual behavior

axe-core reports color-contrast on the links in the h4, h5 and h6 headings, with the ratios in the table above.

Expected behavior

Links inside headings keep the contrast of the theme's link colour, so they meet 4.5:1 whenever the link colour does.

Your environment
  • IDE: none, terminal only
  • OS: macOS (Darwin 27.0.0, Apple Silicon)
Quarto check output
Quarto 99.9.9
[✓] 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 Quarto installation......OK
      Version: 99.9.9
      commit: 69592e5c1718d3e1b2f3d11e757d32e23a16af67
Vorherrschende Sprache
JavaScript
Sterne
6.1k
Forks
476
Ø Merge
16 Std. 42 Min.
Gemergte PRs (30 T.)
115

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.