Smart.NumericTextBox - 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.

NumericTextBox provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-multiline, aria-controls and others. They are applied to the corresponding elements inside the template of the components.

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 NumericTextBox represents an input that allows free-form text to be entered but on change the value is validated to exclude invalid characters. It also contains buttons and a popup. Each of these componens have their own role:

• textbox - the default role of the input.
• button - the role of the radix display and increment/decrement butons.
• listbox - the role of the popup that allows to select the radix.

The following ARIA attributes are used in the NumericTextBox:

• aria-disabled - indicates that the interaction with the NumericTextBox is disabled.
• aria-hidden - indicates that the element does not take part in the interaction with the Menu and will not be mapped to the accessibility API. For example, the arrows for the increment/decrement buttons.
• aria-multiline - indicates that the NumericTextBox accepts multiple lines of input or only a single line.
• aria-controls - applied to the scrollbars inside the NumericTextBox to indicate that they control the input. The attribute points to the id of the input.
• aria-expanded - indicates whether the popup of the NumericTextBox is expanded or not.
• aria-haspopup - indicates that the NumericTextBox has a listbox popup that can be triggered.
• aria-describedby - identifies the elements that describe the value of the NumeriTextBox by their id. In the case of NumericTextBox there are two controls that describe the element: the unitDisplay and the hint. Both controls are hidden by default but can be shown via the corresponding properties: showUnit, hint.
• aria-label - since the NumericTextBox has a placeholder property, it allows to label the input. This attribute is also used to label the increment/decrement buttons.
• aria-labelledby - identifies the element that labels the NumericTextBox by it's id. A separate element that contains the label is displayed above the NumericTextBox when the label property is applied.
• aria-owns - applied to the radix display button which opens the popup for radix display selection. Since the popup is not a child of the button, this attribute indicates that the button is the actual parent of the popup.

Keyboard Interaction

The following keyboard shortcuts are available to interact with the NumericTextBox:

Additional information on WAI-ARIA for the SMART Framework can be found here.