The most beautiful season in Hangzhou, Taobao accessibility to improve the group was fortunate to invite the blind webmaster-------------Yang Yongquan students and we meet face-to-face communication website accessibility problems. Yang classmate use computer must use reading screen software, just like he can not see our faces must rely on the sound to identify us. When talking about reading screen software operation page, he to our front end classmate special emphasis: His most repugnant is the page link has onfocus= "This.blur ()" This code, this from where to say?
(Figure I)
Fellow students, see this code does not feel familiar, right, you know, we often use it to remove the focus of the link when the border appears on the dotted box (pictured above), Google, the first dozens of pages of the talk is the removal of the dotted box tips. But we may never have thought before: This line of code has created a huge problem for blind users: This interrupts the tab path of the blind user, causing the tab cursor to focus on the next controller (Link, form field, object, image map, and so on) of the page. The test is as follows:
<body>
<a href= "#" > The first link </a>
<a href= "#" > The second link </a>
<a href= "#" onfocus= "This.blur ();" > A third link </a>
<a href= "#" > Fourth link </a>
<a href= "#" > Fifth link </a>
<a href= "#" > Sixth link </a>
</body>
Press the TAB key, the first and second links are normal to get the focus, continue to tab to the third link when the tragedy occurs: the focus will return to the first link, but not to the fourth link, because when focusing to the third link, onfocus= "This.blur ()" Event handling forces the loss of the focus back to the beginning of the document. The result of pressing tab is that the focus is on the front three link wheels, and the following contents cannot be accessed via the TAB key [1].
(Figure II)Well, is there a better way? From the root, add onfocus= "This.blur ()" is to remove the link to get focus after the periphery of the dotted box (of course, Chrome, Safari, opera under the effect of different, this is called bar). The outline article explains that the dotted box tells the user the element that the current page gets the focus. I think that the existence of the dotted box has its rationality, but sometimes you may not be able to avoid some "visual cleanliness" requirements (such as figure two: the Dotted box to the "commodity" background and the following red color block separated), the following summarized the removal of the dashed box several common methods:
| ways to remove dashed boxes | Pros and cons | compatibility | Whether to break tab |
|---|---|---|---|
| <a href= "#" onfocus= "This.blur ()" >this blur</a> | Link focus loses focus when triggering, JS and HTML are coupled together | No compatibility issues | Is |
| A:focus {Outline:none} or A{outline:none} |
Outline is introduced by css2.1, removing the visual problems of the dotted box is the responsibility of CSS | Ie6/ie7 not supported, Ie8+/ff/safari/opera[2] Support | Whether |
| <a href= "#" hidefocus= "true" >hidefocus</a> | This property is the private property of IE [3] | ie5+ Support | Whether |
| A {nofocusline:expression (This.onfocus = This.blur ())} | Can be processed in batches, but the performance of expression can not be neglected | Expression IE6/7 Support, ie8+, non ie not supported | Is |
Above all, the recommended way to remove the dotted box is: ie under the Hidefocus property, Ff/chorme/opera/safari under the Outline:none. That
<a href= "#" hidefocus= "true" > Links </a>
A:focus {
Outline:none;
}
Yang Yongquan classmate reluctantly said, if the page because onfocus= "This.blur ()" lead to Tab can not access all the content of the page, competing for read screen software in reading the page will force filter out this attribute, but if the user is in JS dynamic trigger This.blur (), The screen-reading software has to be restrained by a new recruit. This undoubtedly increased the reading screen software development workload, in order to allow the blind users to more smoothly visit our website, try to avoid the use of onfocus= "This.blur ()" Oh.
Comments
[1] Safari by default, pressing the TAB key is not the focus link, but it can be turned on by highlighting the form field and opening the feature in Preferences-Advanced Check tab to highlight each item on the page. Opera is more special, it through the shift+ up and down the key to the top and bottom of the focus page.
[2] Under Opera click on the link (focus and active state) will not appear when the so-called dotted box, so opera under the link to the dotted box problem can be counted. Opera through the shift+ up and down keys produced by the wire frame through the outline:none can not be removed, but opera support outline this attribute.
The 3]hidefocus property is the private property of IE, although the Hidefocus property has a value of true or false two, but the test result is IE5-IE9 regardless of its value is true or FALSE, the link will lose the dotted box if the Hidefocus property is added.
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
