A critical requirement for software accessibility is keyboard support as a complete alternative to pointing devices (mouse, etc.).
Keyboard support is comprised of access keys, keyboard navigation, and keyboard shortcuts. Telerik RadMenu will seamlessly switch between mouse and keyboard navigation, just like in desktop applications.
Using the AccessKey property, you can associate an activation combination (access key) which will focus on the particular menu item and enable keyboard navigation. When there are multiple menus on a given page, each of them may have a different activation combination.
Setting access keys
AccessKey is a property of the RadMenuItem class. AccessKey sets the keyboard shortcut that may be used to activate a menu item. The value of the AccessKey property can only be a single character. A key combination between [ALT] and the selected character key moves the focus to the respective item. (You can subsequently use the arrow keys for navigation; see below.)
To set a keyboard shortcut to a menu item, simply set the AccessKey property to the desired key. For example, <rad:RadMenuItem Text="Test" AccessKey="T"> will be fired when you press [Alt]+[T].
 |
In Opera, access keys work by pressing Shift+ESC, then pressing the assigned access key. |
Example
Pic. 1
| ASPX |
 Copy Code |
|
<rad:RadMenu ID="RadMenu1" Runat="server">
<Items>
<rad:RadMenuItem Runat="server" Text="Company" AccessKey="C"></rad:RadMenuItem>
<rad:RadMenuItem Runat="server" Text="Products" AccessKey="P"></rad:RadMenuItem>
<rad:RadMenuItem Runat="server" Text="Support" AccessKey="S"></rad:RadMenuItem>
</Items>
</rad:RadMenu>
|
Keyboard navigation
Keyboard navigation is supported by using the [TAB] and arrow keys. Use the [TAB] key to focus the menu, and then use the arrow keys to move among menu items.
An alternative to arrow keys for moving forward and backward along the menu are the [TAB] and [SHIFT]+[TAB] key combinations:
-
To move forward, use the [TAB] key.
-
To move backward, use the [SHIFT]+[TAB] key combination.
Child menu items are expanded using the arrow keys from the opposite (perpendicular) axis: for example, in a horizontal menu, you navigate among the parent items with the left and right arrow keys (or with [TAB] / [SHIFT]+[TAB]); child items are accessed with the up and down arrow keys.
Use the [ESC] key to go back one level.
The following properties are related to keyboard accessibility as they define the flow and expanding direction of menu items:
- Flow
This property of RadMenu defines whether the menu is horizontal or vertical. Horizontal menus are navigated with the left and right arrow keys, while for vertical menus you use the up and down keys. Similarly, in a horizontal menu you expand the child items of the focused parent with the up and down keys, whereas in a vertical menu you use the left and right keys.
The Flow property can also be set explicitly per item (see below, under GroupSettings).
- ExpandDirection
This property of the RadMenuItemGroupSettings class is applied for a specific item explicitly and defines how the collection of child items will be shown when expanded. The ExpandDirection property is exposed within a collection called GroupSettings (see below).
- GroupSettings
Apart from setting the Flow property on the menu level, you can explicitly set the flow and the expanding direction for each particular menu item. The RadMenuItemGroupSettings collection gives you access to the Flow and ExpandDirection properties. The values you set at this level affect the selected item's children.
To access these properties for a menu item:
- In the Visual Studio design surface, right-click the instance of Telerik RadMenu, and then select Build RadMenu.
- Select the desired item, and click GroupSettings. The properties you set under GroupSettings (Pic. 1) will affect the children of the selected item.
Pic. 1
To learn more about the Flow and ExpandDirection properties, see Expand and Collapse Behavior.
See Also