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

QueryBuilder provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-label, aria-controls, aria-expanded 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 QueryBuilder has the role "dialog". It contains buttons and popups that prompt the user to enter or respond to information.

The following ARIA attributes are used in the QueryBuilder:

  • aria-controls - this attribute is applied to the button for group operator selection to indicate that it controls a popup with operators.
  • aria-disabled - indicates that the interaction with the QueryBuilder is disabled.
  • aria-expanded - applied to several controls that can trigger a popup, for example the operator selection button. This attributes indicates whether it's popup is expanded or not.
  • aria-haspopup - indicates that an element has a popup that can be triggered. Such elements are the group operator selection button, the nested operator selection button and the add new condition button. They trigger a menu popup. The condition editors also have this property applied but they trigger listbox popups.
  • aria-label - indicates the label for the buttons that contain only an icon. The label should provide a textual representation of the button action.
  • aria-labelledby - identifies the element that labels the QueryBuilder by it's id. A separate element that contains the label is displayed above the QueryBuilder when the label property is applied.

Keyboard Interaction

The following keyboard shortcuts are available to interact with the QueryBuilder component:

Key Action
Enter/ Escape Closes a QueryBuilder editor popup, if it's opened.

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