I suddenly discovered a very strange problem today. Some websites focusing on CSS, XHTML, Web 2.0 and Web standards are discussing how to remove the dotted box (outline) around the hyperlink when the mouse is clicked, such as outline:none or outline:0 . Maybe sometimes the default appearance of a dotted frame (outline) will affect the appearance, but its existence must have its reason: that is to improve the usability of the website, especially to bring great convenience to people who use keyboard navigation. While we are discussing semantics and ease of use, we are always doing things that run counter to them. Set the link background to red when focus is triggered, etc. Of course, you can design more complex styles as needed, and you can also set focus and hover to the same style. But there is one thing, you cannot block the focus triggering mechanism.
1. Dotted box (outline) brings convenience to keyboard navigation
I have a habit when reading articles: I rarely use the mouse and basically rely on the keyboard. The most used ones are the Tab key, PageUp, PageDown, Enter and the four direction keys. The Tab key is used to navigate hyperlinks. You can switch between different hyperlinks. After selecting a link, press Enter directly to enter (you can now use the Tab key to see the effect on this page). When the Tab key focuses on a link, a dotted frame (outline) will appear around the link, indicating that the link is in focus and can be accessed after confirmation. Of course, many people may say, it’s so convenient to use a mouse, why use a keyboard? Here I would like to give a few reasons.
It is said that one criterion for being a true computer master is whether you can complete all operations without using a mouse. Sometimes when I am reading an article, holding coffee in my right hand and typing the keyboard with my left hand does not affect my reading.
The special needs of special groups of people. Your website is not just for you. You cannot influence how others use your website.
New style when using the Tab key to focus on a link (it may vary in different browsers, but every browser has this function, which shows its necessity)
2. Worse user experience
Use outline:none or outline:0 to remove the outer dotted frame. Although no changes can be seen from the link, at least the link information can be seen from the status bar. But an even worse user experience is to use JavsScript's onfocus event. When the user focuses on a link, it immediately cancels the focus, which means you can never focus on this hyperlink, so if you don't use the mouse, you absolutely can't. Visit any link on this page. Some experts have developed methods to use JQuery to remove outline. If you Google "remove dotted lines from links", you will get tens of thousands of results. It seems that many people need it and are researching it. But he did violate the principle of ease of use of the Web and did not consider the user experience at all.
3. Alternative options
If you really think that the appearance of a dotted frame will affect the appearance, you can definitely have a better choice. That is to use the :focus pseudo-class in CSS. For example using
a:focus { background-color:#f00; }
/*or*/
a:hover, a:focus {text-decoration:underline;}
So never remove the dotted box around the hyperlink, at least not to block the triggering of focus.