They don’t say you can’t remove it, they just say if you remove it, provide an alternative for focus state, to make it obvious which element is focused. No focused element should ever be unnoticed.
Some users can only use the keyboard to navigate and they’re not blind, so they need to see what’s focused in order to activate the right one.
So, again, elaborate… I’m interested in reading your views.
I disagree with them on the urgency in not removing the outline.
If there’s a link in some text, it should be highlighted of course. I doubt anyone would create links that would be indistinguishable from text. In my opinion, what conveys its identity as a link is not the outline, but being different from text. Therefor changing the background, color, weight, font, etc, can transmit to the user the link property.
Also, usability isn’t everything. Design might have a higher stake-hold on the page purpose. Depends on its function. Saying, as they were, that “There’s no real reason to remove the outline (…)” is simply not true. There are a lot of them and that is why people remove it.
they’re not telling you to put an outline on every link right from the start.
You should enable outline just on the focus of the link.
This is because users need to be aware of what element is focused on…
Advanced users use keyboard navigation (tab) all the time. If you remove them the ability to follow which element is focused, you’re frustrating them.
This happens to me a lot when I’m logging into a website and use keyboard to tab-tab-tab to the checkbox that will “Remember me” and then the submit button. If I don’t know which element is focused, I have no idea if I’m activating the checkbox or clicking on the “Forgot password” link.
Of course you have plenty ways of making clear what is a link and what it’s not. But try to navigate through a page with a { outline: none; } and then try adding a:focus { outline: 1px dotted #999; } (or any other style). 🙂
Comments
3 responses to “a { outline: none; } DON’T DO IT!”
Elaborate, please. 🙂
They don’t say you can’t remove it, they just say if you remove it, provide an alternative for focus state, to make it obvious which element is focused. No focused element should ever be unnoticed.
Some users can only use the keyboard to navigate and they’re not blind, so they need to see what’s focused in order to activate the right one.
So, again, elaborate… I’m interested in reading your views.
Thanks.
I disagree with them on the urgency in not removing the outline.
If there’s a link in some text, it should be highlighted of course. I doubt anyone would create links that would be indistinguishable from text. In my opinion, what conveys its identity as a link is not the outline, but being different from text. Therefor changing the background, color, weight, font, etc, can transmit to the user the link property.
Also, usability isn’t everything. Design might have a higher stake-hold on the page purpose. Depends on its function. Saying, as they were, that “There’s no real reason to remove the outline (…)” is simply not true. There are a lot of them and that is why people remove it.
Artur,
they’re not telling you to put an outline on every link right from the start.
You should enable outline just on the focus of the link.
This is because users need to be aware of what element is focused on…
Advanced users use keyboard navigation (tab) all the time. If you remove them the ability to follow which element is focused, you’re frustrating them.
This happens to me a lot when I’m logging into a website and use keyboard to tab-tab-tab to the checkbox that will “Remember me” and then the submit button. If I don’t know which element is focused, I have no idea if I’m activating the checkbox or clicking on the “Forgot password” link.
Of course you have plenty ways of making clear what is a link and what it’s not. But try to navigate through a page with a { outline: none; } and then try adding a:focus { outline: 1px dotted #999; } (or any other style). 🙂