An important consideration when applying CSS to a page is the relationship that the CSS stylesheet has with the HTML document’s underlying structure. This relationship may not seem very important, but if mismanaged or ignored, it can have a huge impact on the accessibility and navigability of a web page.

Take a list of elements, for instance, that is styled to look like the image gallery below:

At first glance, this gallery seems fine, especially to users who do not have special accessibility needs, but any attempt to navigate this board without a mouse would say otherwise. The order of the elements visually is completely different from their order in the DOM. This will lead to an increased difficulty for a user using alternative navigation methods from navigating the page properly.

Additionally, screen readers process the order of the DOM, so it is possible to have a mismatch between what is visually presented and what is being read. In this case, the screen reader would read the elements seemingly out of order relative to how they are displayed on the page.

Due to these considerations, it is important to order the content on your page to make sense in the absence of styling. This will lead to a uniform experience for all users.