TextBox 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.

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 TextBox component has the role combobox applied and as such it represents a composite element containing a single line textbox and a listbox popup that can be dynamically triggered to help the user set the value of the textbox. The TextBox provides WAI-ARIA accessibility through attributes like aria-owns, aria-expanded, aria-haspopup and others.

The following ARIA attributes are used in the TextBox:

  • aria-autocomplete - indicates that inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies that the predictions would be presented is a listbox.
  • aria-describedby - indicates that there's a separate container that contains the description for the input. The container is references by it's id.
  • aria-disabled - indicates that interaction with the TextBox is disabled.
  • aria-expanded - indicates whether the popup is expanded or not.
  • aria-haspopup - indicates that the TextBox has a listbox type popup that can be triggered.
  • aria-label - indicates the value of the input. If the input is empty the placeholder determines the label.
  • aria-labelledby - indicates that there's a separate container that labels the input. The container is references by it's id.
  • aria-owns - indicates that the textbox is the actual parent of the popup that is triggered when typing text in the input. This attribute is necessary since the DOM hierarchy does not show the parent-children relationship between them.

Keyboard Interaction

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

Key Action
Arrow Down/Up Focuses the next/previous item from the listbox popup, if opened.
Page Down/Up Focuses the first/last item from the next/previous page of the listbox popup, if opened.
Enter Selects the currently focused listbox item from the popup, if opened.
Escape Closes the popup if opened and excecutes an action depending on the escKeyMode.

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