Accessibility in Blazor SpeedDial Component

22 Nov 20222 minutes to read

Accessibility is achieved in the Speed Dial component through WAI-ARIA standard and keyboard navigations. The Speed Dial component can be effectively accessed through assistive technologies such as screen readers.

Keyboard interaction

The Speed Dial component is interactive with below keyboard shortcuts.

Keyboard shortcuts	Actions
Enter	Open/close the menu. If a SpeedDial item is focused, should triggers the clicked event for the item.
ArrowUp	Navigates up or to the previous menu item.
ArrowLeft	Navigates left or to the previous menu item.
ArrowDown-	Navigates down or to the previous menu item.
ArrowRight	Navigates right or to the previous menu item.
Home	Navigates to the first menu item.
End	Navigates to the last menu item.
Esc	Closes the menu.

ARIA attributes

The following ARIA attributes are used in SpeedDial Component based on its state.

Properties	Functionality
role	This attribute is added to the input element to describe the actual role.
aria-label	Attribute provides the text label with some default description for the SpeedDial and its items.
aria-expanded	It indicates whether the SpeedDial current state is expanded or collapsed.
aria-haspopup	It indicates whether the SpeedDial has popup items or not.
aria-controls	Attribute is set to the SpeedDial button and it points to the corresponding content.
aria-disabled	It indicates the disabled state of the SpeedDial and its items.