FloatingToolBar Accessibility

Updated on Oct 9, 2026

The Telerik UI for ASP.NET MVC FloatingToolBar hosts the accessible Telerik UI for ASP.NET MVC ToolBar component. The hosted ToolBar implements the WAI-ARIA toolbar role and the keyboard navigation between its tools. For details, refer to the ToolBar accessibility article.

Accessible Name

Use the AriaLabel() option to set an accessible name that describes the purpose of the toolbar. The value is applied as the aria-label attribute of the hosted ToolBar and replaces its default Toolbar label. Set an accessible name especially when the tools display only icons.

Razor

    @(Html.Kendo().FloatingToolBar()
        .Name("floatingtoolbar")
        .Visible(true)
        .AriaLabel("Call controls")
        .Items(items =>
        {
            items.Add().Type(CommandType.Button).Text("Chat").Icon("comment").ShowText(ShowIn.Overflow);
            items.Add().Type(CommandType.Button).Text("Mute microphone").Icon("microphone-outline").ShowText(ShowIn.Overflow);
        })
    )

When an item shows only its icon, provide a title through the HtmlAttributes() option of the item to give the tool a visible tooltip.

Drag Handle

When the Draggable() option is enabled, the toolbar renders a drag handle with the following attributes:

Selector	Attribute	Usage
.k-floating-toolbar-drag-handle	role=button	Exposes the drag handle as a button.
	tabindex=0	Makes the drag handle focusable.
	aria-label	Describes the drag handle. Configured through the DragHandle() message.
	aria-pressed	Set to true while the keyboard Move mode is active.

The toolbar also renders a polite live region that announces each keyboard movement. Use the Messages() option to localize the drag handle label and the movement announcements.

Razor

    @(Html.Kendo().FloatingToolBar()
        .Name("floatingtoolbar")
        .Visible(true)
        .Draggable(true)
        .AriaLabel("Document actions")
        .Messages(messages => messages
            .DragHandle("Reposition document actions")
            .MovedUp("Toolbar moved up")
            .MovedDown("Toolbar moved down")
            .MovedLeft("Toolbar moved left")
            .MovedRight("Toolbar moved right"))
        .Items(items =>
        {
            items.Add().Type(CommandType.Button).Text("Save").Icon("save");
        })
    )

Keyboard Navigation

For details on how the FloatingToolBar keyboard navigation works, refer to the FloatingToolBar Keyboard Navigation article.

Next Steps

• Keyboard Navigation of the FloatingToolBar

See Also

• Keyboard Navigation by the FloatingToolBar for ASP.NET MVC
• Accessibility in Telerik UI for ASP.NET MVC