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

WWW: Improve keyboard and screen reader accessibility of project grid cards

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

@Okd2006 がすでに取り組んでいます。

2026年3月2日 から。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
55/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
javascript
領域
accessibility, frontend, web-dev

調査の方向性

aboutcode.org のホームページにあるプロジェクトグリッドから始め、プロジェクトカードの div とそのアイコンの alt 属性を調べます。各カードに Tab で到達でき、Enter または Space でアクティブ化され、プロジェクト名と button ロールとともに読み上げられ、詳細ポップアップが開くことを確認します。

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

説明

enhancement needs design website
Problem

The project cards on the homepage (aboutcode.org) cannot be reached or activated using keyboard navigation. A user who navigates via the Tab key cannot focus on any project card, and therefore has no way to open the project detail popup without a mouse.

This affects:

  • Keyboard-only users (e.g., power users, users with motor impairments) who cannot access project details at all
    • Screen reader users who are not informed that cards are interactive, since the cards lack semantic roles and labels
Current behavior
  1. Pressing Tab on the homepage skips over the entire project grid - cards receive no focus.
    1. Screen readers announce the cards as generic container elements with no indication that they are clickable.
    1. Every card's icon has the same alt text ("logo"), which provides no meaningful information to assistive technology users.
Expected behavior
  1. Users should be able to Tab through project cards and press Enter (or Space) to open the detail popup.
    1. Screen readers should announce each card as an interactive element (e.g., "dejacode, button") so users know it can be activated.
    1. Image alt text should be descriptive (e.g., the project name) rather than generic.
Why this matters

The project grid is the primary content of the homepage - it's how visitors discover AboutCode projects. Users who rely on keyboard navigation or assistive technology are currently locked out of this core content. Addressing this would improve the user experience for a wider audience and bring the site closer to WCAG 2.1 Level A conformance.

Suggested approach
  • Add tabIndex="0", role="button", and a keyboard event handler (onKeyDown for Enter/Space) to each project card <div>
    • Update the card icon's alt attribute to use the project name instead of the generic "logo"
References
主要言語
JavaScript
スター
9
フォーク
17
平均マージ
7時間 55分
マージ済み PR（30日）
2

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

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

aboutcode-org/www.aboutcode.org のほかの issue

aboutcode-org/www.aboutcode.org の issue をすべて見る

似ている issue

JavaScript の issue をもっと見る

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

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