What is a DOM, and how does it affect accessibility?
Question
Answer
DOM stands for “Document Object Model,” and it describes the structure of a document. For webpages, the DOM is commonly expressed as HTML and starts with an <html> tag, followed by <head>, <body> and a hierarchical structure of other elements that web browsers will use to display the page.
Each webpage's accessibility tree is a subset of the DOM that communicates element roles, names, properties, states, and relationships, and it is available to users on assistive technology.
You may also hear the phrase DOM order, which is how elements are ordered in the DOM. Assistive technologies present content to users in DOM order, regardless of how the content is styled. In the Accessible Web Academy course Sequence and Semantics, there is an example that shows how DOM order affects the interpretation of content for assistive technologies.
Generally, elements should be in the same order in the DOM as they appear on the page. This ensures the focus order is consistent with the visual appearance of the page. Content can be repositioned with CSS, but the visual order should always match the DOM order.
