You have a search bar on your site. You would like to use a to make the word “Search” visible to screen readers, but you don’t want to display the word “Search” on the screen. How can you accomplish this?

Assign an ARIA state of “hidden” to the label, like this: <label state=”hidden”>Search</label> <input type=”text” name=”search” id=”search” />
Use the built-in WordPress CSS class .screen-reader-text to hide the text from screen, like this: <label class=”screen-reader-text”>Search</label> <input type=”text” name=”search” id=”search” />
Create a custom CSS class to set a large negative value to the text-indent property to hide the text off screen, like this: <label class=”hide-this”>Search</label> <input type=”text” name=”search” id=”search” />
The majority of users do not require a screen reader. Remove the label entirely.