Imagine that you put an important content in a pop-up window without gathering it. What makes it possible to use screen readers? The pop-up window can be found only when the tab ends and the tab continues. Should this pop-up window provide better accessible support for the pop-up menu? This article involves three common pop-up windows:
Window. open the new browser window
// Js
Document. getElementById ('theframework'). src = '/target.html'
3. the pseudo pop-up window created by page dom: Use To hide. The link uses the anchor.
The Code is as follows:
[Open current page DOM]
... A lot of things are separated in the middle...
Content
Ii. In most cases
In the case of a large number of cases, the user's browser enables JavaScript. What we need to do is: focus on the pop-up window and access the content in the first tab. I have heard of it. It's quite simple, hub? First look at the DEMO:
Preview: http://demo.jb51.net/js/2011/popmenu_focus/ "target = _ blank> accessible pop-up menu/window
1. window. open the new browser window: focus on the new window.
The Code is as follows:
// Reference from: QuickMode-popups
Function popitup (url ){
Newwindow = window. open (url, 'name', 'height = 200, width = 150 ');
If (window. focus ){
// Focus to the new window
Newwindow. focus ();
}
// Block the default action of the trigger
Return false;
}
2. Created window: After debugging for a long time, IE8/9 needs to wait until iframe onload is successful and setTimeout comes to hack; firefox cannot use ifrcontentWindow. focus (), but can only use iframe. focus (). In combination, such code is required:
The Code is as follows:
// For all users t firefox
SetTimeout (function (){
F. contentWindow. focus ();
}, 50 );
// Hack for firefox
Navigator. userAgent. toLowerCase (). indexOf ('Firefox ')! =-1 & f. focus ();
3. the pseudo pop-up window created by page dom: For dom, These focusable elements (W3C SPEC) cannot be focused. So when we need to focus on a p, what can we do? Generally, we can set Tabindex
Such a non-focusable element can trigger the focus event. But if we really want to focus on a place so that we can use tabs to access the content of this area, this method is useless to us.
Currently, there is no better method (for what I can think of and find), so currently, we can only use one focusable element to create the focus target. We can do this:
Get focus
But the problem is that this link is useless for us. We need to hide it and focus on it. However, you cannot focus on display: none. For hiding, I do not want to say too much here. We recommend that you read this article: Use clip to hide the content. We can use this link to hack:
The Code is as follows:
// Html: Use hidefocus to delete dotted boxes.
Get focus
// CSS: Use clip
. Getfocus {
Position: relative;
Clip: rect (1px 1px 1px 1px );
Clip: rect (1px, 1px, 1px, 1px );
}
// Javascript: Remember to put it at the beginning of the DOM structure to facilitate the process from top to bottom tabs.
A. focus ()
Iii. Summary:
So far, important technical implementation points have also been described. For more information about the code, see this rough DEMO. Although there is only a piece of code without special optimization, it is believed that it can solve many problems. There are still many ways to achieve accessibility. A little bit. Start from today.
