Gauge Accessibility

Accesibility Attributes

Web accessibility makes web content and web applications more accessible to disabled people. It's especially helpful in dynamic content changes and development of advanced user interface components with HTML, Javascript and related technologies. Smart HTML elements framework offers full accessibility support for it's web components.

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.

Keyboard Interaction

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:

Key Action
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.