Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#140 4 comentarios 0 reacciones 0 asignados Ver en GitHub

@Okd2006 ya está trabajando en esto.

Desde el 2/3/2026.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
55/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
javascript
Área
accessibility, frontend, web-dev

Línea de trabajo

Comienza en la cuadrícula de proyectos de la página de inicio de aboutcode.org e inspecciona el div de la tarjeta del proyecto y su atributo alt del icono. Verifica que se pueda llegar a cada tarjeta con Tab, que se active con Enter o Space, que se anuncie con el nombre del proyecto y el rol button, y que abra el popup de detalles.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
Lenguaje dominante
JavaScript
Estrellas
9
Forks
17
Merge medio
7 h 55 min
PR fusionados (30 d)
2

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de aboutcode-org/www.aboutcode.org

Todos los issues de aboutcode-org/www.aboutcode.org

Issues similares

Más issues de JavaScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.