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

Ouverte
  • Quelque chose ne va pas ?
#15,038 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
3/5
Temps estimé
Une demi-journée
Accessibilité débutants
72/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
markdown, typescript, yaml
Domaine
accessibility, tooling

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.
Langage dominant
JavaScript
Étoiles
6.1k
Forks
478
Merge moyen
17 h 7 min
PR mergées (30 j)
112

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de quarto-dev/quarto-cli

Toutes les issues de quarto-dev/quarto-cli

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.