Accessibility application of the articles focus

Recent projects need to apply accessibility, extensive use of focus and blur, summarized below

First, set the focus focus

Such as creating a barrier-free dialog: When a dialog box appears, the focus should be in the box, so that the user can use the keyboard to continue browsing. Focus is set in the dialog exact location depends largely on the purpose of the dialog box itself. If it is determined there is a "Continue" button and a "Cancel" button in the dialog box (confirmation dialog), then you can focus the default settings in the "Cancel" button. If the dialog box is used to allow users to enter text, then you can focus in the text entry box default settings. If you really do not know where to set the focus, set the focus on the element representative of the dialog box is a good choice.

Because in most cases, we use the <div> element to represent a dialog box, then the focus can change the default settings on the <div>. You need the tabIndex attribute of the element to -1, so this element to get the focus. This allows you to use JavaScript property value set the focus to the element, but the element is not inserted into the Tab key normal order. That user will be unable to press the TAB key to set focus on the dialog. Set by JavaScript or settings can be directly in the HTML. In HTML set:

<div id="my-dialog" role="dialog" tabindex="-1" aria-labelledby="dialog-title">
    <h3 id="dialog-title">New Message</h3>
    <-- Your dialog code here -->
</div>

By setting JavaScript:

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

Once the tabIndex is set to -1, the element can call focus (), just like any other focusable element the same. So that the user can press the Tab key to navigate in a dialog box.

Description: tabIndex on different elements have different manifestations of focus, specific see http://test.cita.illinois.edu/aria/focus-tests/index.php

Second, the focus limit (Trapping focus)

Another accessibility issue is to ensure that the focus of the dialog box can not jump out. Generally, if a modal dialog box, the dialog box which the focus should not escape. When the dialog box is open, if you press the tab key to set focus to page elements behind the dialog box, then the focus for keyboard users to return to the boxes is quite difficult. Therefore, it is best to use some JavaScript to prevent this from happening.

The basic idea is to use the event capture (event capturing) listens for focus events, this approach Koch by the Peter-Paul [2] promotion, is now widely used JavaScript library. Since the focus is not bubble (bubble), you can not catch it in the bubbling stage of the event flow. Instead, you can capture all the focus on the event page by using the method of capture events. After that, you only need to determine whether the element has the focus in the dialog box. If not, then the focus is set on the dialog. The code is very simple:

document.addEventListener("focus", function(event) {
    var dialog = document.getElementById("my-dialog");
    if (dialogOpen && !dialog.contains(event.target)) {
        event.stopPropagation();
        dialog.focus();
    }
}, true);

If you use the JavaScript library, then focus event delegate method can also achieve the same effect. If you do not use JavaScript libraries, while the need to support Internet Explorer 8 and earlier versions, you can use instead of focusin event (Translator's Note: focusin and focusout support event bubbling).

Third, to restore focus (Restoring focus)

Finally, a focus problem of the dialog box: When the dialog box is closed, the focus returns to the main body of the page. The idea is simple: In order to open the dialog box, the user may activate a link or a button. At this time, the focus shifted to the dialog box, users complete some task, and then exit the dialog box. Focus should be re-set it back on in order to open the dialog box and click on the link or button, so that you can continue to browse the web. In Web applications often ignore the problem, but the effect is different.

Like the rest of the small amount of code to achieve the effect. All browsers support document.activeElement, returns the current element has focus. You only need to get this value, and then display the dialog box, when you close the dialog box, return the focus to the element. E.g:

var lastFocus = document.activeElement, dialog = document.getElementById("my-dialog");
dialog.className = "show";
dialog.focus();

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

lastFocus.focus()

Fourth, quit the focus (box)

The last problem is to provide users with 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 a way to exit the dialog box in the desktop application, so users are very familiar with this approach. Just listen for the Esc key has been pressed, and then exit the dialog box, such as:

document.addEventListener("keydown", function(event) {
    if (dialogOpen && event.keyCode == 27) {
        // close the dialog
    }
}, true);

Five supplements: Delegating the focus and blur events

A small number of events, such as focus, blur, and change does not support event bubbling, as the following code

<p id="testParagraph">
    Some text.
    <input id="testInput" />
</p>
$('testParagraph').onfocus = handleEventPar;
$('testInput').onfocus = handleEventInput;

当用户聚焦在input时候handleEventInputIt can be performed, but does not support the event because the focus bubbling, so handleEventPar并不执行. The only exception is p tag defines tabIndex property, otherwise handleEventParnever be executed

Let's turn to capture the event (Event capture), the following code

<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 the second parameter set to true, so that if the user input when the focusing handleEventParandhandleEventInput均能被执行

Compatible with IE

But IE does not support the event capture, which supports focusin and focusout event, different from the focus and blur, these two events support event bubbling. To be compatible IE, requiring code changes 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

Reproduced in: https: //www.cnblogs.com/JoannaQ/p/4355072.html

Accessibility application of the articles focus

Guess you like