Accessibility in Angular Query Builder UI
1 Sep 20265 minutes to read
The Query Builder component adheres to accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and WAI-ARIA roles, ensuring an inclusive experience for all users.
The following table outlines the accessibility compliance features of the Query Builder component.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Accessibility Checker Validation | |
| Axe-core Accessibility Validation | |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) provides semantics for describing component roles, states, and functionality. These attributes enhance accessibility for assistive technologies, enabling better support for users with disabilities.
The Query Builder uses the following WAI-ARIA attributes:
| Attributes | Purpose |
|---|---|
role |
Indicates the query builder component. |
aria-label |
Provides an accessible label for the rule, group, and control elements such as fields, operators, values, and buttons. |
aria-expanded |
Indicates the expanded or collapsed state of the group. |
aria-disabled |
Indicates the disabled state of the controls within the query builder. |
Keyboard interaction
The Query Builder supports full keyboard navigation, enabling users who rely on assistive technologies or keyboard-only navigation to interact with all features. The following keyboard shortcuts are available:
| Press | To do this |
|---|---|
| Tab | Move focus to the next control within the rule (field, operator, value, connector, or action button). |
| Shift + Tab | Move focus to the previous control within the rule. |
| Enter | Open the dropdown for the focused field, operator, or value, or trigger the focused action button (Add condition, Add group, Delete). |
| Alt + Down Arrow | Open the dropdown list of the focused field, operator, or value editor. |
| Alt + Up Arrow | Close the open dropdown list. |
| Escape | Close the open dropdown list and restore the previously selected value. |
| Home | Move focus to the first control in the focused rule or group. |
| End | Move focus to the last control in the focused rule or group. |
Ensuring accessibility
The Query Builder component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
To validate the Query Builder against accessibility standards in your own application:
- Run the accessibility-checker against any page hosting the Query Builder and review the reported violations against the WCAG 2.2 and Section 508 rule sets.
- Run axe-core on the rendered Query Builder element and address any reported serious or critical issues.
- Re-run both tools after any template or style customization, since custom content can introduce new accessibility regressions.
The accessibility compliance of the Query Builder component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Query Builder component with accessibility tools.
The following sample renders the default Query Builder and can be used to run the accessibility validation tools directly against the component: