Skip to content

feat: Add accessibility support for reduced motion and screen readers in SVG badges #1345

@sonusharma6-dsa

Description

@sonusharma6-dsa

CommitPulse SVG badges currently use animations (radar scan line, glow effects, pulsing indicators) but lack accessibility features for users who prefer reduced motion or use screen readers.

Current State:

  • SVG animations use native tags without respecting user's motion preferences
  • Only basic <title> tags are included for accessibility
  • No ARIA labels or roles for screen reader optimization
  • No reduced motion media query support in the SVG

Proposed Solution:

  1. Add prefers-reduced-motion media query detection in the SVG CSS
  2. Provide ARIA labels and roles for key interactive elements
  3. Add descriptive tags for screen readers
  4. Make animations optional via a new URL parameter (e.g., &animations=false)
  5. Ensure color contrast ratios meet WCAG AA standards for all themes

Impact:

  • Makes CommitPulse inclusive for users with vestibular disorders or motion sensitivity
  • Improves screen reader experience for visually impaired users
  • Aligns with modern web accessibility standards (WCAG 2.1)

Priority: Medium (enhancement, not blocking)

Metadata

Metadata

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions