Accessibility in Blazor Rating Component

6 Jan 20231 minute to read

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

Keyboard interaction

The rating component is interactive with below keyboard shortcuts.

Keyboard shortcuts	Actions
Space	If a Reset Button is focused, resets the value to Min value.
ArrowUp	Increases the value.
ArrowLeft	Decreases the value and in RTL mode, increases the value.
ArrowDown	Decreases the value.
ArrowRight	Increases the value and in RTL mode, decreases the value.

ARIA attributes

The following ARIA attributes are used in rating component based on its state.

Properties	Functionality
role	This attribute is added to the div element to describe the actual role.
aria-label	Attribute provides the text label with some default description for the Rating and its items.
aria-valuemin	It defines the minimum value of rating.
aria-valuemax	It defines the maximum value of rating.
aria-valuenow	It defines the current value of rating.