Responsive Progressive Accessible Vanilla Search
I received a design for a project recently that called for a search field hidden behind a single icon — no visible label text, no visible field, no submit button.
I opted to build one I could re-use. I’ve used this approach before, and for those who are practicing atomic design, this could be considered a molecule as Brad Frost demonstrates in one animated (inaccessible and low-contrast) GIF. I figured a post describing it would be useful to others.
div in the
form is simply a container for
role="search", because it is not allowed on the
form itself (updated as of 12/16/15, this prohibition will be changing in the specs and validator soon).
The search icon (an SVG with alternative text in my version) requires some interaction in order to be of use per the design. The
label element is a natural for this as it passes focus to the associated form field, saving a tab or click or tap.
I check for a blank search field to determine whether or not to keep the submit button (also an SVG with alternative text in my version) as the next tab-stop by manipulating the
:focus selectors to make the form usable (if a bit ugly).
Similarly, if the CSS doesn’t load, the user will get a standard unstyled form that functions just as one expects. It may look ugly, but that’s fine. The SVG is really the only thing at risk of being too big or too small (depending on your browser) as the CSS controls its sizing.
The script uses one function and some event listeners. All you have to pass is the
id of the search field and it will handle the rest. While I am sure it can be cleaned and/or simplified, it tested well.
I set the
placeholder text to have sufficient contrast with the background color using prefixed selectors for each of Chrome, Internet Explorer and Firefox. I also adjust the
opacity for Firefox thanks to a tip from PPK.
button and the
label are both SVG, allowing me to scale it cleanly and easily style any color changes. While I have a
description in the SVG to be used as the accessible name, I override them (just in case the SVG is used for other things) with an
If you zoom the page, then the form and its controls all scale as well, though the media queries may not play as well if you both scale the
font-size on the
body and zoom.
I discovered some interesting quirks in browser behavior, my favorite being that Safari 6 will not draw an SVG called by the
use element unless the SVG appears before the
use on the page. I still have to figure out why IE and Edge are putting extra tab-stops on the page.
Embedded below is a responsive progressively-enhanced accessible search control with no external dependencies. You can also visit it directly to play with the code yourself.
See the Pen Keyboard-Friendly Accessible Search by Adrian Roselli (@aardrian) on CodePen.
There’s always room for improvement, so if you see something that can be cleaned up or you find something causing problems then ping me on the Twitters or leave a comment.
Some Initial Feedback
Some Later Feedback