Build your web apps using JQX Custom Elements
Smart.Tank - 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.
Tank 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 Tank acts as a linear slider that allows to change the value by clicking inside the fill area or dragging it to the desired value. As such the role of the component is slider.
The following ARIA attributes are used inside the Tank:
- aria-disabled - indicates that interaction with the Tank is disabled.
- aria-hidden - indicates that the element does not take part in the interaction with the Tank 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 Tank. The scales of the component have this attribute applied since they do not provide interaction.
- aria-describedby - indicates that the Tank's current value is described by another element. That element has a tooltip that appears while dragging the fill of the Tank. The value of the attribute is determined by the tooltip.
- aria-valuemax - indicates the maximal value of the Tank. Applied to the element itself.
- aria-valuemin - indicates the minimal value of the Tank. Applied to the element itself.
- aria-valuenow - indicates the current value of the Tank. Applied to the element itself.
- aria-orientation - indicates the orientation of the Tank. The component can have horizontal or vertical orientation.
Keyboard Interaction
The Tank element handles keyboard keys according to the official WAI-ARIA specifications for slider components.
The following keyboard shortcuts are available to interact with the Tank:
Key | Action |
---|---|
Arrow Down/Up | Decrements/Increments the value of the Tank according to the interval property. |
Arrow Left/Right | Decrements/Increments the value of the Tank according to the interval property. |
Home | Sets the value of the Tank to the minimum. |
End | Sets the value of the Tank to the maximum. |
Additional information on WAI-ARIA for the SMART Framework can be found here.