General
- Ensure sufficient colour contrast for all text elements
- Keep explanatory text clear and easy to understand
- Provide actionable next steps when possible
- Images should be decorative and not convey essential information
Web
Semantic markup
- Use appropriate heading levels for the text explanation (typically <h2> or <h3> depending on the page hierarchy)
- Use the correct buttons and button groups
- The decorative illustration should use <img> with alt="" or have aria-hidden="true" if using SVG
Accessible labelling
- The decorative graphic should have alt="" or aria-hidden="true" since it does not convey essential information
- Text content should be structured with a proper heading hierarchy
- Ensure any buttons have clear, descriptive labels
Focus management
- If the empty state appears after a user action (e.g., clearing a list), consider moving focus to the heading or primary action button
- Ensure all interactive elements (buttons) are keyboard accessible
- Maintain logical tab order through the empty state elements
React Native
- Use appropriate heading properties for the text explanation
- Provide accessibilityRole="button" for any action buttons
- The decorative illustration should be hidden from assistive technologies using accessible={false} or importantForAccessibility="no"
- Ensure accessibilityLabel is provided for all interactive elements
- Group related content appropriately for screen reader navigation