The outline is an essential visual cue for users who navigate websites using a keyboard. When you remove or hide the outline, it becomes harder for these users to see which element is currently focused.
If you decide to remove the default outline via CSS, it is important to provide a suitable alternative style to indicate the focused element. You could use a different visual indication, such as a change in border or background color, to clearly show users which element is currently active or has focus. This way, you can maintain accessibility while achieving your desired aesthetic.
Thanks! It visually just looks bad, so I’m gonna remove it. Thanks! The CSS input, should that only be applied on the navigation part or is there a general overall place I’d type it in?
This CSS:
a:not(.ab-item):not(.screen-reader-shortcut):active, a:not(.ab-item):not(.screen-reader-shortcut):focus {
outline: none;
}
