An onkeydown keyhandler has been attached to each button to toggle the button when Space or Enter is pressed. To make the buttons focusable, they are given "tabindex=0" attributes. The "aria-pressed" attribute indicates that these are toggle buttons. Each button is implemented by a li element with role "button". Ul list mark-up is used to define the set of buttons. The complete example includes mouse as well as keyboard support.
#Actio nand onclick not triggering action code#
This example is derived from Open Ajax Alliance Example 3 - Button role example using text-only buttons, which contains complete source code and a live example. However, supporting platform keyboard conventions for controls is strongly encouraged.Įxample 2: Keyboard support for a set of toggle buttons Note that supporting SPACE in addition to ENTER is not required by WCAG 2.0 this control would still be keyboard accessible without the key event handler for SPACE. Since users expect to be able to activate buttons with either Enter or Space, a keyboard handler provides the support for activating the button via the Space character. Because we are using an anchor element, the control is focusable and the browser will automatically call the onclick handler for the Enter keystroke. Adding the ARIA role "button" makes it clear that this is a button control and not a link. This example is based on Example 1 from SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons.
Recommended design patterns for keyboard interaction are defined in WAI-ARIA 1.0 Authoring Practices.Įxamples Example 1: Using Space to activate a button However, many WAI-ARIA controls are complex and support a variety of keyboard commands for interacting with the widget. For simple widgets, keyboard support may just provide support for the Enter key such widgets invoke the default action both for onclick and for pressing Enter. It is also helpful to provide onclick handlers, which trigger the default action for the widget.
In HTML, keyboard handlers may be triggered by keydown, keyup, or keypress events. However, the eventhandler model for the DOM is rich, and it is possible to provide one keyboard event handler that handles events from multiple different controls, if it is coded correctly. The simplest design is to make the interactive control itself the focusable element, and to attach the keyboard event handlers to that element. The keyboard event handlers of these elements are device independent.
The keyboard handler must be triggered by a control that is itself keyboard accessible, either because it is a natively actionable HTML element or because the tabindex property has been used to make the control focusable.
#Actio nand onclick not triggering action how to#
The objective of this technique is to demonstrate how to add keyboard support to WAI-ARIA controls by invoking a scripted function in a way that is keyboard accessible. User Agent and Assistive Technology Support Notes Description
0 kommentar(er)
