Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#140 4 commenti 0 reazioni 0 assegnatari Vedi su GitHub

@Okd2006 ci sta già lavorando.

Dal 2/3/2026.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
55/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript
Ambito
accessibility, frontend, web-dev

Direzione di ricerca

Inizia dalla griglia dei progetti nella homepage di aboutcode.org e ispeziona il div della scheda del progetto e il suo attributo alt dell’icona. Verifica che ogni scheda sia raggiungibile con Tab, si attivi con Enter o Space, venga annunciata con il nome del progetto e il ruolo button e apra il popup dei dettagli.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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
Lingua principale
JavaScript
Stelle
9
Fork
17
Merge medio
7h 55m
PR unite (30g)
2

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di aboutcode-org/www.aboutcode.org

Tutte le issue di aboutcode-org/www.aboutcode.org

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.