For a readable interface, it's important to use visual cues to group or separate content to show which content relates to other content. This makes content easier to read, especially for people who have difficulty reading on-screen content and people who use screen readers.
When grouping content visually, you must make sure that you're not skewing the source order and breaking up the same content for screen-reader users.
Examples
✗ Bad example
In this example of a column-based layout, a 'header row' of headings has been created for content, followed by a second row to adjacently position the respective content:
<div class="row">
<h3>Left content</h3>
<h3>Right content</h3>
</div>
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida tortor dolor, eget laoreet leo bibendum quis. Morbi ac egestas tellus. Maecenas ut consectetur ligula.</p>
<p>Fusce semper quam nulla, eu cursus lacus cursus et. Maecenas rutrum id arcu quis lacinia. Phasellus pharetra dui nisl, at finibus sapien vehicula eget. Aliquam porttitor pellentesque arcu quis sodales. Aliquam sed tempus diam. Morbi rutrum odio in mi condimentum tristique.</p>
</div>
As you can see in this demo page, the "left content" heading appears to be associated with the paragraph beginning "Lorem ipsum". In the source, it's another story: The "Right content" heading comes immediately after "Left content." This means that screen-reader users will hear each headings in succession, and the first heading's association with the "Lorem ipsum" paragraph will not be apparent.
✓ Good example
Before using CSS to position elements visually, get the source order correct first. In this example, section content is grouped together logically before being placed along the horizontal axis with a CSS column class that floats the content left:
<div class="column">
<h3>Left content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean gravida tortor dolor, eget laoreet leo bibendum quis. Morbi ac egestas tellus. Maecenas ut consectetur ligula.</p>
</div>
<div class="row">
<h3>Right content</h3>
<p>Fusce semper quam nulla, eu cursus lacus cursus et. Maecenas rutrum id arcu quis lacinia. Phasellus pharetra dui nisl, at finibus sapien vehicula eget. Aliquam porttitor pellentesque arcu quis sodales. Aliquam sed tempus diam. Morbi rutrum odio in mi condimentum tristique.</p>
</div>
Code editor
Two examples, one good and one bad, of source order accessibility are available to experiment and test with.
See the Pen good and bad source order examples by HUIT - Web, UX and Digital Accessibility Services (@hwpdas) on CodePen.