Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
  • Stimmt etwas nicht?
#140 4 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

@Okd2006 arbeitet bereits daran.

Seit 02.3.2026.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
55/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
javascript
Bereich
accessibility, frontend, web-dev

Rechercherichtung

Beginnen Sie beim Projekt-Grid auf der Startseite von aboutcode.org und untersuchen Sie das Projektkarten-div sowie dessen alt-Attribut für das Icon. Überprüfen Sie, dass jede Karte mit Tab erreichbar ist, mit Enter oder Space aktiviert wird, mit ihrem Projektnamen und der button-Rolle angesagt wird und das Detail-Popup öffnet.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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
Vorherrschende Sprache
JavaScript
Sterne
9
Forks
17
Ø Merge
7 Std. 55 Min.
Gemergte PRs (30 T.)
2

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus aboutcode-org/www.aboutcode.org

Alle Issues in aboutcode-org/www.aboutcode.org

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.