Screen Reader Simulator – Learn Accessibility

This is a simplified educational simulator. Real screen readers like NVDA, JAWS, and VoiceOver are much more sophisticated. What this simulator shows: Basic sequential content reading Element type announcements (heading, link, button) ARIA label and alt text reading General flow of how screen readers work What real screen readers also do: Complex navigation by element type (headings, links, forms) Table navigation (row/column headers) Landmark navigation (main, nav, aside) Live region announcements Form mode vs browse mode Detailed accessibility tree interpretation Hundreds of keyboard shortcuts Bottom line: Use this to learn basics, but always test with real screen readers for production.

Major screen readers by platform: Windows: NVDA: Free, open-source, most popular free option. Download from nvaccess.org JAWS: Professional, paid (~$1000+), most feature-rich but expensive Narrator: Built into Windows, improving but less popular than NVDA/JAWS macOS/iOS: VoiceOver: Built-in, free, widely used. Enable with Cmd+F5 on Mac Android: TalkBack: Built-in Google screen reader, free Testing recommendation: At minimum, test with NVDA (Windows) and VoiceOver (Mac) as they're free and widely used.

Getting started with NVDA (easiest for beginners): Download & install NVDA: Get it free from nvaccess.org Start NVDA: It will begin speaking immediately Open your website in a browser Basic navigation: Down Arrow: Next element H: Next heading K: Next link B: Next button Insert + F7: List all headings/links Stop NVDA: Insert + Q What to listen for: Can you understand the page structure from headings? Do images have meaningful alt text descriptions? Are form inputs properly labeled? Is link purpose clear from link text? Can you complete tasks without seeing the screen?

Screen readers prioritize accessible names in this order: aria-labelledby: References another element's text aria-label: Direct string label Text content: Visible text inside element title attribute: Tooltip text (least reliable) Example: <button aria-label="Close dialog"> × </button> Screen reader announces: "Close dialog, button" (not "times, button") When to use aria-label: Icon-only buttons where visual text isn't needed When you need to provide more context than visible text To override confusing default text When NOT to use aria-label: Don't override meaningful visible text Don't duplicate visible text unnecessarily Prefer visible labels when possible

For screen readers, images need alternative text: Informative images: <img src="chart.png" alt="Bar chart showing 50% increase in sales from Q1 to Q2" > Decorative images: <img src="decoration.png" alt=""> <!-- Empty alt tells screen readers to skip --> Functional images (buttons, links): <a href="/home"> <img src="logo.png" alt="Company name homepage"> </a> Complex images (charts, diagrams): <img src="complex-chart.png" alt="Sales trends 2020-2024" aria-describedby="chart-description" > <div id="chart-description"> Detailed text description... </div> What screen readers announce: "Image, [alt text]" or if alt is empty, the image is skipped entirely.

Use both! They serve different purposes: This simulator is good for: Quick understanding of how content is read Learning screen reader basics Demonstrating to stakeholders Initial content review Checking if elements have accessible names Real screen readers are essential for: Production testing before launch Testing complex interactions (forms, dialogs, menus) Verifying navigation patterns Testing with actual assistive technology WCAG compliance certification Understanding true user experience Testing workflow: Use this simulator to learn and identify obvious issues Test with NVDA (free) for Windows testing Test with VoiceOver (free) for Mac/iOS testing Consider hiring users with disabilities for user testing