You have a search bar on your site. You would like to use a

  • 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.
Join our list

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Leave a Comment

Join our list

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Send this to a friend