How can I help you?
Accessibility in Angular TextBox Component
26 Feb 20264 minutes to read
The TextBox component conforms 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 assistive technology devices. This component is designed with reference to the guidelines provided in WAI-ARIA Accessibility Practices.
The TextBox uses the textbox role and the following ARIA properties 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 verified through 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.