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

MultilineTextBox 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 MultilineTextBox represents a multiline input that allows free-form text as it's value. The element accepts line breaks within the input as in HTML textarea. It has the role "textbox" applied to indicate the corresponding behavior.

The following ARIA attributes are used in the MultilineTextBox:

  • aria-disabled - indicates that the interaction with the MultilineTextBox is disabled.
  • aria-multiline - indicates that the MultilineTextBox accepts multiple lines of input or only a single line.
  • aria-controls - applied to the scrollbars inside the MultilineTextBox to indicate that they control the input. The attributes points to the id of the input.
  • aria-describedby - identifies the element that describes the MultilineTextBox component by it's id. A separate element is used to hold the description for the MultilineTextBox. It appears below the element when focused.
  • aria-label - since the MultilineTextBox has a placeholder property, it allows to label the element. This attribute is also used to label the resize indicator that appears in the bottom right corner of the element when resizable proeprty is set.
  • aria-labelledby - identifies the element that labels the MultilineTextBox by it's id. A separate element that contains the label is displayed above the MultilineTextBox when the label property is applied.

Keyboard Interaction

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

Key Action
Home Scrolls to the top of the popup container and selects/focuses the first item from the list, if opened.
End Sets the caret at the end of the line.
Enter Depending on the enterKeyBehavior property modes:
  • submit - submits the input value.
  • clearOnSubmit - submits the value and clears the input.
  • newLine - adds a new line to the input value.
Escape Depending on the escKeyMode property modes:
  • none - does nothing when pressed.
  • clearValue - clears the value of the input.
  • previousValue - retrieves the previous value of the input.
Home Sets the caret at the beginning of the line.
Page Down/Up Scrolls the input content to the next/previous page.

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