Disabled State Communication
Ensure disabled states are properly communicated.
Native Disabled Attribute
The disabled prop removes elements from tab order and prevents interaction.
Explaining Disabled State
Provide context about why an element is disabled.
Ensure clear focus indicators for keyboard navigation.
Focus indicators should be clearly visible across different backgrounds.
Active State Communication
Communicate active/selected state to screen readers.
Indicate which item is currently selected.
Nested Interactive Elements
Handle nested interactivity accessibly.
Stop propagation to prevent conflicts.
Ensure adequate touch targets for mobile and accessibility.
Minimum Touch Target Size
Interactive elements should meet minimum size requirements.
Spacing Between Interactive Elements
Provide adequate spacing to prevent mis-taps.
Ensure sufficient contrast for interactive elements.
Interactive elements should maintain contrast across all states.
Test interactive elements with screen readers to verify proper announcements.
Expected announcement: "View user profile for John Doe, button"
Expected announcement: "Toggle notifications, button, pressed" (when enabled) or "Toggle notifications, button, not pressed" (when disabled)