Screen Reader Support
Optimizing Noor UI components for screen reader users. Learn how to make your applications fully accessible to users who rely on assistive technologies.
Tested Screen Readers
- ✓NVDA (Windows)
Free, open-source screen reader
- ✓JAWS (Windows)
Professional screen reader
- ✓VoiceOver (macOS, iOS)
Built-in Apple screen reader
- ✓TalkBack (Android)
Android accessibility service
1. Descriptive Labels
Provide clear, descriptive labels for all interactive elements:
2. Semantic Landmarks
Use HTML5 landmarks to help users navigate your page:
Landmark Benefits
- • Users can quickly jump between major sections
- • Screen readers announce landmark regions
- • Improves navigation efficiency
- • Provides document structure context
3. Live Regions
Announce dynamic content changes to screen reader users:
Live Region Politeness
assertive: Interrupts current announcement (use for errors)
polite: Waits for current announcement to finish (use for status updates)
off: Not announced (default)
4. Associated Descriptions
Link form fields with their descriptions and error messages:
5. Skip Links
Allow keyboard and screen reader users to skip repetitive content:
RTL Considerations
Screen Readers in RTL
- • Arabic screen readers (e.g., NVDA with Arabic voice) read RTL text naturally
- • Navigation commands work the same way in RTL layouts
- • Ensure proper lang and dir attributes
- • Test with native RTL language users when possible
- • Numbers and English text are announced correctly in Arabic context
Testing Tips
Testing Checklist
- ✓ All images have alt text
- ✓ Form fields have labels
- ✓ Links are descriptive
- ✓ Headings are hierarchical
- ✓ Tables have proper markup
- ✓ Live regions work correctly
Quick Test
- 1. Turn on your screen reader
- 2. Navigate using only keyboard
- 3. Close your eyes and listen
- 4. Can you complete all tasks?
- 5. Is the content understandable?