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

PasswordTextBox provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-label, aria-describedby 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 PasswordTextBox represents a single line input that allows free-form text as it's value. The text inside the input is masked via asterisk characters so the users can't see the actual value. The element has a default role textbox.

The following ARIA attributes are used in the PasswordTextBox:

  • aria-disabled - indicates that the interaction with the PasswordTextBox is disabled.
  • aria-describedby - identifies the element that describes the PasswordTextBox component by it's id. A separate element is used to hold the description for the PasswordTextBox. It appears below the element when focused.
  • aria-label - the tooltip and the placeholder of the PasswordTextBox are the two elements that label the element. Their id are used as the value of the attribute.
  • aria-labelledby - identifies the element that labels the PasswordTextBox by it's id. A separate element that contains the label is displayed above the PasswordTextBox when the label property is applied.

Keyboard Interaction

PasswordTextBox component handles keyboard interaction the same way as a standard HTML Input element.

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