# Accessibility

The FloatingToolBar hosts the accessible Kendo UI ToolBar component. Give the toolbar a purpose-specific accessible name with `ariaLabel`, especially when its tools are icon-only.

```js
$("#floatingtoolbar").kendoFloatingToolBar({
    ariaLabel: "Call controls",
    items: [
            { type: "button", text: "Chat", showText: "overflow", icon: "comment" },
            { type: "button", text: "Mute microphone", showText: "overflow", icon: "microphone-outline" }
    ]
});
```

When `draggable` is enabled, the drag handle is exposed as a keyboard-operable button and uses a polite live region to announce keyboard movement. Customize the handle label and movement announcements with `messages.dragHandle`, `messages.movedUp`, `messages.movedDown`, `messages.movedLeft`, and `messages.movedRight`.

```js
$("#floatingtoolbar").kendoFloatingToolBar({
    draggable: true,
    ariaLabel: "Document actions",
    messages: {
        dragHandle: "Reposition document actions",
        movedUp: "Toolbar moved up",
        movedDown: "Toolbar moved down",
        movedLeft: "Toolbar moved left",
        movedRight: "Toolbar moved right"
    },
    items: [{ type: "button", text: "Save", icon: "save" }]
});
```

See the [keyboard navigation guide](https://www.telerik.com/kendo-jquery-ui/documentation/controls/floatingtoolbar/accessibility/keyboard-navigation) for the keys used to navigate commands and move the toolbar.

## See Also

* [Kendo UI for jQuery Accessibility Overview](https://www.telerik.com/kendo-jquery-ui/documentation/accessibility/accessibility-overview)