Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Textarea
  3. Accessibility
  4. Label Accessibility

Textarea

Label Accessibility

Label Accessibility
Labels are properly formatted for accessibility.
Label Formatting
Labels use semantic HTML.
  • Labels use <label> element
  • Label is associated with textarea via htmlFor and id
  • Clicking label focuses the textarea
  • Screen readers announce label when field receives focus
Label Colors
Label colors communicate state without affecting accessibility.
  • Label color provides visual feedback
  • Error state is also communicated via ARIA attributes
  • Screen readers don't rely solely on color
  • Color enhances but doesn't replace semantic meaning
Disabled State Accessibility
Disabled textareas are properly communicated.
Disabled Announcements
Disabled state is announced to screen readers.
Expected announcement: "Disabled Field, textarea, disabled, unavailable" Screen readers clearly indicate disabled state, preventing user frustration.
Read-Only Announcements
Read-only state is communicated appropriately.
Expected announcement: "Read-only Content, textarea, read-only" Screen readers announce read-only state, indicating content can be viewed but not edited.
Character Limit Accessibility
Character limits are communicated accessibly.
MaxLength Support
maxLength is properly communicated.
  • maxLength attribute prevents input beyond limit
  • Visual counter provides real-time feedback
  • Helper text explains the limit
  • Screen readers can announce limit information
Counter Feedback
Character counter provides accessible feedback.
  • Counter shows "current / max" format
  • Counter updates as user types
  • Visual feedback is primary method
  • Screen readers may announce count in certain contexts
Error Handling Accessibility
Error states are fully accessible.
Error Communication
Errors are communicated clearly to all users.
  • Error message replaces helper text
  • aria-invalid="true" indicates error state
  • Error message is associated via aria-describedby
  • Screen readers announce error immediately
Validation Feedback
Provide clear validation feedback.
  • Validation feedback updates in real-time
  • Error messages are specific and actionable
  • Success state confirms valid input
  • Screen readers announce state changes
Focus Management
Proper focus management ensures keyboard users can navigate effectively.
Focus Behavior
Focus behavior works correctly.
  • autoFocus moves focus to textarea on mount
  • Focus ring appears immediately
  • Keyboard users can begin typing
  • Focus management respects user preferences
Focus Restoration
Focus is managed appropriately in forms.
Focus can be programmatically managed for better user experience during validation.
Multi-Line Content
Multi-line content is accessible to screen readers.
Line Breaks
Line breaks are preserved and accessible.
  • Line breaks in content are preserved
  • Screen readers navigate line by line
  • Content structure is maintained
  • Formatting is accessible
Long Content
Long content remains accessible.
  • Screen readers can navigate through long content
  • Auto-resize prevents content from being hidden
  • Scrollable content remains accessible
  • Content structure is maintained
Previous
Accessibility / ARIA Attributes
Next
Accessibility / Testing with Screen Readers
On this page
Label Accessibility
Label Formatting
Label Colors
Disabled State Accessibility
Disabled Announcements
Read-Only Announcements
Character Limit Accessibility
MaxLength Support
Counter Feedback
Error Handling Accessibility
Error Communication
Validation Feedback
Focus Management
Focus Behavior
Focus Restoration
Multi-Line Content
Line Breaks
Long Content