WWW: Improve keyboard and screen reader accessibility of project grid cards
@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 內容生成。
描述
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
- Pressing Tab on the homepage skips over the entire project grid - cards receive no focus.
-
- Screen readers announce the cards as generic container elements with no indication that they are clickable.
-
- Every card's icon has the same alt text (
"logo"), which provides no meaningful information to assistive technology users.
- Every card's icon has the same alt text (
Expected behavior
- Users should be able to Tab through project cards and press Enter (or Space) to open the detail popup.
-
- Screen readers should announce each card as an interactive element (e.g.,
"dejacode, button") so users know it can be activated.
- Screen readers should announce each card as an interactive element (e.g.,
-
- 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 (onKeyDownfor Enter/Space) to each project card<div> -
- Update the card icon's
altattribute to use the project name instead of the generic"logo"
- Update the card icon's
References
- Related to the current focus on improving website content and user experience
- 主要語言
- JavaScript
- 星號
- 9
- 分支
- 17
- 平均合併
- 7 小時 55 分鐘
- 30 天內合併 PR
- 2
環境準備
這個專案沒有提供開發容器、Dockerfile 或貢獻指南，環境需要你自己搭建：先看它的 README，通用步驟見我們的新手貢獻指南。
從這裡開始
- 先讀完整個 Issue，再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫，在一個分支上完成修改。
- 送出 Pull Request，並在描述裡引用這個 Issue 編號。
aboutcode-org/www.aboutcode.org 的其他 Issue
-
Making all post button.可能已有人在做 @sarthaklole 於 70 天前認領。 未關閉
難度 2/5 1-3 小時 新手友好度 72/100
aboutcode-org/www.aboutcode.org#117 · 3 則留言 ·
-
WWW: Reduce frequency of update-releases可能重新可做 @johnmhoran 於 51 天前認領，目前沒有進行中的 PR。 未關閉ci-workflow
難度 2/5 1-3 小時 新手友好度 45/100
aboutcode-org/www.aboutcode.org#180 · 已指派 1 人 ·
-
DOCS: Create new AboutCode stack diagram(s)可能重新可做 @hixvikas 於 52 天前認領，目前沒有進行中的 PR。 未關閉documentation
難度 5/5 一週以上 新手友好度 35/100
aboutcode-org/www.aboutcode.org#166 · 1 則留言 ·
-
WWW: Create About top level page?可能已有人在做 @pombredanne 於 154 天前認領。 未關閉website
難度 2/5 1-3 小時 新手友好度 35/100
aboutcode-org/www.aboutcode.org#164 · 1 個 reaction · 已指派 1 人 ·
-
WWW: Add Initiatives and grant Projects可能重新可做 @mjherzog 於 240 天前認領，目前沒有進行中的 PR。 未關閉enhancement needs design website
難度 5/5 一週以上 新手友好度 25/100
aboutcode-org/www.aboutcode.org#141 · 已指派 1 人 ·
查看 aboutcode-org/www.aboutcode.org 的全部 Issue
相似的 Issue
-
難度 2/5 1-3 小時 新手友好度 76/100
Graphify-Labs/graphify#4860 · 1 則留言 ·
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 65/100
CommandCodeAI/command-code#1088 ·
維護者通常 2 天內回覆
-
難度 2/5 1-3 小時 新手友好度 78/100
CanadaHonk/porffor#426 ·
-
難度 2/5 1-3 小時 新手友好度 66/100
-
bug
難度 2/5 1-3 小時 新手友好度 66/100
RIT-Software-Engineering/RIT-SE-Senior-Project#546 ·
維護者通常 1 天內回覆