New to Kendo UI for jQuery? Start a free 30-day trial

Accessibility

Updated on Oct 9, 2026

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.

$("#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.

$("#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 for the keys used to navigate commands and move the toolbar.

Accessibility

See Also