Onfocus = "This. Blur ()" is the code familiar? That's right. We often use it to remove the dotted box that appears on the periphery when the link gets the focus (1). Google, the previous dozens of pages Talk About This dotted box removing technique. But we may have never thought about it before: This line of code has brought huge troubles to blind users: This has interrupted the tab key path of blind users, as a result, the tab cursor cannot focus on the next controller of the page (links, form fields, objects, and image map ). The test is as follows:
<Body>
<A href = "#"> first link </a>
<A href = "#"> second link </a>
<A href = "#" onfocus = "This. Blur ();"> third link </a>
<A href = "#"> fourth link </a>
<A href = "#"> fifth link </a>
<A href = "#"> sixth link </a>
</Body>
Press the tab key, and the first and second links can get the focus normally. When the tab continues to the third link, the tragedy occurs: At this time, the focus will return to the first link, however, you cannot focus on the fourth link because onfocus = "this. blur () "event processing forcibly triggers defocus, and the focus is returned to the beginning of the document. The result of pressing the tab repeatedly is that the focus turns to the first three links, and the subsequent content cannot be accessed through the tab key [1].
So, is there a better way? From the root, add onfocus = "this. blur () "is used to remove the external dotted boxes after the link gets the focus (of course, the focus effects in chrome, Safari, and opera vary, so let's just call it here ). The W3C article on outline describes the elements used to indicate that the current page gets the focus. I think the existence of dotted boxes is rational, but sometimes you may not be able to circumvent some "visual cleanliness" requirements (2: the dotted box separates the background of the item from the red color block below. The following describes several common methods to remove the dotted box:
| Methods for removing dashed boxes | Advantages and disadvantages | Compatibility | Interrupt tab? |
|---|---|---|---|
| <A href = "#" onfocus = "This. Blur ()"> This blur </a> | When link focus is triggered, the focus is lost. js and HTML are coupled. | No compatibility issues | Yes |
| A: Focus {outline: None} or A {outline: None} |
Outline is introduced by css2.1 to remove the visual problems of dashed boxes. It is the responsibility of CSS. | IE6/IE7 not supported, IE8 +/FF/Safari/opera [2] supported | No |
| <A href = "#" hidefocus = "true"> hidefocus </a> | This attribute is a private attribute of IE [3] | Ie5 + support | No |
| A {nofocusline: expression (this. onfocus = This. Blur ())} | Batch Processing is supported, but the performance problem of expression cannot be ignored. | Expression IE6/7 is supported. IE8 + and non-ie are not supported. | Yes |
Based on the above, we recommend that you use the hidefocus attribute in IE and outline: none in FF/chorme/Opera/safari. That is:
<A href = "#" hidefocus = "true"> link </a>
A: Focus {
Outline: none;
}
Or use JS, the Code is as follows :( For details, please refer to http://www.mikesmullin.com /? P = 23)
1 <script type="text/javascript">//<!-- 2 var runOnLoad = new Array(); // for queuing multiple onLoad event functions 3 window.onload = function() { for(var i=0; i<runOnLoad.length; i++) runOnLoad[i]() } 4 // hide dotted :focus outlines when mouse is used 5 // but NOT when tab key is used 6 if(document.getElementsByTagName) 7 for(var i in a = document.getElementsByTagName('A')) { 8 a[i].onmousedown = function() { 9 this.blur(); // most browsers10 this.hideFocus = true; // ie11 this.style.outline = 'none'; // mozilla12 }13 a[i].onmouseout = a[i].onmouseup = function() {14 this.blur(); // most browsers15 this.hideFocus = false; // ie16 this.style.outline = null; // mozilla17 }18 }19 //--></script>
Reluctantly, if the page is caused by onfocus = "this. "Blur ()" causes the tab to be unable to access all content on the page. The read screen software will forcibly filter this attribute before reading the page. However, if the user dynamically triggers this in JS. blur (), read screen software has to recruit new restraint. This undoubtedly increases the development workload of the screen reading software. In order to allow blind users to access our website more smoothly, try to avoid using onfocus = "This. Blur.
Note
[1] by default, clicking the tab key will not focus on the link, but will focus the form field, in preference settings-advanced, click "press tab to highlight each item on the Web page" to enable this function. Opera is quite special. It can focus the page to the top, down, left, right, and right through SHIFT +.
[2] When you click a link under Opera (focus and active status), the so-called dotted box is not displayed, so the dotted box problem of The Link under opera is negligible. Line frames generated by SHIFT + up/down keys are not removed by outline: none, but opera supports the outline attribute.
[3] The hidefocus attribute is the private attribute of IE. Although the hidefocus attribute has both true and false values, the test result is that the ie5-ie9, whether its value is true or false, is added as long as the hidefocus attribute is added, the link will lose the dotted box.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
