Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#140 4 bình luận 0 reaction 0 người được giao Xem trên GitHub

@Okd2006 đang làm issue này rồi.

Từ ngày 2/3/2026.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
55/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
javascript
Lĩnh vực
accessibility, frontend, web-dev

Hướng nghiên cứu

Bắt đầu tại lưới dự án trên trang chủ của aboutcode.org và kiểm tra div của thẻ dự án cùng thuộc tính alt của biểu tượng. Xác minh rằng mỗi thẻ có thể được truy cập bằng Tab, được kích hoạt bằng Enter hoặc Space, được thông báo cùng với tên dự án và vai trò button, đồng thời mở popup chi tiết.

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

Mô tả

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
Ngôn ngữ chính
JavaScript
Star
9
Fork
17
Merge trung bình
7 giờ 55 phút
Pull request đã merge (30 ngày)
2

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

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 aboutcode-org/www.aboutcode.org

Tất cả issue của aboutcode-org/www.aboutcode.org

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.