It is important that your interface and content can be operated, and navigated by use of a keyboard. Some people cannot use a mouse, or may be using other assistive technologies that may not allow for hovering or precise clicking.

Focus styles

Make sure there is a visible focus style for interactive elements that are navigated to via keyboard input.

The focus-visible pseudo-class can be used to apply styles only when User Agent determines via heuristics that the focus should be made evident on the element.

Make sure the outline has enough contrast on the background color.

*:focus-visible {
  outline-width: 1px;
  outline-color: black;
}

If multiple background colors are used throughout your application, it's good practice to either:

1. Used a double outline with 2 contrasting colors

*:focus-visible {
  outline-width: 1px;
  outline-offset: 1px;
  outline-color: black;
  box-shadow: 0 0 0 2px white;
}

2. Use separate styling depending on the background color

*:focus-visible {
  outline-width: 1px;
  outline-color: black;
}

.focus-invert:focus-visible {
  outline-color: white;
}

Meaningful Sequence

Check to see that keyboard focus order matches the visual layout. Can a person navigating with a keyboard or screen reader move around the page in a predictable way?

https://www.w3.org/WAI/WCAG22/Understanding/meaningful-sequence.html

Remove invisible focusable elements

Remove the ability to focus on elements that are not presently meant to be discoverable. This includes things like inactive drop down menus, off screen navigations, or modals.

https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html