# FloatingToolBar Accessibility

The Telerik UI for ASP.NET Core FloatingToolBar hosts the accessible Telerik UI for ASP.NET Core 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](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/toolbar/accessibility/overview) 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 HtmlHelper
    @(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);
        })
    )
```

```Razor TagHelper
    <kendo-floatingtoolbar name="floatingtoolbar" visible="true" aria-label="Call controls">
        <floatingtoolbar-items>
            <item type="CommandType.Button" text="Chat" icon="comment" show-text="ShowIn.Overflow" />
            <item type="CommandType.Button" text="Mute microphone" icon="microphone-outline" show-text="ShowIn.Overflow" />
        </floatingtoolbar-items>
    </kendo-floatingtoolbar>
```

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 HtmlHelper
    @(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");
        })
    )
```

```Razor TagHelper
    <kendo-floatingtoolbar name="floatingtoolbar" visible="true" draggable="true" aria-label="Document actions">
        <messages drag-handle="Reposition document actions"
                  moved-up="Toolbar moved up"
                  moved-down="Toolbar moved down"
                  moved-left="Toolbar moved left"
                  moved-right="Toolbar moved right" />
        <floatingtoolbar-items>
            <item type="CommandType.Button" text="Save" icon="save" />
        </floatingtoolbar-items>
    </kendo-floatingtoolbar>
```

## Keyboard Navigation

For details on how the FloatingToolBar keyboard navigation works, refer to the [FloatingToolBar Keyboard Navigation](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/accessibility/keyboard-navigation) article.

## Next Steps

* [Keyboard Navigation of the FloatingToolBar](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/accessibility/keyboard-navigation)

## See Also

* [Keyboard Navigation by the FloatingToolBar for ASP.NET Core](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/floatingtoolbar/accessibility/keyboard-navigation)
* [Accessibility in Telerik UI for ASP.NET Core](https://www.telerik.com/aspnet-core-ui/documentation/accessibility/overview)