Comparison
Accessibility treevsScreen reader
Accessibility tree
you opened the accessibility panel and saw what a screen reader sees, which was not what you drew.
The parallel tree the browser derives from the DOM, holding each node's role, name, state and value — the version of your interface assistive technology consumes. Elements can be present in the DOM and absent from it, or present with a role you did not intend. Inspecting it directly turns accessibility from guesswork into reading the output, which is why the devtools panel is the fastest tool in this whole section.
Full entry →Screen reader
you turned one on and heard your interface read out as a flat sequence with no structure at all.
Software that presents the accessibility tree as speech or braille and provides its own navigation over headings, landmarks and controls. Behaviour varies meaningfully between combinations of reader and browser, so 'works in VoiceOver' is not the same as 'accessible'. Nothing substitutes for listening to your own page once, which is usually a short and educational experience.
Full entry →