Search results

Accessibility in JavaScript (ES5) Rating control

06 Jun 2023 / 2 minutes to read

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

Keyboard interaction

The rating control is interactive with below keyboard shortcuts.

Keyboard shortcuts Actions
Space If a Reset Button is focused, resets the value to min value.
Arrow Up Increases the value.
Arrow Left Decreases the value and in RTL mode, increases the value.
Arrow Down Decreases the value.
Arrow Right Increases the value and in RTL mode, decreases the value.

ARIA attribute

The following ARIA attributes are used in rating control 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.