Unlabelled search fields

<input type="search" placeholder="…">
<button type="submit">
Search
</button>
<input aria-labelledby="searchtext" type="search" placeholder="…">
<button type="submit" id="searchtext">
Search
</button>
<input type="text" name="search" aria-label="Search">
<button type="submit">Search</button>
<label for="orb-search-q">
Search the BBC
</label>
<input id="orb-search-q" placeholder="Search" type="text">
<button>Search the BBC</button>
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
<label title="Search Medium">
<span class="svgIcon"><svg></svg></span>
<input type="search">
</label>
<label class="visuallyhidden" for="search-query">Search query</label>
<input id="search-query" placeholder="Search Twitter" type="text">
<span class="search-icon>
<button type="submit" class="Icon" tabindex="-1">
<span class="visuallyhidden">Search Twitter</span>
</button>
</span>
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
<input placeholder="Photos, people, or groups" aria-label="Search" type="text">
<input type="submit" value="Search">
<input type="text" placeholder="Search">
<span class="coreSpriteSearchIcon"></span>
<input tabindex="1" type="text" name="q" id="search_query" placeholder="Search Tumblr" autocomplete="off" required="required">
  • a visually-hidden label element,
  • an aria-label attribute,
  • a title attribute, or
  • associate some text using aria-labelledby.

--

--

--

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

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

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
Jeremy Keith

Jeremy Keith

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

More from Medium

Publishing Storybooks

Why Developers Should Build with Design Systems?

Accessibility: A Developer’s Perspective