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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#15,169 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
83/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, html, sass
Área
accessibility, frontend

Línea de trabajo

Empieza en src/resources/formats/html/bootstrap/_bootstrap-rules.scss, en la regla de opacidad de los encabezados enlazada en el informe. Renderiza el ejemplo QMD proporcionado y ejecuta axe-core para comprobar el contraste de los enlaces en h4, h5 y h6. Se da por terminado cuando esos enlaces conservan el contraste del color de enlace del tema y axe-core deja de informar de la infracción color-contrast.

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

Descripción

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
Lenguaje dominante
JavaScript
Estrellas
6.1k
Forks
476
Merge medio
17 h 7 min
PR fusionados (30 d)
112

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.