Axon 911 Frontend Docs
Search
Loading navigation…
Components
Input
Accessibility
Color And Contrast
Input
Open in Cursor
Open in Cursor
More open options
Color and Contrast
Color and Contrast
Copy link to this section
Ensure inputs maintain sufficient contrast for visibility.
Visual States
Copy link to this section
Input borders, text, and icons meet WCAG AA contrast requirements.
Focus Indicators
Copy link to this section
Focus indicators are clearly visible across different backgrounds.
Responsive Behavior
Copy link to this section
Ensure inputs work well across different screen sizes and input methods.
Mobile Optimization
Copy link to this section
Inputs adapt to mobile devices with appropriate keyboard types and touch targets.
Touch Target Sizes
Copy link to this section
Icons, affixes, and select controls maintain adequate touch target sizes.
Adornment icons on
Field
use the icon size tokens, which meet the control height. A select beside the field is a separate
Select
.
Screen Reader Testing
Copy link to this section
Test inputs with screen readers to ensure proper announcements.
Expected Announcements
Copy link to this section
Expected announcement: "Email Address, required, edit text, Enter your email address"
Error Announcements
Copy link to this section
Expected announcement: "Username, invalid data, edit text, Username is already taken"
Previous
Accessibility / Required Fields
Next
Line Chart / Usage
On this page
Color and Contrast
Visual States
Focus Indicators
Responsive Behavior
Mobile Optimization
Touch Target Sizes
Screen Reader Testing
Expected Announcements
Error Announcements