Improve keyboard and screen reader accessibility of project grid cards

[gyanranjanpanda]

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.
2. 2. Screen readers announce the cards as generic container elements with no indication that they are clickable.
3. 3. 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.
2. 2. Screen readers should announce each card as an interactive element (e.g., "dejacode, button") so users know it can be activated.
3. 3. 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

• Related to the current focus on improving website content and user experience
• • WCAG 2.1 - Keyboard (Level A)
• • • WCAG 2.1 - Name, Role, Value (Level A)

[Okd2006]

Hi maintainers,

I would like to work on this issue.

I plan to improve the accessibility of the project cards on the homepage by making them keyboard-navigable and screen-reader friendly. Specifically, I intend to:

• Enable keyboard focus on each project card using appropriate attributes (e.g., tabIndex).
• Add proper semantic roles (such as role="button") so assistive technologies can identify the cards as interactive elements.
• Implement keyboard interaction support (Enter and Space) to open the project detail popup.
• Replace the generic image alt="logo" text with descriptive alt text based on the project name.

These changes should help align the homepage with WCAG 2.1 Level A guidelines and improve accessibility for keyboard-only and screen reader users.

Please assign this issue to me if it is available. I’d be happy to contribute.

Thanks!

[Okd2006]

Hi again,

Following up with a more detailed implementation approach:

• Keyboard Accessibility

  • Make each project card focusable by adding tabIndex="0" (if the element is not already a native interactive element).
  • Ensure the tab order follows the visual layout of the project grid.
  • Add keyboard handlers so users can activate a card using Enter or Space, triggering the same behavior as a mouse click.

• Semantic Improvements

  • Add appropriate roles such as role="button" (or refactor to use semantic <button> or <a> elements if suitable).
  • Ensure each card has a clear accessible name derived from the project title so screen readers announce something like "DejaCode, button".

• Image Accessibility

  • Replace the generic alt="logo" with descriptive alt text using the project name (e.g., "DejaCode logo" or "DejaCode").
  • This will help screen reader users distinguish between projects.

• Focus and Interaction

  • Ensure visible focus indicators are present when cards receive keyboard focus.
  • Verify that activati

[mjherzog]

This issue belongs in the website repo, not the aboutcode repo. The website is still in Beta and changing frequently so this optimization is not an immediate priority.

[Okd2006]

Thank you for the heads up I'll try to contribute to some other issue