Description
I noticed that many buttons use the same accessibility label:
aria-label="Action button"
This becomes a problem when the button already has visible text such as "Submit Project", "Sign In", "Save", or "Next Step".
For screen reader users, the aria-label takes priority over the visible text. Instead of hearing what the button actually does, they only hear "Action button", making navigation much more difficult and reducing the overall accessibility of the application.
Why This Matters
Users relying on screen readers should be able to understand the purpose of a button without guessing. Generic labels make multiple buttons sound identical, even when they perform completely different actions.
This can create confusion and negatively impact accessibility compliance.
Examples
A few places where this appears:
src/components/home/ResourcesTabs.tsxsrc/components/submit/SubmitWizard.tsxsrc/app/notifications/page.tsxsrc/app/community/page.tsxsrc/app/error.tsxsrc/app/community/view/client.tsx
Current Example
<Button aria-label="Action button">
Submit Project
</Button>
A screen reader will announce:
"Action button"
instead of:
"Submit Project button"
Suggested Fix
For buttons that already contain descriptive text, remove the generic aria-label entirely and let the visible text act as the accessible name.
<Button>
Submit Project
</Button>
For icon-only buttons, use a meaningful label that describes the action:
<button aria-label="Close modal">
<XIcon />
</button>
<button aria-label="Search">
<SearchIcon />
</button>
Acceptance Criteria
Description
I noticed that many buttons use the same accessibility label:
This becomes a problem when the button already has visible text such as "Submit Project", "Sign In", "Save", or "Next Step".
For screen reader users, the
aria-labeltakes priority over the visible text. Instead of hearing what the button actually does, they only hear "Action button", making navigation much more difficult and reducing the overall accessibility of the application.Why This Matters
Users relying on screen readers should be able to understand the purpose of a button without guessing. Generic labels make multiple buttons sound identical, even when they perform completely different actions.
This can create confusion and negatively impact accessibility compliance.
Examples
A few places where this appears:
src/components/home/ResourcesTabs.tsxsrc/components/submit/SubmitWizard.tsxsrc/app/notifications/page.tsxsrc/app/community/page.tsxsrc/app/error.tsxsrc/app/community/view/client.tsxCurrent Example
A screen reader will announce:
instead of:
Suggested Fix
For buttons that already contain descriptive text, remove the generic
aria-labelentirely and let the visible text act as the accessible name.For icon-only buttons, use a meaningful label that describes the action:
Acceptance Criteria
aria-label="Action button"attributes from buttons with visible text.