PF/ARIA/BestPractices/Focus

From W3C Wiki
< PF‎ | ARIA‎ | BestPractices


Focus


One way to provide keyboard support in HTML is with form and list elements that accept keyboard focus by default. With the Tab key, the user can navigate to these types of elements. However, building sophisticated widgets using these elements is not practical. Moreover, navigating with only the Tab key can be very tedious. The solution is to provide full keyboard support within the widgets using additional keystrokes such as the arrow keys to provide more intuitive navigation.

A tenet of keyboard accessibility is reliable, persistent indication of focus. The author is responsible, in the scripts, for maintaining visual and programmatic focus and observing accessible behavior rules. Screen readers and keyboard-only users rely on focus to operate rich Internet applications with the keyboard.

Tabindex

One requirement for supporting the keyboard is to allow focus to be set to any element. The tabindex attribute can be used to include additional elements in the tab order and to set programmatic focus to them. Originally implemented in Internet Explorer 5, the feature has been extended to Firefox and Mozilla. The following table outlines the use of the tabindex attribute:

Tabindex Attribute Focusable with mouse or JavaScript via element.focus()
not present Follows default behavior of element (only form controls and anchors can receive focus.)
zero - tabindex="0" yes
Positive - tabindex="X" (where X is a positive integer between 1 and 32768) yes
Negative - tabindex="-1" yes

Setting a tabindex value of -1 to an element allows the element to receive focus via JavaScript using the element.focus() method. This method is used to enable arrow key navigation to elements. Each element that can be navigated to via arrow keys must have a tabindex of -1 to enable it to receive focus. A keydown event handler can determine the next object to receive focus and call that element’s focus() method. In addition, element's style may require an update via an onfocus event handler in order to show the focus, because browsers are inconsistent in displaying focus for items that receive focus programmatically.

Activedescendent

Rather than setting a key event handler on each element within a larger component, the event handler can be set on the parent element with the activedescendent property used to indicate the active child. For example, the container element with the role of tree can provide an onkeydown event handler so that each individual tree item within the tree does not need to be focusable and to listen for the keydown event. The container object, in this case the tree, needs to maintain the point of regard and manage which individual child item should be perceived as active. The key handler on the parent captures the keystrokes and determines what item becomes active next and updates the activedescendent property with the ID of the appropriate, next active child element. The browser takes that ID information and generates the focus event to the assistive technology. Each individual elements does not have to be made focusable via a tabindex value of -1, but it must be styled using CSS to indicate the active status.

Accelerator Keys

To make this a bit easier, here are the known keys that are not used under Internet Explorer 6 on Windows XP running Jaws 8 with no extras installed. As you can see the majority of available keys are in the control+alt and shift+control+alt sets. We recommend using keys in these sets as a best practice for web apps so users won't have to memorize both a set of letters and modifiers. If everybody can stick to control+alt users will start to use these as a habit. As a good UI design, shift+control+alt should be used for more powerful or alternate versions of unshifted commands. For example control+alt+d could be "delete" while shift+control+alt+d would be "delete all".

Modifiers Available Keys
None W Y ` 7 8 9 0 - = [ ] \ 'FF , .
Shift W Y ` 7 8 9 0 - = [ ] \ '
Control DFFIE GFF JFFIE M Q SFF TFFIE UFF Y ` 1 2 3 4 6 7 8 9 0 -FFIE =FFIE [ ] \ ; ' , . /
Alt BFF CIE G I J K LIE MIE N OIE PIE Q RIE SFF U W X Y ZIE ` 1 2 3 4 5 6 7 8 9 0 - = [ ] \ ; ' , . /
Shift+Alt BFF CIE G I J K LIE MIE N OIE PIE Q RIE SFF U W X Y ZIE ` 1 2 3 4 5 6 7 8 9 0 - = [ ] \ ; ' , . /
Shift+Control A B C D E FFF GFF HIE IIE JIE L M N O P Q RFF S T U V WFF X Y Z ` -FFIE =FFIE \ ; ' , . /
Control+Alt ABCDEFGHIJKLMNOPQRSTUVWXY`1FF 2FF 3FF 4FF 5FF 6FF 7FF 8FF 9FF 0-=[]\;',./
Shift+Control+Alt ABCDEFGHIJKLMNOPQRSTUVWXYZ`1FF 2FF 3FF 4FF 5FF 6FF 7FF 8FF 9FF 0-=[]\;',./

FF - Firefox with no plugins on Windows XP also maps some more keys which are noted with an FF superscript in the table.

IE - Internet Explorer 7 with no plugins on Windows XP maps some more keys which are noted with an IE superscript in the table.