Help
How to Use This Simulator
- Enter HTML content in the textarea
- Click "Render HTML" to see how it's displayed
- Use Tab key to navigate through focusable elements
- Watch the Screen Reader Output to see announcements
- Enable speech to hear announcements (if browser supports)
- Use H key for headings, L for links navigation
Keyboard Navigation
Standard keyboard shortcuts:
- Tab: Move to next focusable element
- Shift+Tab: Move to previous focusable element
- Enter: Activate links and buttons
- H: Jump to next heading
- L: Jump to next link
Understanding Announcements
Screen readers announce elements with:
- Element type: "button", "link", "heading", etc.
- Element name: Text content or aria-label
- State: "checked", "expanded", "required", etc.
- Level: For headings, "heading level 2"
ARIA Attributes
Common ARIA attributes shown in announcements:
- aria-label: Provides accessible name
- aria-labelledby: References label element
- aria-describedby: Additional description
- aria-hidden: Hides from screen readers
- role: Defines element type
Limitations of This Simulator
This is an educational tool. Real screen readers:
- Have more sophisticated navigation options
- Support additional keyboard shortcuts
- Provide better speech synthesis
- Handle complex ARIA patterns differently
Always test with actual screen readers (NVDA, VoiceOver, JAWS) for production sites.