The Basics of Building Accessible Forms

Login Form

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

Survey Time

<form>
<h2>Tell us about you</h2>
<fieldset>
<legend>Preferred Drink</legend>
<p>
<input type="radio" name="drink" id="drink_1" value="coffee">
<label for="drink_1">Coffee</label>
</p>
<p>
<input type="radio" name="drink" id="drink_2" value="tea">
<label for="drink_2">Tea</label>
</p>
</fieldset>
<fieldset>
<legend>Preferred Animal</legend>
<p>
<input type="radio" name="animal" id="animal_1" value="cats">
<label for="animal_1">Cats</label>
</p>
<p>
<input type="radio" name="animal" id="animal_2" value="dogs">
<label for="animal_2">Dogs</label>
</p>
<p>
<input type="radio" name="animal" id="animal_3" value="both">
<label for="animal_3">I like both cats and dogs</label>
</p>
</fieldset>
</form>

Checklist

  • Input elements have a corresponding label element
  • Submit buttons have a “type” of “submit”
  • Input elements used as radio buttons are nested inside of fieldset tag
  • Fieldset elements have a corresponding label element

Resources

--

--

--

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

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

Recommended from Medium

Python Project For Beginners Part 1

My learnings as Scrum Master -III

Data Virtualization: A Unified Platform for Insights

CSS: Box-sizing: border-box

The Encroachment of SaaS Platforms and the Threat to Large Enterprise ERP platforms

Why Project Planning is almost the Magic Bullet

Compilation Operating System

Understanding Resource Allocation configurations for a Spark application

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
JD Brewer-Hofmann

JD Brewer-Hofmann

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

More from Medium

7 Tips To Achieve Creative Flow While Working From Home

Three ways developers can help the customer experience in checkout

Developers working on a website

5 Best Figma wireframe plugin To Help You Work Smarter

CS3240 Individual Design Exercise