How do Screen Readers Work with a Website?

How do screen readers work with a website?

A screen reader converts your page’s code into speech by reading its structure rather than its visual layout. 

Here's what's happening underneath. When a page loads, the browser builds an accessibility tree: a map of every element's role, name, and state. The screen reader reads that tree aloud, so a button announces as "button," a heading announces as "heading level two."

Three developer fundamentals determine whether this works. Semantic HTML conveys meaning automatically, so a native button element is announced correctly, whereas a clickable div is not. An accessible name, supplied by visible text, a label, alt text, or aria-label, tells the user what each control does. Keyboard support matters because many screen reader users navigate by headings, landmarks, and the tab key rather than a mouse. 

ARIA can add roles and states when native HTML falls short, but the rule is to use native HTML first and reserve ARIA for cases it can't cover. These practices map directly to WCAG 2.1 AA, the technical standard U.S. courts and the DOJ reference for ADA compliance online.