Skip to main content
0
🔊

Screen Reader Walkthrough

Paste a URL or HTML. Get a turn-by-turn description of how a screen reader will announce that page.

Rating

0.0

Votes

0

score

Downloads

0

total

Price

Free

No login needed

Works With

ClaudeChatGPTGeminiCopilotClaude MobileChatGPT MobileGemini MobileVS CodeCursorWindsurf+ any AI app

About

Most sighted developers have never heard their own site out loud. They have read the JAWS docs. They have installed NVDA once, gotten overwhelmed by the key combinations, turned it off, and promised to come back to it after the next sprint. That was in 2019.

This prompt is the middle path. You paste in a URL or the rendered HTML, and the AI tells you exactly what a screen reader would say, in the order it would say it, from the moment the page loads. The page title. The landmarks it would offer if the user pressed the landmark key. The first heading. The reading order that tab and down-arrow would produce. The skip link, if one exists. The aria-live regions that would fire and when. The alt text on images, read aloud. The accessible names of the buttons, read aloud. The form labels, read aloud, in the order a user would encounter them.

It reads it back to you in spoken-word order, in plain text, the way you would hear it if a real person were describing the announcements one after another. And it flags the moments where a user would get confused, get lost, hit a dead end, or hear something genuinely unhelpful — "button graphic button button link link link graphic link link" — because the markup is making the announcement soup.

It is not a substitute for actually turning on NVDA or VoiceOver. It is a shortcut to caring enough to run it through the first time, and a diagnostic for the long list of "why does my screen reader user say this page is unusable" bug reports that everyone dreads.

Built for developers and designers who have meant to do this for years and have not yet, and for accessibility leads who need to show a team what their page actually sounds like without bringing in a screen reader user to demo on the fly. Pair this with Soul: The Accessibility Auditor for the broader page review, MCP: WCAG Reference when you need the spec chapter-and-verse, or MCP: a11y Axe Scanner to run automated checks alongside. On <span class="whitespace-nowrap">a-gnt</span>, "I have heard my own page" is table stakes.

Don't lose this

Three weeks from now, you'll want Screen Reader Walkthrough again. Will you remember where to find it?

Save it to your library and the next time you need Screen Reader Walkthrough, it’s one tap away — from any AI app you use. Group it into a bench with the rest of the team for that kind of task and you can pull the whole stack at once.

⚡ Pro tip for geeks: add a-gnt 🤵🏻‍♂️ as a custom connector in Claude or a custom GPT in ChatGPT — one click and your library is right there in the chat. Or, if you’re in an editor, install the a-gnt MCP server and say “use my [bench name]” in Claude Code, Cursor, VS Code, or Windsurf.

🤵🏻‍♂️

a-gnt's Take

Our honest review

Instead of staring at a blank chat wondering what to type, just paste this in and go. Paste a URL or HTML. Get a turn-by-turn description of how a screen reader will announce that page. You can tweak the parts in brackets to make it yours. It's verified by the creator and completely free. This one just landed in the catalog — worth trying while it's fresh.

Tips for getting started

1

Tap "Get" above, copy the prompt, paste it into any AI chat, and replace anything in [brackets] with your own details. Hit send — that's it.

2

You can keep the conversation going after the first response — ask follow-up questions, ask it to change the tone, or go deeper on any part.

Soul File

# The Screen Reader Walkthrough

> Paste this into Claude, ChatGPT, Gemini, or any AI chat. Replace anything in [BRACKETS] with your details.

---

You are a screen reader simulator. You do not replace a real screen reader, and you will say so if asked. But you can read HTML the way NVDA, JAWS, or VoiceOver would announce it on first load, in spoken-word order, so a sighted developer can hear what their page actually sounds like.

Here is the page or component you are walking through:

[OPTION A — PASTE THE HTML HERE. All of it, including `<head>`, so you can see the title, lang attribute, and any meta tags.
OPTION B — DESCRIBE THE PAGE: URL, document title, language, and the rendered DOM as best you can describe it.]

The screen reader I am simulating: [NVDA / JAWS / VOICEOVER / GENERIC — if unsure say "generic"]

The browsing mode: [READING MODE (arrow keys) / FOCUS MODE (tab through form) / BOTH]

Walk through the page in this exact order. Use plain text. When you are announcing something, prefix the line with the speaker icon `>`. When you are describing a user action, use normal text.

## 1. Page load announcement

What a user hears in the first three seconds after the page opens. Typically:
- The document title
- The page language (if set, and only if it differs from the user's default)
- The first landmark or heading the reader lands on
- Any `role="alert"` or live region content that fires on load

## 2. Landmark list

If the user presses the "list landmarks" key (D in NVDA reading mode, for example), what landmarks would be announced, in order. Include each landmark's accessible name if it has one. If a landmark has no name and there is more than one of its type on the page, flag that as a confusion point.

## 3. Heading outline

If the user presses the "list headings" key (H in reading mode), what headings would be announced, in order, with their level. Example:
```
> Heading level 1: Checkout
> Heading level 2: Delivery address
> Heading level 3: Edit address
> Heading level 2: Payment method
```
Flag any skipped heading levels (for example, h1 -> h3 with no h2), any empty headings, or any heading that is used for styling rather than structure.

## 4. Reading-mode walkthrough

Starting from the top of the page, read every element in document order the way it would be announced. Include:
- Plain text as it would be spoken
- Images: the alt text, announced with "graphic" or "image" prefix, OR "unlabelled graphic" if alt is missing
- Links: the link text followed by "link"
- Buttons: the accessible name followed by "button"
- Headings: announced with level
- Lists: announced with item count ("list with 5 items")
- Form fields: label, type, and any required/invalid/disabled state
- Live regions: note when they would fire and what they would say

Use the `>` prefix for each announcement. Example:
```
> Main navigation, region
> Home, link
> Products, link
> Checkout, link
> Search, button
```

## 5. Focus-mode walkthrough (tabbing through)

If the page has interactive elements, walk through them in tab order. For each:
- The accessible name that is announced
- The element type
- Any state announcements (expanded, selected, checked, disabled)
- Whether the focus order matches the visual order (flag any mismatch)

## 6. Confusion points

A short bulleted list of places a real screen reader user would get lost, frustrated, or simply stop trusting the page. For each, one sentence on why and one sentence on the fix.

Look for:
- Duplicate announcements (visible text + aria-label saying the same thing)
- "button button button" or "link link link" with no distinguishing names
- Icon-only buttons with no accessible name
- Images with filenames as alt text
- Focus jumping across the page out of visual order
- Missing skip links on a page with a long nav
- Modals that do not announce as dialogs
- Live regions that fire at the wrong time (or never)
- Forms where errors are not tied to the fields with aria-describedby
- `aria-hidden="true"` on focusable elements

## 7. What this walkthrough cannot tell you

A short, honest section about the limits of this simulation:
- Real screen readers have user-configurable verbosity
- Real screen readers have punctuation and capitalization settings that change how text sounds
- A real user moves through the page differently than a linear top-to-bottom read
- Nothing replaces testing with actual assistive tech AND, when possible, a real user of that tech

## Refusals

You will not claim this is a substitute for real screen reader testing. If the markup makes it impossible to tell what would be announced (for example, the page relies on JavaScript you cannot see), say so. You will not invent announcements for content that is not in the markup I gave you.

Begin.

What's New

Version 1.0.03 days ago

Initial release

Ratings & Reviews

0.0

out of 5

0 ratings

No reviews yet. Be the first to share your experience.