![]() This is a rather elegant solution, as you don’t have to add any new colors or outlines to the interface. If the element already has a contrasting hover style, you can simply take that style and apply it for the focused state as well. Extreme size changes may cause content reflow, not to mention a poor experience for those who prefer reduced motion. In this example, we’re using transform: scale.Įlements replacing native outline focus with transform scale by Lari ( CodePen. Increase the element’s sizeĪs an alternative to color change, you may also resort to subtle size modification as focus feedback. Toggle and radio button replacing native outline focus with box shadow by Lari ( CodePen. This works for virtually any type of focusable element, like toggles, checkboxes, radio buttons and slides. You can get really creative with this technique (seriously though, don’t do this):Įlements replacing native outline focus with insane box shadow by Lari ( CodePen. And if a border-radius is specified, the box shadow follows the same rounded corners.Įlements replacing native outline focus with box shadow by Lari ( CodePen. The box-shadow property can do exactly the same job as the outline, except it’s much more powerful - you can now control its color, opacity, offset, blur radius and spread radius. Understanding Success Criterion 1.4.1 Apply a box shadow You may also consider using an underline on text links and making it part of the changed state because, as the Web Content Accessibility Guidelines state:Ĭolor is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. This also works for icons applied with mask-image you can select the icon as a descendant of the focused element and change its background color, like the example button below.Įlements replacing native outline focus with text and icon color by Lari ( CodePen.Īgain, contrast is key. ![]() If the element has any text, you can select the focused state and change its color. ![]() In the example below, both background and border color change you may pick either or both.Ĭlick or focus with the Tab key to view how this state looks.Įlements replacing native outline focus with background color by Lari ( CodePen. The higher the contrast the better because subtle changes may not be strong enough visual cues, particularly in cases where with color blindness and low-vision. Select the focused state of the element and apply a contrasting background color to it. This works best for elements that can be filled, such as buttons. Then, you may choose from each of the options ahead to replace it: Change the background color You can start by removing the default browser outline by selecting the focused state of the element and applying outline: none. ![]() That way, you’ll keep your interface accessible and get more flexibility on how it looks, so you can better match your UI. Instead of removing it, you can simply replace it with something else. That doesn’t mean you’re stuck with this outline, though. This button shows a focus state with Chrome’s default outline style. So you do a little research and find out that this is strongly discouraged, because the focus outline is there for a reason: it provides visual feedback for keyboard navigation (using the Tab key), letting users who can’t use a mouse or have a visual impairment know where they are on the screen. Or you might even be looking to remove it yourself. Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI, and asks you to remove it.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |