# Keyboard Support

A critical requirement for software accessibility is keyboard support as a complete alternative to pointing devices (mouse, etc.). Keyboard support is comprised of navigation key, command key, keyboard navigation, and action keys. **RadPanelBar** seamlessly switches between mouse and keyboard navigation.

## KeyboardNavigationSettings

Setting the control's **KeyboardNavigationSettings** (*introduced in R2 2016 - ver.2016.2.504*), allows you to associate an activation combination (**CommandKey** + **FocusKey**), which moves focus directly to the **RadPanelBar** and enables keyboard navigation. When there are multiple **RadPanelBar** controls on a given page, each of them may have a different activation combination.

The **KeyboardNavigationSettings** exposes two properties to configure the keyboard combination that sets focus to the control:

* **FocusKey**: An upper-case letter or number.

* **CommandKey**: \[Ctrl] , \[Alt] or \[Shift].

Pressing the keys set to these two properties at the same time places the focus on the PanelBar. The user can then use the **arrow keys** to navigate among the items in the control or the **action keys** to trigger specific action.

**Example 1**: Setting the **KeyboardNavigationSettings** for **RadPanelBar**

```ASPNET
<telerik:RadPanelBar RenderMode="Lightweight" ID="RadPanelBar1" runat="server" >
    <KeyboardNavigationSettings CommandKey="Alt" FocusKey="W" />
</telerik:RadPanelBar>
```

![panelbar-accessibilityandinternalization-keyboardsupport-focus](https://www.telerik.com/products/aspnet-ajax/documentation/assets/129c0ae267ed7b4778c0e24c3336d3e4/navigation-and-command.png)

> note Note that in some browsers certain keyboard combinations are already occupied and used by the browser itself.

## Keyboard navigation

Keyboard navigation is supported by using the **arrow keys** and special keyboard shortcuts:

* To move forward (down), use the \[Down arrow] or the \[Right arrow] key.

  ![panelbar-accessibilityandinternalization-keyboardsupport-doun-right-arrows](https://www.telerik.com/products/aspnet-ajax/documentation/assets/79e20cc7e3915ae365274ab544ee531f/down-right-arrows.png)

* To move backward (up), use the \[Up arrow] or the \[Left arrow] key.

  ![panelbar-accessibilityandinternalization-keyboardsupport-left-up-arrows](https://www.telerik.com/products/aspnet-ajax/documentation/assets/f69c2ff60240060fad657231064c1c49/left-up-arrows.png)

* To move to the parent of the focused item, use \[Ctrl] + \[Up arrow].

  ![panelbar-accessibilityandinternalization-keyboardsupport-control](https://www.telerik.com/products/aspnet-ajax/documentation/assets/b01c8d1c895b3dae2be904fac578ca5c/ctrl-and-up.png)

* To move to the first sibling element at the same level of the currently active item, use the \[Home] key.

  ![panelbar-accessibilityandinternalization-keyboardsupport-home](https://www.telerik.com/products/aspnet-ajax/documentation/assets/74157a7d13f1c796c1400fad390da03e/home.png)

* To move to the last sibling element at the same level of the currently active item, use the \[End] key.

  ![panelbar-accessibilityandinternalization-keyboardsupport-end](https://www.telerik.com/products/aspnet-ajax/documentation/assets/1774595fa58046465775c47d6dfaa6b2/end.png)

> note The arrow keyboard navigation includes all visible panel items, regardless of their level

## Action keys

**RadPanelBar** uses also two action keys to perform specific actions:

* To expand or collapse child items of an item, use the \[Space] key.

  ![panelbar-accessibilityandinternalization-keyboardsupport-space](https://www.telerik.com/products/aspnet-ajax/documentation/assets/124d66aa617b836a409c07a89f1d28a7/space.png)

* To select / trigger click on an item, use the \[Enter] key.

  ![panelbar-accessibilityandinternalization-keyboardsupport-enter](https://www.telerik.com/products/aspnet-ajax/documentation/assets/75d539c791cba5800bd49d9ad59234f7/enter.png)

> note Collapsing items does not always work. It depends on the [ExpandMode property](https://www.telerik.com/products/aspnet-ajax/documentation/controls/panelbar/radpanelbar-items/expanding-and-collapsing-items).

## See Also

* [RadPanelBar Item Builder](https://www.telerik.com/products/aspnet-ajax/documentation/controls/panelbar/design-time/radpanelbar-item-builder)

* [PanelBar - Keyboard Support demo](https://demos.telerik.com/aspnet-ajax/panelbar/examples/functionality/keyboardsupport/defaultcs.aspx)