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 于 241 天前认领，目前没有进行中的 PR。 未关闭enhancement needs design website
难度 5/5 一周以上 新手友好度 25/100
aboutcode-org/www.aboutcode.org#141 · 已指派 1 人 ·
查看 aboutcode-org/www.aboutcode.org 的全部 Issue
相似的 Issue
-
FEATURE REQUEST
难度 2/5 1-3 小时 新手友好度 68/100
linuxmint/cinnamon-spices-extensions#1193 ·
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 76/100
Fei2411/DeepSeek-Bot#703 ·
-
area:web first-timers-only good first issue
难度 1/5 1 小时以内 新手友好度 95/100
career-ops-hq/career-ops#6264 ·
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 74/100
catppuccin/firefox#21 ·
-
难度 1/5 1 小时以内 新手友好度 83/100
cline/mcp-marketplace#3394 ·