Accessibility Application Focus Chapter

Recent projects need to apply accessibility, with a lot of focus and Blur, summarized as follows

First, set focus

Create a Accessibility dialog box: When a dialog box appears, focus should be in the dialog box so that the user can continue browsing using the keyboard. The exact location of the focus set in the dialog box is largely dependent on the purpose of the dialog box itself. If there is a continue button and a Cancel button in the confirmation dialog box (Confirmation dialog), you can set the focus by default on the Cancel button. If the dialog box is for the user to enter text, you can set the focus to the text input box by default. If you really don't know where to focus, setting the focus on the element that can represent the dialog box is a good choice.

Because in most cases, we use the <div> element to represent a dialog box, you can set the focus by default on that <div>. You need to set the TabIndex property of the element to-1 so that the element can get the focus. This property value allows you to use JavaScript to set the focus to that element, but does not insert the element into the Normal tab order. This means that the user will not be able to press the TAB key to set the focus on the dialog box. Either set directly in HTML or through JavaScript settings. Set in HTML:

<DivID= "My-dialog"role= "Dialog"TabIndex= "-1"Aria-labelledby= "Dialog-title">    <H3ID= "Dialog-title">New Message</H3>    <-- Your Dialog code here--></Div>

With JavaScript settings:

var div = document.getElementById ("my-dialog"=-1;d iv.focus ();

Once the TabIndex is set to-1, the element can call focus (), just like any other focusable element. This allows the user to press the TAB key to navigate through the dialog box.

Description: TabIndex has different performance on different elements of focus, see http://test.cita.illinois.edu/aria/focus-tests/index.php

Ii. limiting focus (trapping focus)

Another accessibility issue for the dialog box is to make sure that the focus does not jump out of the dialog box. In general, if the dialog box is modal, its focus should not escape the dialog box. When the dialog box is open, if you press the TAB key to set the focus to the page element behind the dialog box, it is quite difficult for the keyboard user to return the focus back to the dialog box. Therefore, it is best to use some JavaScript to avoid this happening.

The basic idea is to use event capturing to listen for focus events, which are promoted by Peter-paul Koch[2] and are now widely used in JavaScript libraries. Because focus does not bubble (bubble), you cannot snap to it during the bubbling phase of the event stream. Instead, you can capture all the focus events on the page by using the event capture method. After that, you only need to determine if the element that gets the focus is in the dialog box. If not, the focus is set on the dialog box. The code is very simple:

function (event) {    var dialog = document.getElementById ("My-dialog");     if (Dialogopen &&!) dialog.contains (Event.target)) {        event.stoppropagation ();        Dialog.focus ();     true);

If you use a JavaScript library, the Focus event delegate method can do the same thing. If you do not use JavaScript libraries and need to support Internet Explorer 8 and earlier versions, you can use the Focusin event instead (Translator Note: Focusin and focusout support event bubbling).

Third, restore focus (Restoring focus)

The last focus of the dialog box: When the dialog box closes, the focus is returned to the body part of the page. The idea is simple: in order to open a dialog box, the user may have activated a link or a button. When the focus shifts to the dialog box, the user finishes some tasks, and then exits the dialog box. The focus should be reset back to the link or button that you clicked in order to open the dialog box so that you can continue browsing the page. This problem is often overlooked in Web applications, but the effect is vastly different.

As with other parts, a small amount of code can be achieved. All browsers support Document.activeelement, returning the element that currently has focus. You just have to get this value and then show the dialog box, and when you close the dialog box, return the focus to that element. For example:

var lastfocus = document.activeelement, Dialog = document.getElementById ("my-dialog"= "show"; Dialog.focus ();

The point of this code is that it records the final focus element. This way, when the dialog box is closed, the focus is set on it:

lastFocus.focus()

Iv. Exit Focus (dialog box)

The last question is to give the user a quick and easy way to exit the dialog box. The best way is to use the ESC key to close the dialog box. This is how the dialog box exits in the desktop application, so users are familiar with this approach. Just listen for the ESC key is pressed, and then exit the dialog box, such as:

function (event) {    if (dialogopen && Event.keycode = =) {        //  Close the Dialog    true);

Five additions: Delegating the focus and Blur events

A few events, such as Focus, blur, and change do not support event bubbling, such as the following code

<p id= "Testparagraph" >    Some text.     <input id= "Testinput"/></p>$ (' Testparagraph '). onfocus = handleeventpar;$ (' testinput '). onfocus = Handleeventinput;

当用户聚焦在input时候handleEventInputCan be performed, but because the focus event does not support bubbling, so handleEventPar并不执行 . The only exception is that the P tag defines the TabIndex property, otherwise it will handleEventPar never be executed

Let's move to event capture, the code below

<p id= "Testparagraph" >    Some text.     <input id= "Testinput"/></p>$ (' testparagraph '). onfocus = handleeventpar;$ (' testinput '). onfocus =   handleeventinput; $(' Testparagraph '). AddEventListener (' Focus ', Handleeventpar,true); $ (' testinput '). AddEventListener (' Focus ', Handleeventinput,true);

Use AddEventListener, and set the second parameter to true, so that if the user focuses on input handleEventPar andhandleEventInput均能被执行

Compatible with IE

However, IE does not support event snapping, which supports focusin and focusout events, unlike focus and Blur, which support event bubbling. To be compatible with IE, you need to modify the code as follows:

<ol id= "dropdown" >    <li><a href= "#" >list item 1</a>        <ol>            <li><a href= "#" >list item 1.1</a></li>            <li><a href= "#" >list Item 1.2</a></li>            <li><a href= "#" >list item 1.3</a></li>        </ol>    </li>    [etc. ]</ol>$ (' dropdown '). onmouseover = handlemouseover;$ (' dropdown '). onmouseout =  handlemouseout;$ (' dropdown '). Onfocusin = handlemouseover;$ (' dropdown '). Onfocusout =  handlemouseout;$ (' dropdown '). AddEventListener (' Focus ', Handlemouseover,true); $ (' Dropdown '). AddEventListener (' Blur ', Handlemouseout,true);

Reference:

• Http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html
• http://www.topcss.org/?p=590

Accessibility Application Focus Chapter