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

Login Form

<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
A simple login form with a title, labels for username and password, as well as a login button

This may be review for some of you, but it’s a good opportunity to go over the basics on something we all use about 30 times a day — a login form. First of all, we have an <h2> tag at the top to give our users a solid idea of the purpose of the form. Next we have labels for each input, attaching their “for” attributes to the corresponding “id” for each input. [ For JSX users in React, use “htmlFor” instead of “for” ]. Standard HTML elements and their attributes have a lot of accessibility built in. …

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

Image for post
Image for post
<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 who our users are, and how they interact with the things we make. Between physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed, there is plenty to be considerate of when programming.

Assistive technology can understand and process web content and adapt it for users, but only with a solid core of good semantics and functionality. For developers, it’s not that difficult to implement a good amount of accessibility from the beginning, it all starts with solid html. …

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 type way to fast and pretty soon I have a mess on my hands. So let’s go through our common rails tasks and names.

For this guide I built a playlist app, so you’ll see lots of names like ‘user’, ‘playlist’, and ‘song’.

Rails Generators

rails g model User name

Model names are singular : models represent a single instance. …

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, not making enough money, and slowly turning my passion into an irritation . Attempting to remain comfortable was not working for me, so being uncomfortable was inevitable.

I have depression. My internal thoughts are generally wearisome, so I had built my life to make me feel at home. I rarely put myself in unwelcoming circumstances, just waking up seems to do that for me. Changing careers, therefore, seemed like an insane idea, and caused an incredible amount of anxiety. ‘It’s too late”, “I should have studied CS in college”, or “what could I know about computers when I didn’t own one until 2008” (yes that’s true… not until after I graduated college), have been constant thoughts. …


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