How to Create an Accessible Search Bar Without a Label

<form role='search'>
<label for="searchBar" class="sr-only">Search Term</label>
<input id="searchBar" type="text" placeholder="Search Term">
<button>Search</button>
</form>
/* CSS */
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
<form role='search'>
<label htmlFor="s" className="sr-only">Search Term</label>
<input id="s" type="text" name="search" placeholder="Search Term"/>
<button>Search</button>
</form>
<form role='search'>
<input id="searchBar" type="text" placeholder="Search Term" title="Search Term">
<button>Search</button>
</form>
<form role='search'>
<input id="searchBar" type="text" placeholder="Search Term" aria-label="Search Term">
<button>Search</button>
</form>
<form role='search'>
<label for="searchBar" >Search Term</label>
<input id="searchBar" type="text">
<button>Search</button>
</form>

Additional Resources

--

--

--

Full-time Software Engineering Student at Flatiron School, musician, and lover of plants

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Designing a simple website using Bootstrap

Configuring Frontend & Redux — MERN Blog Application — Part 3

Frontend-Design Knowledge Sharing #30

A static website — simplicity, performance, and SEO that fit any project

Flutter vs React Native For Cross-Platform Development

Compare Flutter vs React Native for Cross-platform development

Given a string of parentheses, determine if its valid (well-formed)

Given a string of parentheses, determine if its valid (well-formed)

stringifyJSON and parseJSON

Common Javascript Interview Question

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
JD Brewer-Hofmann

JD Brewer-Hofmann

Full-time Software Engineering Student at Flatiron School, musician, and lover of plants

More from Medium

How not to pair program

In order to be more complicated, here are new insights into the Software Product Manager position

Did I make it?

Designing A Logo for A Client

A sneak peek into OutSystems UI 2.8.0

Outsystems UI 2.8.0