Keyboard Focus Indicator - Buttons

Visual Example


Default State

Keyboard Focus State

Acceptance Criteria

A sighted keyboard only user typically uses the “TAB” key on the keyboard to navigate through form elements such as form fields and buttons.

When an item has keyboard "focus", it can be activated or manipulated with the keyboard. 

A sighted keyboard only user must be provided with a visual indicator of the form element that currently has keyboard focus. For example an emphasized border or outline.

As a sighted keyboard only user I should:

  • be provided with a visual indicator of the button that currently has keyboard focus

  • be provided with a keyboard focus indicator that is highly visible/emphasized and that has sufficient color contrast between foreground and background

Markup and Code

Browsers will by default provide a default keyboard focus indicator (different treatment depending on the browser).

However, often times the default keyboard focus indicator is not highly visible or does not provide sufficient color contrast.

You can use CSS to make the focus indicator more visually apparent and keyboard-friendly.


<button>Submit</button> <button>Add Hours</button> <button>Next</button>


button:focus { border: 5px solid #000000; }

View HTML markup on github