Try using your own app without a mouse

The last example failed because two parts of the app treated a name differently. A form can also fail someone before they enter a single letter: they cannot find the active field, read its label or reach its button. Put the mouse aside and follow one form with the keyboard.

You know where everything is, and you use a mouse. That makes it easy to overlook the focus outline, the ring showing which control the keyboard is on. It often gets deleted because it looks like a mistake in the design, and it takes the mouseless user with it.

Forms have a quieter version of the same problem. A placeholder that says E-posta inside an empty box looks like a label, but it vanishes the moment someone starts typing, and it is usually pale enough to miss. A real label is one line:

<label for="email">E-posta</label>
<input id="email" type="email" autocomplete="email">

If your design needs a different focus style, replace the outline rather than removing it:

button:focus-visible,
input:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

Now do one check on a form you have built, today. Open it in a browser, put the mouse aside, and press Tab from the top of the page. Every time, you should be able to see where you are. Then pick up the mouse and click the text next to each input. If the label is connected, the cursor jumps into the field. Write down every place where either check failed. Use that list to check the fixes with the same keyboard journey.

Repeat the keyboard journey while a save is pending and after an error. The states from I pressed Save. Did it save? must remain understandable when the person is not following the screen with a mouse.

Try the same journey with someone who has not seen the app before. Watch where they hesitate before explaining what the screen was meant to say.