This blog is part of a continuing series on accessibility, striving to provide a starting point for building common components with accessibility in mind.

<label for="username">Username</label>
<input id="username" type="text" placeholder="spacemanspiff8" title="enter your username here">
<label for="password">Password</label>
<input id="password" type="password" placeholder="******">
<button type="submit">Login</button>
A simple login form with a title, labels for username and password, as well as a login button

This may be review for…

If you’re looking to build a search bar with no label, this is the move

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

Web Accessibility is a form of Universal design — striving to make things accessible to all people, regardless of age, disability or other factors. Not everyone access web content the same way, so ensuring there are little to no barriers to that content is paramount.

It’s important to think about…

a naming convention(s) guide

I began learning rails 10 days ago, and with a coding challenge approaching I noticed my most common errors revolved around the letter S. Rails is built on conventions, and when those conventions are broken, so is your app. The logic behind rails naming conventions seem straight forward, but sometimes…

I gave up my music career, sold my instruments, and enrolled in a coding bootcamp. Am I in over my head?

Right now I’m telling myself, it’s good to be uncomfortable. I started this bootcamp because I was too relaxed in my situation. A situation that was not going anywhere…

JD Brewer-Hofmann

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

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