Search button lacks accessible name
Closed this issue · 6 comments
Description
According to a recent Lighthouse report, the search button on the website does not have an accessible name, causing it to be announced as "button" by screen readers. This makes the button inaccessible to users who rely on screen readers for navigation.
Impact
Without an accessible name, users who rely on screen readers may be unable to understand the purpose of the search button and interact with it effectively. This creates a barrier to accessibility and a poor user experience for a portion of the website's audience.
Affected Element
The failing element identified by the Lighthouse audit is:
<button class="SearchBar-module--submit--tvao8">
Proposed Solution
To resolve this issue, the search button should be given an accessible name that accurately describes its purpose. This can be achieved by adding a aria-label attribute to the button element, or by including text within the button that will be read by screen readers.
For example:
<button aria-label="Submit search" class="SearchBar-module--submit--tvao8">Submit search</button>
Lighthouse report
Here is a screenshot of the original Lighthouse report:
Hi @SableRaf, I am interested in contributing to this issue. Can you please explain what exactly is the purpose of this search button so that I can come up with a easy and accessible solution for this?
Hey @SableRaf, I am interested in contributing, I've set up the website locally and am almost done with solving the issue.
Hey @kushalnl7, can you please look for another issue, as I am almost done working on it?😀
Ohh okay @adityaj07 .
Thank you both for your offer to contribute! I have assigned @adityaj07 since they seem already pretty far along.
@kushalnl7 you may want to look at this similar issue: #425