A search field element hasn't been labeled. Because of it, screen reader users don't know what the purpose of this field is. Screen readers can read content from the placeholder attribute, but this is an antipattern. Also, you don't use the attribute based on its purpose.
Type of issue
Critical.
How to reproduce
Turn on a screen reader.
Open your project in any browser, for instance, Chrome.
Set focus on the field element by pressing Tab on Windows/MacOS.
Listen to an announcement.
How to fix
Add a label by using the aria-label attribute. It's better to find the proper name, not "search," because you've already used it for the button control.
Description & explanation
A search field element hasn't been labeled. Because of it, screen reader users don't know what the purpose of this field is. Screen readers can read content from the
placeholderattribute, but this is an antipattern. Also, you don't use the attribute based on its purpose.Type of issue
Critical.
How to reproduce
How to fix
Add a label by using the
aria-labelattribute. It's better to find the proper name, not "search," because you've already used it for the button control.Screenshots
WAVE: