Shulou(Shulou.com)06/03 Report--

This article will explain in detail what the onfocus= "this.blur ()" abhorred by the webmaster is. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

When talking about screen reading software to operate the page, he especially emphasized to our front-end students: what he hates most is that there is an onfocus=this.blur () code on the page link. Where does this start?

(figure 1)

Ladies and gentlemen, do you feel familiar with this code? yes, you know, we often use it to remove the dotted frames that appear on the periphery when the link gets focus (such as figure 1 above). Google, the first dozens of pages are all about this technique of removing dotted frames. But we may never have thought of it before: our line of code has caused great trouble for blind users: it interrupts the Tab path of blind users, causing the Tab cursor to focus on the next controller of the page (links, form fields, object, image map, etc.). The tests are as follows:

The code is as follows:

First link

Second link

This blur link focus loses focus when triggered, js and html are coupled together without compatibility problem is a:focus {outline:none} or

A {outline:none} outline was introduced by css2.1. It is the responsibility of css to remove the visual problems of dotted frames. Ie8+/ff / safari/opera [2] supports whether hidefocus this attribute is a private attribute of ie. [3] ie5+ supports whether a {noFocusLine: _ expression (this.onFocus = this.blur ())} can be processed in batches, but the performance problems of expression can not ignore expression ie6/7 support, ie8+, non-ie do not support

To sum up, the recommended way to remove the dotted frame of links is to use the hidefocus attribute under ie and outline:none under ff/chorme/opera/safari. That is:

Link

A:focus {

Outline:none

}

Students said helplessly that if the tab cannot access all the contents of the page because of onfocus= "this.blur ()", the contention screen reading software will force this attribute to be filtered before reading the page, but if the user triggers this.blur () dynamically in the js, the screen reading software will come up with new tactics to restrain it. This undoubtedly increases the workload of screen reading software development, in order to let blind users visit our website more smoothly, try to avoid using onfocus= "this.blur ()".

Annotation

[1] Safari by default, pressing the tab key will not focus the link, but will focus the form field, which can be turned on in the preferences-Advanced check box "Press tab to highlight everything on the page". Opera is relatively special, it through the shift+ up and down around the arrow keys can be up and down the focus of the focus page.

[2] the so-called dotted wireframe does not appear when clicking on the link (focus and active status) under Opera, so the problem of dotted wireframe of the link under Opera can be ignored. The wireframe generated by Opera through the upper and lower keys of shift+ cannot be removed through outline:none, but Opera supports the attribute outline.

[3] the hidefocus attribute is a private property of ie. Although the hidefocus attribute has two values of true or false, the test result is that the link loses the dotted frame as long as the hidefocus attribute is added, regardless of whether the value of ie5-ie9 is true or false.

This is the end of the article on "what is onfocus=" this.blur (), which the webmaster hates deeply. I hope the above content can be helpful to you, so that you can learn more knowledge. If you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.