You’ve read about buttons and forms and ARIA. Your head is full of guidelines and best practices. But right now, you just want to make something better.

Good news: you can. In the time it takes to read this chapter, you could fix something real.

Pick One. Do It Today.

1. Replace one fake button with a real one

Find this in your code:

<div class="button" onclick="doThing()">Click me</div>

Replace it with this:

<button onclick="doThing()">Click me</button>

Time: 30 seconds
Impact: Keyboard users can now use it. Screen readers announce it correctly.
You fixed: A fundamental barrier

2. Add a label to one form field

Find this:

<input type="email" placeholder="Email">

Make it this:

<label for="email">Email</label>

<input type="email" id="email" placeholder="Enter your email">

Time: 1 minute
Impact: Screen readers know what the field is. Clicking the label focuses the field. The field has context even after typing.
You fixed: A confusing form

3. Make your focus visible

Add this to your CSS:

/* Erik Kroes' Universal Focus State */

:focus {

  outline: .375rem double black;

  box-shadow: 0 0 0 .25rem white;

  border-radius: .125rem;

}

Time: 30 seconds
Impact: Keyboard users can see where they are on any background.
You fixed: Invisible navigation

4. Add autocomplete to one form

Find your login/signup form. Add these attributes:

<input type="email" autocomplete="email">

<input type="password" autocomplete="current-password">

<input type="text" autocomplete="name">

Time: 2 minutes
Impact: Password managers work. Users save time. People with motor impairments type less.
You fixed: Unnecessary friction

5. Test one page with your keyboard

  1. Unplug your mouse (or just don’t touch it)
  2. Try to use your page with only Tab, Shift+Tab, Enter, and Arrow keys
  3. Note the first thing you can’t do
  4. Fix that thing

Time: 5 minutes to test, varies to fix
Impact: You’ll find issues no automated tool would catch.
You fixed: Whatever was broken (and trust me, something was)

The Checklist You’ll Actually Use

Print this. Tape it to your monitor. Check it before you commit:

Before you push that code:

  • Can I Tab to everything interactive?
  • Can I see where my focus is?
  • Do images have alt text (or empty alt=”” if decorative)?
  • Does every form input have a label?
  • Can I use this without a mouse?

Takes 2 minutes. Catches 80% of problems.