Focus styling is when an element’s style is changed on focus (when the user interacts with the element via keyboard, click, etc.). It’s a vital accessibility feature so users know which particular clickable element they’re interacting with.
Websites don’t have focus styling by default – the developer must add it. Or, in this case, a tool like Automatic.css adds it for you (yet another thing you don’t have to remember!).
Customizing Focus Styling
You can customize your site’s focus styling in the ACSS Additional Styling panel under Accessibility.
The advantage of
outline is the ability to offset the focus ring from the element in focus. The advantage of the
box-shadow method is that the box shadow will follow curves of elements being focused (where
outline will put a square around rounded elements in many browsers).
You can choose any color for your focus color. The default is your website’s action color.
Remember that you can change the focus color of individual elements using focus classes.
This setting allows you to control the thickness of the focus indicator. Rem units are a good choice here.
This setting is only available when the outline focus style is chosen. It allows you to control the amount of offset – the gap between the focus indicator and the element being focused.