Accessibility in Angular TextBox component
21 Aug 20254 minutes to read
The TextBox component adheres to accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.
The accessibility compliance for the TextBox component is outlined below.
- 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.Keyboard navigation
The TextBox component supports keyboard navigation to enhance accessibility for users who rely on keyboard input. The following keyboard shortcuts are available:
| Keys | Description |
|---|---|
| Tab | Moves focus to the TextBox component. |
| Shift + Tab | Moves focus to the previous focusable element. |
| Home | Moves the cursor to the beginning of the text. |
| End | Moves the cursor to the end of the text. |
| Ctrl + A | Selects all text in the TextBox. |
| Arrow keys | Moves the cursor left or right within the text. |
WAI-ARIA attributes
The TextBox component provides comprehensive ARIA accessibility support that enables access through screen readers and other assistive technology devices. This component is designed with reference to the guidelines document provided in WAI-ARIA Accessibility Practices.
The TextBox uses the textbox role and the following ARIA properties for its element based on its state:
| Property | Functionality |
|---|---|
| aria-labelledby | Indicates the floating label element that describes the TextBox. |
| aria-describedby | References additional descriptive text associated with the TextBox, such as help text or error messages. |
| aria-invalid | Indicates the current validation state of the TextBox input. |
| aria-disabled | Indicates whether the TextBox is disabled and cannot receive user input. |
Ensuring accessibility
The TextBox component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the TextBox component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the TextBox component with accessibility tools.