Five Minutes to Better

Or: Quick wins that actually matter

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.