Skip to content

Improve accessibility for icon-only SVG buttons - #153

Merged
komalharshita merged 3 commits into
komalharshita:mainfrom
jaygaikar-09:fix-svg-accessibility
May 24, 2026
Merged

Improve accessibility for icon-only SVG buttons#153
komalharshita merged 3 commits into
komalharshita:mainfrom
jaygaikar-09:fix-svg-accessibility

Conversation

@jaygaikar-09

Copy link
Copy Markdown
Contributor

Summary [required]

Improved accessibility for icon-only interactive elements by adding appropriate ARIA attributes in templates/project.html and templates/index.html.

Decorative SVG icons now include aria-hidden="true" so screen readers ignore non-informative visual elements. Additionally, icon-only buttons and links now have meaningful aria-label attributes to provide accessible descriptions for assistive technologies.

These changes improve screen reader compatibility without affecting the visual UI, styling, or existing functionality.

Related Issue [required]

Closes #86

Type of Change [required]

  • Bug fix — resolves a broken behaviour
  • Feature — adds new functionality
  • Data — adds new projects to data/projects.json
  • Documentation — updates docs, README, or code comments only
  • Style — CSS or visual changes only, no logic change
  • Refactor — restructures code without changing behaviour
  • Test — adds or updates tests

What Was Changed [required]

File Change made
templates/project.html Added aria-label attributes to icon-only buttons and links
templates/project.html Added aria-hidden="true" to decorative SVG icons
templates/index.html Added aria-hidden="true" to decorative SVG icons

How to Test This PR [required]

  1. Clone this branch:
    git checkout fix-svg-accessibility

@vercel

vercel Bot commented May 16, 2026

Copy link
Copy Markdown

@jaygaikar-09 is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

@komalharshita

Copy link
Copy Markdown
Owner

@jaygaikar-09 resolve the merge conflicts

@komalharshita komalharshita added need review Further information is requested gssoc-2026 labels May 17, 2026
@jaygaikar-09

Copy link
Copy Markdown
Contributor Author

@komalharshita Done!!

@komalharshita

Copy link
Copy Markdown
Owner

@jaygaikar-09 please check again

@jaygaikar-09

Copy link
Copy Markdown
Contributor Author

@komalharshita Now everything looks fine ig

@komalharshita komalharshita left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good accessibility-focused contribution overall. The PR correctly improves accessibility for icon-only interactive elements by adding meaningful aria-label attributes and appropriately marking decorative SVGs with aria-hidden="true".

The implementation is well scoped, avoids unrelated UI/CSS changes, and follows established accessibility best practices without affecting existing functionality or layout behavior.

I also verified that the changes are semantic-only, which keeps regression risk low while meaningfully improving screen-reader compatibility and assistive technology support.

Minor future enhancement ideas could include tooltip/focus-visible consistency for icon-only actions, but the current implementation is solid and merge-ready.

Approved for merge.

@komalharshita
komalharshita merged commit f742111 into komalharshita:main May 24, 2026
7 of 8 checks passed
@komalharshita komalharshita added type:bug Something isn't working level:intermediate quality:clean gssoc:approved and removed need review Further information is requested ui labels May 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add title attribute to all icon-only SVG buttons for screen reader compatibility

2 participants