How Can I Disable Focus Styles While Retaining Keyboard Accessibility?

Can I Disable Focus When It's Not Needed?

You want to disable focus when it's not needed because you don't like how your navigation looks when the focus is on it. It uses the same style as .active and it's confusing. However, you don't want to get rid of it for people who use a keyboard.

The Issue May Be Solved

Some posters have mentioned the :focus-visible pseudo class, which now has decent browser support. As per the spec, browsers should now only indicate focus when it is helpful to the user, such as when the user interacts with the page via a keyboard or some other non-pointing device.

This means that in most browsers, when a user clicks/taps a button (or another focusable element), the User Agent won't show the focus ring even though the button is focused, because in this case the focus ring isn't helpful to the user.

Backwards Compatibility

The possible problem with using :focus-visible like this is that browsers which don't support it will show the default focus ring, which may not be clear or visible depending on the design.

Original Answer

If the :focus-visible solution isn't sufficient for backwards compatibility, you can achieve keyboard-only focus styles for buttons, links, and other container elements with the following solution:

button {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
}

.btn {
  all: initial;
  margin: 1em;
  display: inline-block; 
}

.btn__content {
  background: orange;
  padding: 1em;
  cursor: pointer;
  display: inline-block;
}


/* Fixing the Safari bug for `<button>`s overflow */
.btn__content {
    position: relative;
}

/* All the states on the inner element */
.btn:hover > .btn__content  {
    background: salmon;
}

.btn:active > .btn__content  {
    background: darkorange;
}

.btn:focus > .btn__content  {
    box-shadow: 0 0 2px 2px #51a7e8;
    color: lime;
}

/* Removing default outline only after we've added our custom one */
.btn:focus,
.btn__content:focus {
    outline: none;
}</button>

This technique places all styles on the inner element of the container, preventing focus styles from appearing when the mouse is used.

The above is the detailed content of How Can I Disable Focus Styles While Retaining Keyboard Accessibility?. For more information, please follow other related articles on the PHP Chinese website!