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

Input provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-label, aria-expanded, aria-hidden 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 Input element has two states which determine its behavior. The element can work as a DropDownButton or a ComboBox depending on the readonly property. That is why it can have two roles:

  • button - the Input does not allow text to be typed in. Instead the input becomes a clickable button that triggers a popup with options.
  • combobox - the Input elements allows text to be typed in and if a matching item is present the popup will open to view the suggestions.

The following ARIA attributes are used in the Input:

  • aria-disabled - indicates that a Input's item interaction is disabled.
  • aria-readonly - indicates that the Input is not editable but is otherwise operable.
  • aria-activedescendant - the attribute points to the id of the currently focused item from the popup.
  • aria-hidden - indicates that there are elements from the internal structure of the Input that do not take part in the interaction with the component and will not be mapped to the accessibility API.
  • aria-haspopup - indicates that the Input has a popup that can be triggered.
  • aria-expanded - indicates that the Input's popup is opened and it's contents are visible.
  • aria-owns - identifies the popup of the element by it's id. Since the popup is not part of the DOM tree of the Input, the relationship between the two has to be determined.
  • aria-controls - indicates that the popup is controlled by the Input. The attribute points to the id of the popup.
  • aria-label - defines the label of the Input. It is also applied to the List items inside the popup to label them as well.

Keyboard Interaction

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

Key Action
Arrow Down/Up Focuses the next/previous item.
Alt + Arrow Down/Up Open/Close the popup.
Enter Selects the currently focused item from the popup.
Escape Closes the popup.

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