Now that we’ve Photoshopped what we hope to accomplish with the search area, we set about building it with HTML and CSS. We already have our icon font loaded up, so we place that on the page. Font Explorer X helps us out showing the proper HTML character to use for the magnifying glass.
We add the markup to our header include file and start a brand new Sass file (_search.scss) to write the CSS for this new area. We make sure CodeKit knows about this new file. Unfortunately in these early screencasts CodeKit sometimes takes a while to refresh, which I later discover is just because I have one particular project in there with just way too many files in it. You can fix that by just narrowing down the directory in which you have CodeKit watch.
We absolutely position the search area within the header so that it’s placed at the right and top of the main content area. We adjust the sizing and placement of the magnifying glass by targeting the icon specifically. We position things with percentages so that it fits snugly with our responsive design. We add :hover and :focus states as well so it’s obvious you can click on it.
We finish off by writing some JavaScript that will open and close the search area. We could have had the animations right in the JavaScript (since we are using jQuery), but instead all we do is change class names on the CSS. This is what I like to think of as “state based CSS” where JavaScript just controls class names that declare what state the page (or area) is in, and CSS controls what the page looks like in that state (and how it gets there). This means we’re doing things like transitions in CSS, which is in my opinion where they belong and will be far better long term (i.e. CSS transitions are hardware accelerated while JavaScript transitions are not, they are just rapid iterations of inline styles).
Here comes the accessibility guy ;)
Here’s a few ideas to make the search section accessible:
1.) Use the aria landmark search on the section element.
2.) Wrap the icon span with an
<a>element for native keyboard access.NOTE: At the moment you can’t just use the
tabindex="-1"attribute, with it you still won’t be able to click the “button”..3) Set a descriptive title for the icon/button. This helps low-vision/zoom/elderly/cognitive challenged users that can’t interpret the icon.
4) Since it’s not a normal anchor link, use
role="button"to make screen readers announce it as a button instad of a link.5) Do the thing you taught me. use
aria-hidden="true"on the icon span.6.) Add an accessible description for the button for screen readers.
That’s it for the button.
Now for the actual field and categories
7.) To prevent screen readers from just saying “textfield” and actually say “search, textfield” or even “search forums, textfield”…
I’m running out of time to show code examples but the idea is to put a
<label id="search-label" class="screen-reader">Search</label>somewhere and also use the attributearia-labelledby="search-label"on the search<input/>element. And to use some jQuery magic to add the categories dynamically by using radio boxes instead of links for the different section links and then add the id of that category, likearia-labelledby="search-label search-forums"Hope it all make sense or send me a tweet @DanielGoransson ;)
Hell yeah! That’s what I call a code critique! I’ll go through every bit of it and get it integrated.
Great info Daniel, would you have any suggested reading esp. covering point 7.