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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#15,169 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
83/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css, html, sass
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

Bắt đầu trong src/resources/formats/html/bootstrap/_bootstrap-rules.scss, tại quy tắc độ mờ của tiêu đề được liên kết trong báo cáo. Kết xuất ví dụ QMD được cung cấp và chạy axe-core để kiểm tra độ tương phản của các liên kết trong h4, h5 và h6. Hoàn thành khi các liên kết đó giữ được độ tương phản của màu liên kết trong theme và axe-core không còn báo lỗi color-contrast.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
JavaScript
Star
6.1k
Fork
476
Merge trung bình
17 giờ 7 phút
Pull request đã merge (30 ngày)
112

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của quarto-dev/quarto-cli

Tất cả issue của quarto-dev/quarto-cli

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.