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

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

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

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

評価

難易度
3/5
見積もり時間
半日
初心者へのやさしさ
72/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
markdown, typescript, yaml
領域
accessibility, tooling

調査の方向性

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.

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

説明

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

環境構築

はじめの一歩

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

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

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

似ている issue

JavaScript の issue をもっと見る

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

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