onfocus="this.blur()" is hated by blind webmasters

When talking about the screen reading software operation page, he particularly emphasized to our front-end students: what he hates most is the code onfocus="this.blur()" on the page link. Where did this come from?

(Figure 1)

Dear students, does this code look familiar to you? Yes, you know, we often use it to remove the dotted frame that appears around a link when it is in focus (as shown in Figure 1 above). If you google it, you will find that the first few dozen pages are all about the technique of removing the dotted frame. But we may have never thought about this before: this line of code has caused great trouble for blind users: it interrupts the Tab key path of blind users, causing the Tab cursor to be unable to focus on the next controller (link, form field, object, image map, etc.) of the page. The test is as follows:

When you press the Tab key, the first and second links can get the focus normally. When you continue to tab to the third link, tragedy occurs: the focus returns to the first link and cannot be focused on the fourth link. The reason is that when the focus is on the third link, the onfocus="this.blur()" event processing forces the focus to be lost, and the focus returns to the beginning of the document. The result of continuously pressing Tab is that the focus will rotate between the first three links, and the content behind them cannot be accessed using the Tab key [1].

(Figure 2)

So, is there a better way? Basically, adding onfocus="this.blur()" is to remove the dotted frame around the link after it gets the focus (of course, the focus effects in Chrome, Safari, and Opera are different, so let's just call it that here). The W3C article on Outline explains that this dotted box is used to tell users which element on the current page has focus. I think the existence of the dotted box is reasonable, but sometimes you may not be able to avoid certain "visual cleanliness" needs (as shown in Figure 2: the dotted box separates the "product" background from the red block below). The following summarizes several common methods for removing the dotted box:

Based on the above, the recommended method to remove the dotted frame of the link is: use the hidefocus attribute in IE, and use outline:none in FF/chorme/opera/safari. Right now:
<a href="#" hidefocus="true" >Link</a>
a:focus {
outline:none;
}

Yang Yongquan said helplessly that if the tab cannot access the entire content of the page because of onfocus="this.blur()", the screen reader software will forcibly filter out this attribute before reading the page. However, if the user dynamically triggers this.blur() in js, the screen reader software will have to come up with new tricks to restrain it. This undoubtedly increases the workload of screen reading software development. In order to allow blind users to access our website more smoothly, try to avoid using onfocus="this.blur()".

Notes

[1] By default, in Safari, pressing the tab key will not focus links, but will focus form fields. You can enable this feature by checking "Press tab to highlight each item on the webpage" in Preferences-Advanced. Opera is quite special. It can focus the page up, down, left, and right by using the shift+up, down, left, and right arrow keys.

[2] In Opera, no dotted frame will appear when clicking a link (in focus or active state), so the dotted frame issue for links in Opera can be ignored. The wireframe created by Opera using the shift+up, down, left, and right keys cannot be removed by using outline:none, but Opera supports the outline attribute.

[3]The hidefocus attribute is a private attribute of IE. Although the hidefocus attribute has two values: true or false, the test results show that in IE5-IE9, regardless of whether the value is true or false, as long as the hidefocus attribute is added, the link will lose the dotted frame.