Do screen readers read the source code or the DOM?

Screen readers interact primarily with the Document Object Model (DOM) rather than the raw source code of a webpage. The DOM is a structured representation of the web page that reflects its current state, including any changes made by JavaScript or other dynamic content modifications after the page has loaded.

When a web page is rendered in a browser, the browser constructs a DOM that represents the visual and interactive elements of the page as they are presented to users. Screen readers utilize this DOM to interpret and convey information about the page to users. This includes reading text, understanding relationships between elements, and conveying the semantic meaning of the document.

In contrast, the source code consists of the original HTML, CSS, and JavaScript files as they were written by the developer. While the source code defines the structure and content of the webpage, any dynamic content updates or alterations made after the page loads would not be reflected in the original source code but would appear in the DOM. Therefore, it is through the DOM that screen readers access and communicate the content effectively to users with visual impairments. Understanding this distinction is crucial for ensuring that web accessibility features are implemented correctly and that users have a meaningful experience when using assistive technologies.