Build your web apps using Smart UI
Smart.Gauge - Accessibility
Gauge provides a built-in compliance with WAI-ARIA specification via attributes like role, aria-valuemin, aria-valuenow, aria-valuemax and others.
The purpose of the ARIA attributes is to help disabled people by providing the information specific to the component to assistive technology in the screen readers.
The Gauge acts as a circular slider that allows to change the value by dragging the thumb to the appropriate value. As such the role of the component is slider. It contains other elements like the numeric display that has a different role according to it's purpose. They all contribute to the accessibility support of the Gauge.
The following ARIA attributes are used inside the Gauge:
- aria-disabled - indicates that interaction with the Gauge is disabled.
- aria-hidden - indicates that the element does not take part in the interaction with the Gauge and will not be mapped to the accessibility API. This attribute is typically applied to containers that do not provide any feedback regarding the state or the value of the Gauge.
- aria-describedby - indicates that the Gauge's current value is described by another element. That element is the Digital display that is nested inside it's template.
- aria-valuemax - indicates the maximal value of the Gauge.
- aria-valuemin - indicates the minimal value of the Gauge.
- aria-valuenow - indicates the current value of the Gauge.
The Gauge element handles keyboard keys according to the official WAI-ARIA specifications for slider components.
The following keyboard shortcuts are available to interact with the Gauge:
|Arrow Down/Up||Decrements/Increments the value of the Gauge according to the interval property.|
|Arrow Left/Right||Decrements/Increments the value of the Gauge according to the interval property.|
|Home||Sets the value of the Gauge to the minimum.|
|End||Sets the value of the Gauge to the maximum.|
Additional information on WAI-ARIA for the SMART Framework can be found here.