Build your web apps using Smart UI
Smart.QueryBuilder - Accessibility
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.
The following keyboard shortcuts are available to interact with the QueryBuilder component:
|Enter/ Escape||Closes a QueryBuilder editor popup, if it's opened.|
Additional information on WAI-ARIA for the SMART Framework can be found here.