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

Đang mở
  • Có gì không ổn?
#15,038 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ó
3/5
Thời gian dự kiến
Nửa ngày
Mức phù hợp với người mới
72/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ệ
markdown, typescript, yaml
Lĩnh vực
accessibility, tooling

Hướng nghiên cứu

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.

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

Mô tả

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.
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.