Having a Little Fun With Custom Focus Styles

Every front-end developer has or will face a scenario where your boss, client or designer thinks the outline of the browser applied on the focus element does not match the UI and asks you to remove it. Or you might even want to remove it yourself.

So you did some research and found that this is strongly unrecommended because there is a reason for the existence of the focal contour: It provides visual feedback for keyboard navigation (using the Tab key) so that users who are unable to use the mouse or who have visual impairments know where they are on the screen.

But that doesn't mean you have to keep this outline. Instead of removing it, replace it with something else. This way, you can keep the interface accessible and get more flexibility about the appearance to better match your UI.

You can first remove the default browser outline by selecting the focus state of the element and applying outline: none . You can then select one of the following options to replace it:

Change background color

This is best for elements that can be filled, such as buttons. Select the focus state of the element and apply a contrasting background color to it. The higher the contrast, the better, because subtle changes may not be enough to be a strong visual cues, especially in cases of color blindness and low vision.

In the example below, the background color and border color both change; you can choose one or both of them.

Click or use the Tab key to focus to see how this state looks.

Change text color

If the element has any text, you can select the focus state and change its color. This also works for icons that use mask-image apps; you can select the icons that are descended from the focus element and change their background color, just like the example button below.

Again, contrast is key. You can also consider using underscores on text links and using them as part of changing state, as stated in the Web Content Accessibility Guide:

Color is not used as the only visual means to convey information, indicate actions, prompt responses, or distinguish visual elements. (Level A) Understanding Success Criteria 1.4.1

Application box shadow

box-shadow property does exactly the same job as the outline, but it is more powerful - you can now control its color, opacity, offset, blur radius, and expansion radius. If border-radius is specified, the box shadow also follows the same rounded corners.

You can be very creative with this technique (but seriously, don't do that):

This works with nearly any type of focusable elements such as toggle buttons, check boxes, radio buttons, and sliders.

Increase element size

As an alternative to color changes, you can also use subtle size modifications as focus feedback. In this example, we use transform: scale .

The key here is subtlety. Extreme size changes can lead to content rearrangement, not to mention a bad experience for those who prefer to reduce exercise.

Copy existing hover style

If the element already has a contrasting hover style, you can simply take that style and apply it to the focus state as well. This is a pretty elegant solution because you don't need to add any new colors or outlines to the interface.

Here is an example where both the focus state and the hover state adopt a style that forms a high contrast with the background of the element's default style:

Attached: Custom default outline

Everything we've seen so far assumes we want to remove the focus profile completely. We don't have to do this! In fact, it is a border that we can customize.

 button:focus {
  outline: 3px dashed orange;
}

If we want to fine-tune the style, this can be written this way:

 button:focus {
  outline-width: 3px;
  outline-style: dashed;
  outline-color: orange;
}

Another superpower we have is the outline-offset property, which is separate from outline shorthand property, but can be used with it to change the position of the focus ring:

 button:focus {
  outline: 3px dashed orange;
  outline-offset: 10px;
}

in conclusion

You can mix and match all of these options to get a custom style that fits every component type in the interface.

It is worth reiterating: when adopting a custom focus state, don't forget to use bright color contrast and other visual cues in addition to colors. Of course, we all want an experience that matches our design, but we can adhere to good accessibility practices along the way. W3C recommends using this tool to test the contrast of color values ​​relative to the WCAG guide.

The above is the detailed content of Having a Little Fun With Custom Focus Styles. For more information, please follow other related articles on the PHP Chinese website!