Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Navbar item with icon and text renders an unnamed role="img" icon

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

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

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

評価

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

調査の方向性

まず navicon.ejs を確認し、次に sidebaritem.ejs、navitem-dropdown.ejs、nav-footer-navitem.ejs での使われ方を調べて、テキスト付きの項目とアイコンのみの項目がどのように区別されているかを把握してください。提供された _quarto.yml と index.qmd で再現し、続いて quarto render と指定された axe コマンドを実行してください。テキスト付きのアイコンが装飾扱いになり、アイコンのみの場合はアクセシブルな名前が保持されれば完了です。

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

説明

accessibility bug website-navigation
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

A navbar item with both icon and text renders its icon as role="img" with no accessible name.
axe reports role-img-alt (WCAG 1.1.1) on every page.

The link text already names the link, so the icon is decorative.
There is no option to say so: icon takes only a string, and navicon.ejs always writes role="img".
The only attribute it passes on is the item's aria-label, which goes on the icon, not the link.
The link then reads its name twice, for example "external link Blog".

navicon.ejs is also used by sidebaritem.ejs, navitem-dropdown.ejs and nav-footer-navitem.ejs, so sidebar, menu and footer items with an icon and text behave the same way.

  • #15038 covers icon-only navbar links, which is a different case.
Steps to reproduce

_quarto.yml:

project:
  type: website
website:
  title: "Navbar icon"
  navbar:
    left:
      - text: "Overview"
        icon: house
        href: index.qmd

index.qmd:

---
title: "Home"
---

Home page.

Then:

quarto render
quarto call axe _site --viewports 1440x900
jq -r '.findings[].signature' _axe-checks/findings.json
Actual behavior
<a class="nav-link active" href="./index.html" aria-current="page"> <i class="bi bi-house" role="img"> </i> <span class="menu-text">Overview</span></a>

findings.json lists role-img-alt :: i (plus region :: #quarto-skip-link, which is unrelated).

Expected behavior

When the item has text, the icon is decorative: <i class="bi bi-house" aria-hidden="true"></i>.
role="img" with a name is only needed for icon-only items, and the item's aria-label names the link rather than the icon.

Your environment
  • IDE: none, command line.
  • OS: macOS 27.0.
  • The same output comes from a current development build (99.9.9).
Quarto check output
Quarto 1.11.6
[✓] Checking environment information...
      Quarto cache location: /Users/mcanouil/Library/Caches/quarto
      Project root: /private/tmp/claude-501/-Users-mcanouil-Projects-quarto-dev-quarto-web/e598806e-b79f-4883-9554-648d53816f11/scratchpad/repro-sidebar
      Project config: /private/tmp/claude-501/-Users-mcanouil-Projects-quarto-dev-quarto-web/e598806e-b79f-4883-9554-648d53816f11/scratchpad/repro-sidebar/_quarto.yml

[✓] 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 versions of quarto dependencies......OK

[✓] Checking Quarto installation......OK
      Version: 1.11.6
      Path: /private/tmp/claude-501/-Users-mcanouil-Projects-quarto-dev-quarto-web/e598806e-b79f-4883-9554-648d53816f11/scratchpad/quarto-1.11.6/bin

[✓] Checking tools....................OK
      TinyTeX: v2026.07
      Chrome Headless Shell: (not installed)
      VeraPDF: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/mcanouil/Library/TinyTeX/bin/universal-darwin
      Version: 2026

[✓] Checking Chrome Headless....................OK
      Using: Chrome from QUARTO_CHROMIUM
      Path: /Applications/Brave Browser.app/Contents/MacOS/Brave Browser

[✓] Checking basic markdown render....OK
ℹ R version 4.6.1 (2026-06-24)
! Config '~/.Rprofile' was loaded!

[✓] Checking R installation...........OK
      Version: 4.6.1
      Path: /Library/Frameworks/R.framework/Versions/4.6/Resources
      LibPaths:
        - /Users/mcanouil/Library/R/arm64/4.6/library
        - /Library/Frameworks/R.framework/Versions/4.6/Resources/library
      knitr: 1.51
      rmarkdown: 2.31

[✓] Checking Knitr engine render......OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.13
      Path: /Users/mcanouil/Projects/quarto-dev/quarto-web/.venv/bin/python3
      Jupyter: 5.9.1
      Kernels: julia-1.12, python3
[IPKernelApp] WARNING | Kernel is running over TCP without encryption. All communication (including code and outputs) is sent in plain text and is susceptible to eavesdropping. Use IPC transport or launch with kernel manager-provisioned CurveZMQ keys to enable transport encryption.

[✓] Checking Jupyter engine render....OK

[✓] Checking Julia installation...
主要言語
JavaScript
スター
6.1k
フォーク
471
平均マージ
22時間 56分
マージ済み PR（30日）
98

環境構築

はじめの一歩

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

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

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

似ている issue

JavaScript の issue をもっと見る

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

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