Improve accessibility for campaign cards in list and comparison views

[grantfox-oss]

Description

Campaign cards in both the campaign list and campaign comparison views are currently missing important accessibility support. This issue should harden the experience for keyboard users, assistive technology users, and everyone relying on screen readers by adding missing ARIA roles, improving keyboard focus order, and providing descriptive accessible names for non-text content such as icons, charts, and images.

Why

The current campaign UI uses visually rich cards and icons, but it does not expose enough semantic information for assistive technologies. That creates barriers for users who:

• navigate using keyboard only
• use screen readers
• rely on semantic structure rather than visual layout

The goal is to ensure campaign cards are perceivable, operable, and understandable in campaign list and comparison pages.

---

What needs to be done

1. Add ARIA roles and semantic structure

• Ensure the campaign card container and card grid use appropriate roles such as:
  • role="list" for the card container, if applicable
  • role="listitem" for each campaign card
• Add explicit grouping and headings as needed:
  • use aria-labelledby to associate card titles with their card container
  • add role="group" to campaign card sections if the card contains multiple grouped controls
• Ensure labels are present for card actions and status elements

2. Ensure card actions are keyboard-focusable

• Verify that every interactive element inside campaign cards is reachable via keyboard:
  • filter controls
  • action buttons
  • card links
  • chart interaction points if present
• Use actual focusable elements (<button>, <a>, or focusable custom components) rather than clickable non-interactive wrappers
• Ensure keyboard tab order follows the visual order of controls and content inside each card
• Add visible focus outlines or focus styles if not already present

3. Add descriptive accessible names for charts/images/icons

• Provide aria-label, aria-labelledby, or visually hidden text for:
  • chart widgets used inside campaign cards
  • icons representing status or actions
  • decorative images only if they convey meaning
• For any inline chart or progress visualization:
  • expose the numeric percentage text in the DOM, or
  • add aria-label="Campaign progress: 65% funded"
• For icon-only buttons:
  • add aria-label="View campaign details" or equivalent descriptive text

---

Implementation scope

Update the following areas at minimum:

• page.tsx
  • campaign list card layout and action controls
• campaign-comparison.tsx
  • comparison table/selected campaign cards and progress visuals
• any shared campaign card components or progress widgets used by these views

Also verify any chart or progress styling component used in these cards, such as progress.tsx, has accessible text or labels when rendered.

---

Acceptance criteria

• Campaign list pages pass basic axe-core accessibility checks for:
  • landmarks/roles
  • interactive element focusability
  • label relationships
  • keyboard navigation
• Campaign cards in list views:
  • use appropriate semantic roles or grouping
  • expose accessible names for any non-text content
  • contain only keyboard-focusable interactive elements for actions
• Campaign comparison view:
  • exposes card and chart progress in an accessible form
  • does not rely solely on visual color/shape to convey meaning
  • supports keyboard navigation across comparable campaign entries
• No campaign card UI should produce:
  • missing form labels
  • unreachable interactive controls
  • focus order that differs from visual order
  • unlabelled icon buttons
• The fix should remain compatible with existing styling and layout

---

Suggested tasks

• Audit campaign card markup in page.tsx
• Audit campaign comparison markup in campaign-comparison.tsx
• Add role / aria-labelledby / aria-label as needed
• Convert any non-focusable clickable containers into accessible buttons/links
• Add visible keyboard focus indicators for card actions
• Add descriptive labels for progress charts and status icons
• Run axe-core on campaign list pages and resolve all basic violations
• Confirm keyboard tab order matches the visual card flow

---

Notes

• This is a UI/accessibility fix, not a feature change.
• The focus is on campaign list and comparison views only, not the full app.
• If the card already uses a button or link wrapper, ensure it has an accessible name rather than relying on text hidden by CSS.

Feel free to paste this directly into GitHub as the issue body.

[Menjay7]

Hi! I came across this issue and would love to work on it. I have experience with similar tasks and I'm confident I can investigate, implement a clean solution, and thoroughly test it before submitting a PR. If the issue is still open, I would appreciate it if you could assign it to me. Thank you!

[mubking]

Please I would like to work on this issue

[EbukaMoses]

Hello Maintainer,

I’d like to apply to work on this issue.

I’m Ebuka Moses, a full-stack and blockchain developer with experience building, testing, and maintaining smart contracts, particularly using Rust and blockchain-based architectures. I’m comfortable working with contract logic, validation, access control, persistent storage, and event handling, and I always pay close attention to correctness, security, and edge cases.

I take time to fully understand the issue requirements before implementing a solution, and I ensure my work follows the project’s coding standards. I also write clear, well-tested code and submit clean pull requests with meaningful commits.

I’m confident I can deliver a solid solution that meets the acceptance criteria and adds value to the project.

Thank you for your consideration, and I look forward to contributing.

[Anichris-koded]

As an expert frontend engineer focused on inclusive design, I specialize in transforming digital products into accessible, compliant, and highly usable experiences for everyone. I can revamp your campaign cards to ensure strict adherence to WCAG 2.2 standards across both list and comparison views, bridging the gap between design and functionality. By optimizing semantic HTML structures, implementing robust ARIA attributes for complex screen-reader navigation, ensuring comprehensive keyboard navigability, and refining color contrast and focus states, I will elevate your user experience. The result will be a polished, accessible interface that expands your reach, ensures compliance, and seamlessly serves all users without compromising your visual design.

[jaynomyaro]

Hi! I’m a full-stack developer with a strong blockchain background. I’d love to handle this issue and can deliver a clean, reliable solution. Kindly assign it to me.

[gloskull]

Hello, I have 4 years of experience delivering solutions for projects like this, covering backend, frontend, and smart contract development. After carefully reviewing your requirements, I have a clear understanding of the task and am confident in my ability to deliver a clean, efficient, and thoroughly tested solution on time. I prioritize code quality, maintainability, and industry best practices throughout the development process.
My PR will be submitted in under 10hours.