Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Input
  3. Accessibility
  4. Color And Contrast

Input

Color and Contrast

Color and Contrast
Ensure inputs maintain sufficient contrast for visibility.
Visual States
Input borders, text, and icons meet WCAG AA contrast requirements.
Focus Indicators
Focus indicators are clearly visible across different backgrounds.
Responsive Behavior
Ensure inputs work well across different screen sizes and input methods.
Mobile Optimization
Inputs adapt to mobile devices with appropriate keyboard types and touch targets.
Touch Target Sizes
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
Test inputs with screen readers to ensure proper announcements.
Expected Announcements
Expected announcement: "Email Address, required, edit text, Enter your email address"
Error Announcements
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