Accessibility: Creating a Logical Dom

Posted by John Durance 

The Document Object Model (DOM) is an API for HTML and XML documents. It defines these documents as tree structures, which can be accessed and manipulated.

Screen readers look into the DOM, not at what is displayed on the web page/application. Keyboard-only users navigate the DOM in order, from top to bottom, moving focus to navigate up and down. Blind and low-vision users will, likely, be unaware if elements on the web page have been visually re-ordered with CSS. This is why it’s important to have DOM elements ordered logically. For example:


.bottom { position: absolute; bottom: 0 }


<footer class="bottom">More text</footer>


could be better written:

<footer>More text</footer>

For the same reason, it’s important to have parts of a widget (user interface object) grouped together. Splitting up a drop-down menu from its submit button, for example, creates DOM confusion.

Related Blog posts