Accessibility in EJ2 TypeScript Speed dial control

2 May 20232 minutes to read

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

Keyboard interaction

The Speed Dial control 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.
Up-arrow	Navigates up or to the previous menu item.
Left-Arrow	Navigates left or to the previous menu item.
Down-Arrow	Navigates down or to the previous menu item.
Right-Arrow	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 control 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.