How to Implement Keyboard-Only Focus Styles and Maintain Accessibility?

Implement Keyboard-Only Focus Styles

Background:
You may not prefer the default focus styles on elements. However, you still want users with keyboard accessibility to see the focus ring. Maintaining accessibility while customizing focus styles can be challenging. This article explores a solution to enable focus styles only when using a keyboard.

Solution:

1. Remove Default Focus Styles:

Use CSS to remove default focus styles from all focusable elements. This prevents the confusing styling when focus is not desired.

2. Create a Custom Focusable Element:

For container elements like spans or divs, use the tabindex attribute to make them focusable.

3. Apply Custom Focus Styles:

a. Inner Element Focus:

• Add focus styles to the inner element within the container element.
• This ensures focus styles are visible in elements with multiple layers.

b. Outer Element Focus:

• Add event listeners to the outer element to remove the focus ring on mouse click or touch.
• This maintains accessibility while preventing unnecessary focus styles during mouse interactions.

Example Code:

<code class="css">button, a, span {
  -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;
}

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

.btn:focus,
.btn__content:focus {
    outline: none;
}</code>

<code class="html"><button id="btn" class="btn" type="button">
    <span class="btn__content" tabindex="-1">
        I'm a button!
    </span>
</button></code>

Conclusion:
By implementing custom focus styles on a nested inner element and removing default focus styles from the outer element, you can enable keyboard-only focus styles. This allows you to maintain accessibility while customizing the appearance of focus.

The above is the detailed content of How to Implement Keyboard-Only Focus Styles and Maintain Accessibility?. For more information, please follow other related articles on the PHP Chinese website!