Why it matters
Screen readers don't read your HTML. They read the accessibility tree the browser builds from it: a role, a name and some states for each meaningful element, with layout wrappers dropped. If a button's name comes out empty, or a field is named by its placeholder, or a landmark is hidden by aria-hidden, that's what users hear. DevTools can show the tree, but one node at a time, on a running page.
This inspector builds the tree for pasted HTML in an inert document, so scripts never run. Roles come from the role attribute or the HTML-AAM mappings (a header outside an article is a banner, a section with a name is a region). Names are computed with the accname 1.2 steps in order, and for the node you pick it shows which step produced the name and what it skipped, including circular aria-labelledby chains. It lists landmarks and the heading outline, and flags controls without names, weak names, heading jumps, duplicate unnamed landmarks and focusable content inside aria-hidden. It's an approximation: CSS-generated text and layout-dependent rules aren't seen, so confirm with a screen reader.
How it works
- InputA component or page
- In your browserRoles, names and hidden content worked out per the specs
- OutputThe tree, name traces and issues
Where it fits in a designer's workflow
- Plan
- Design
- Build
- Test
- Launch
By the numbers
Show the numbers as a table
| Role | Nodes |
|---|---|
| link | 5 |
| heading | 4 |
| navigation | 3 |
| paragraph | 3 |
| button | 2 |
| img | 2 |
| listitem | 2 |
| option | 2 |
| banner | 1 |
| checkbox | 1 |
| combobox | 1 |
| contentinfo | 1 |
| form | 1 |
| list | 1 |
| main | 1 |
| region | 1 |
| spinbutton | 1 |
| textbox | 1 |
How to use it
- Paste the HTML, and any CSS that hides things.
- Read the summary and issues.
- Click nodes in the tree to see what a screen reader would say and why.
- Check the landmarks and heading outline.
FAQ
What is the accessibility tree?
A parallel version of the page the browser gives to assistive technology: each meaningful element with a role (button, link, heading), an accessible name, a description and states (checked, expanded). Purely visual wrappers are left out.
How is the accessible name worked out?
By the W3C accname algorithm, in order: aria-labelledby, then aria-label, then the native label (label element, alt, legend, caption), then text content for roles that allow it, then title or placeholder. The first step that produces text wins.
Why is my button announced without a name?
Usually it contains only an icon: an SVG with aria-hidden or an image with empty alt. Add visually hidden text or aria-label to the button.
Does it run my JavaScript or CSS?
No scripts run. CSS is used only to find rules that hide content (display:none, visibility:hidden). Generated content from ::before and ::after isn't included.
How close is it to a real browser?
Close for roles, names and hiding in static HTML; browsers differ in edge cases, and dynamic changes aren't seen. Treat it as a fast first check, then test with VoiceOver, NVDA or TalkBack.
