Meaningful Structure

Checklist » DOM Presence

✓ Meaningful Structure

Does the component's DOM structure reflect the relationship between elements, such that those relationships are clear to a user relying on an assistive device?

[This article is a stub, and is not yet complete.]

Assistive technologies such as screen readers rely on DOM structure to decide what elements are worth describing to the user, and in what order that information should be displayed. These operations rely on the DOM structure reflecting the meaningful relationship between elements.

DOM structure is also used to determine tab order. See Focusable.

Also need to consider order of <content> elements whose select="..." clauses may move elements into a visual presentation which differs radically from their DOM order.

Examples of bad structure:

• A popup element that is added at the end of the document. This may be done because it makes it simpler for the popup to appear on top of all other pages elements. Unfortunately, it breaks the principle of Meaningful Structure, because the popup appears far away in the DOM from the element which invoked it.
• Using CSS to absolutely position elements to have a visual relationship (e.g., adjacency) which is not reflected in their relative DOM positions.