Keyboard Shortcuts
Keyboard access is a fundamental aspect of the interaction between disabled users and the Web.
The more the functionalities of your project that users can handle through the keyboard, the wider the variety of assistive technologies that can be used by disabled users.
Overview
To indicate to the browser that a specific property can be activated with the keyboard, place the accesskey attribute in HTML elements. For example, you have the <input type='text' id='name' accesskey='n' /> input field on a page. By implementing accesskey, you instruct the browser to enable a user to set the focus on that field through an access key combination and the n key. Access key combinations are unique for OS and browsers. For example, if a user browses your website with Chrome on a Mac, they will have to type control and option and n to set focus on the name field.
Kendo UI recognizes accesskey attributes and automatically preserves them when creating components. This approach is helpful when Kendo UI creates multiple DOM elements to construct more complex components such as the NumericTextBox or DatePicker.
Built-In Support
Keyboard support in Kendo UI maps access-key combinations and ensures that users can access the full capabilities of the widgets through the keyboard.
Besides the accesskey attribute support, most Kendo UI components also offer a series of keyboard controls for interacting with them. The specific keyboard shortcuts supported by each component are provided in the following keyboard examples.
- AIPrompt
- AutoComplete
- BottomNavigation
- Breadcrumb
- Button
- ButtonGroup
- Calendar
- Captcha
- ColorGradient
- ColorPalette
- ColorPicker
- ComboBox
- CheckBoxGroup
- DateInput
- DatePicker
- DateRangePicker
- DateTimePicker
- Dialog
- Drawer
- DropDownButton
- DropDownList
- DropDownTree
- Editor
- ImageEditor
- FileManager
- FlatColorPicker
- FloatingActionButton
- Gantt
- Grid
- ListBox
- ListView
- MediaPlayer
- Menu
- MultiColumnComboBox
- MultiSelect
- MultiViewCalendar
- NumericTextBox
- Pager
- PanelBar
- PDFViewer
- PivotGridV2
- Rating
- RadioGroup
- Scheduler
- Slider
- SplitButton
- Splitter
- Spreadsheet
- Stepper
- Switch
- TabStrip
- TaskBoard
- TimeLine
- TimePicker
- ToolBar
- TreeList
- TreeView
- Window
- Wizard
In-Component Keyboard Navigation
To implement the in-component keyboard navigation, use either of the following approaches:
- Rely on
Tabto focus multiple HTML elements inside a components. - Rely on
Tabto focus only one element in the components and, then, use other keys for in-components navigation and actions—for example,Arrowkeys,Enter,Page Up,Page Down, and so on.
Kendo UI supports the second approach and uses an aria-activedescendant attribute to determine the currently active element inside the components. This is the recommended technique for complex UI components because it provides for a better control over the keyboard navigation and an easier implementation of nested-textbox change handlers, and also avoid the definition of accessibility attributes for elements that may need them. On the other hand, the approach requires you to define WAI-ARIA attributes. From an end-user's perspective, the markup of the components is encapsulated as if a shadow DOM is used. The drawback of this approach is that the end-user is expected to be educated on how to use the component. However, Kendo UI considers the pros to outweigh the cons.
See Also
- Overview of Accessibility Features in Kendo UI
- Section 508 Support in Kendo UI
- Section 508 and WCAG 2.2 Compliance of Kendo UI Components
- WAI-ARIA Support in Kendo UI
- Right-to-Left Language Support in Kendo UI
- Working with the Kendo UI High-Contrast Theme
- Five Tips for Accessible Charts with Kendo UI