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.