What is Screen Reader Text Preview?

Screen Reader Text Preview shows how assistive technology reads your HTML content. It surfaces the accessible name, role, and reading order of every element, so you can catch missing labels, broken heading structure, and ARIA problems before real users hit them.

The tool parses your HTML the same way a screen reader's accessibility tree builds one: it strips visual layout, resolves aria-label and aria-labelledby, picks up alt text on images, and flattens the result into a linear reading sequence. The issues panel flags links without accessible names, heading-level jumps, images missing alt, and form controls without labels.

How to use

1. Paste your HTML content or enter a URL to analyze.
2. Review the linearized reading order and element accessibility tree.
3. Fix flagged issues and re-test until the reading flow is clear.

When to use

• Before shipping a landing page that needs to clear a WCAG AA audit.
• Debugging why a NVDA or VoiceOver user reported a confusing nav menu.
• Reviewing third-party widget HTML for accessibility regressions after an update.

Result

A developer pastes a navigation menu. The tool reveals that 3 links have no accessible names and the heading order jumps from h1 to h4, causing confusion for screen reader users.

FAQ

Does this replace testing with a real screen reader?

No. NVDA, JAWS, and VoiceOver each have their own quirks around how live regions, table headers, and dynamic content get announced. Use this tool to catch the obvious problems before you spend time in a real screen reader.

Why does my decorative icon show up as an issue?

Screen readers announce every img by default. If an icon is purely decorative, add an empty alt attribute and aria-hidden true. The tool then skips it in the reading order. Avoid using alt=icon or alt=decoration, that's worse than nothing.

What's the right heading order?

Exactly one h1 per page, and never skip levels going down (h2 should not be followed by h4). Going back up is fine. Screen reader users navigate by jumping between headings, so a broken hierarchy makes the page feel maze-like.

Should every interactive element have an aria-label?

No. A button with visible text doesn't need aria-label; the visible text becomes the accessible name automatically. Only add aria-label when there's no visible text (icon-only buttons) or when the visible text isn't descriptive (rows of Read more links).

Can I paste a whole page in?

Yes, paste the full HTML source. The tool ignores scripts, styles, and meta tags and focuses on the document body. For huge pages, consider checking one section at a time so the issues list stays readable.

Related Tools