a11y: `quarto create project blog` scaffold has images with no alt text and icon-only navbar links with no name

Abierto
  • ¿Algo no está bien?
#15,038 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
3/5
Tiempo estimado
Medio día
Aptitud para principiantes
72/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
markdown, typescript, yaml
Área
accessibility, tooling

Línea de trabajo

Start with the blog scaffold content in src/project/types/website/website.ts and the template src/resources/projects/website/templates/blog/_quarto-blog.ejs.yml. The scaffold files to edit are about.qmd, posts/post-with-code/index.qmd, posts/welcome/index.qmd and the navbar in _quarto.yml, where the GitHub and Bluesky icon links need aria-label. Done when quarto create project blog, render and quarto call axe report no image-alt or link-name findings.

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

Descripción

accessibility html

The blog scaffold from quarto create project blog fails WCAG 2.x Level A
right after it is created. It has three images with no alternative text and
two icon-only navbar links with no accessible name. The templates already
support all the fixes. The scaffold content does not use them.

New authors copy the scaffold as their model, so it should show the
accessible pattern.

Reproduce (Quarto 1.11.5)

quarto create project blog blog
quarto render blog
quarto call axe blog/_site

axe-core 4.10.3, 4 pages, 1440x900 and 320x568:

Rule (WCAG) Element Source in scaffold
image-alt (1.1.1) <img class="about-image"> on about.html about.qmd: image: profile.jpg, no image-alt
image-alt (1.1.1) listing thumbnail, Post With Code posts/post-with-code/index.qmd: image: "image.jpg", no image-alt
image-alt (1.1.1) <img> in Welcome post body, and its listing card posts/welcome/index.qmd: ![](thumbnail.jpg)
link-name (2.4.4, 4.1.2) both listing thumbnail links (an image link with no alt has no name) follows from the two rows above
link-name (2.4.4, 4.1.2), role-img-alt (1.1.1) navbar GitHub and Bluesky links, every page _quarto.yml: - icon: github / - icon: bluesky with no text or aria-label

Proposed scaffold changes

All in src/project/types/website/website.ts (blog scaffold content) and
src/resources/projects/website/templates/blog/_quarto-blog.ejs.yml.

_quarto.yml:

  navbar:
    right:
      - about.qmd
      - icon: github
        href: https://github.com/
        aria-label: GitHub
      - icon: bluesky
        href: https://bsky.app/
        aria-label: Bluesky

about.qmd:

image: profile.jpg
image-alt: "A stick figure drawn in light against a dusk sky"

posts/post-with-code/index.qmd:

image: "image.jpg"
image-alt: "City lights across Earth at night, seen from orbit"

posts/welcome/index.qmd:

![](thumbnail.jpg){fig-alt="A laptop, a cup of coffee, a notepad and a phone on a wooden desk"}

Result

The same scan with all four changes: every image-alt, link-name and
role-img-alt finding is cleared (10 findings → 0). The findings that
remain have their own issues: listing category contrast (#14381) and the
best-practice landmark and heading-order findings
(#14375/#14377/#14384/#14605).

Other quarto create scaffolds

We checked the 1.11.5 project templates (default, website, book,
manuscript, confluence). Only the blog sets image: or uses icon-only
navbar items. The book scaffold copies cover.png into the project, but
its _quarto.yml does not set cover-image, so nothing renders it. When
an author adds cover-image, they need cover-image-alt too. This is
outside the scope of this issue.

Related

  • #14828: navbar: tools: / sidebar: tools: with only icon: get
    aria-label="". That path is a different template (navtools.ejs).
    The blog's navbar: right: items go through navitem.ejs/navicon.ejs.
    There, aria-label: already works, but there is no fallback when it is
    not set. The icon-name fallback proposed in #14828 should also cover
    this path. This issue only changes the scaffold, so the blog is correct
    with or without that fallback.
  • #7979 (closed 2023-12): added image-alt support to about pages. The
    scaffold was not updated to use it.
  • #7028: listing image alt.
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.