Hi there,
I was wondering if anyone has any thoughts of removing the outlines on links seen in browsers? I don’t really like them as they affect the visual of my website, but do they actually provide any use for usability?
Thanks!
Hi there,
I was wondering if anyone has any thoughts of removing the outlines on links seen in browsers? I don’t really like them as they affect the visual of my website, but do they actually provide any use for usability?
Thanks!
Yes. They provide important feedback to anybody navigating via keyboard. (They’re especially important if, as seems too often to be the case, the developer has omitted to provide the same styles for :focus as for :hover.)
If you really don’t like the look of it, the answer is not to remove, but replace the styling.[quote=“TechnoBear, post:2, topic:258508”]
provide the same styles for :focus as for :hover.
[/quote]
This is a good way to do it. I often pair :hover
selectors with :focus
when styling links. Eg:-
nav a:hover,
nav a:focus {
background: #fd0; /* Give it a visible style */
color: #d00;
outline: none; /* to remove the outline */
}
They’re a vital accessibility feature so must not be removed unless you want to upset people.
I don’t understand what you mean when you say “I don’t really like them as they affect the visual of my website” - outline/focus indicators are part and parcel of how some page elements are supposed to work, without sounding rude you need to just deal with it
As said, though, indicating :focus
state doesn’t have to be done with an outline. I often either use a different outline color that matches the site colors or remove the outline and use a unique color just for the focus state, like a different link color. I’m not too keen on having the hover color the same as the focus color, though, as hover and focus are two separate things, which users will often want to be able to tell apart.
I think it depends on the context of the elements. With <a>
elements in a menu for example, I would see focus (for a keyboarder) as an equivalent to a mouse user’s hover. It’s saying “This is where you are on the navigation, this item is primed and ready to activate”. You are giving the exact same message about the element to either type of user. I would maybe think it more confusing to differentiate between them.
But in the context of something like input elements in a form, hover and focus do have totally different meanings and would not be paired.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.