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

オープン 初心者向け
  • 何か問題がありますか？
#15,169 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
83/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
css, html, sass
領域
accessibility, frontend

調査の方向性

レポートでリンクされている見出しの不透明度ルールがある src/resources/formats/html/bootstrap/_bootstrap-rules.scss から始めてください。提示された QMD の例をレンダリングし、axe-core を実行して h4、h5、h6 内のリンクのコントラストを確認してください。これらのリンクがテーマのリンク色のコントラストを保ち、axe-core が color-contrast 違反を報告しなくなれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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
主要言語
JavaScript
スター
6.1k
フォーク
476
平均マージ
17時間 7分
マージ済み PR（30日）
112

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

quarto-dev/quarto-cli のほかの issue

quarto-dev/quarto-cli の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。