Accessibility reading order VS DOM order in a list of events

Question

I'm trying to fix a CSS/DOM order problem on a website so it can pass an accessibility audit.

The problem is that the website is very visual, and the fixes must not change the appearance (as much as we can).

On the website, there is a list of events:

<h1>Title of website</h1>
<h2>Agenda</h2>
<ul>
    <li>
        <p>Date and time of event</p>
        <h3>Title of event</h3>
        <p>Event metadata</p>
    </li>
    <!-- more agenda items -->
</ul>

Logically, the first paragraph should be placed below the heading so that the content belongs to the correct event. The first thing that I can do is change the DOM order and use CSS to render the paragraph above the heading like so visually;

<li style="display: flex; flex-direction: column;">
  <h3 style="order: 1;">Title of event</h3>
  <p style="order: 0;">Date and time of event</p>
  <p style="order: 2;">Event metadata</p>
</li>

This works and doesn't change the appearance of the event list, but it does change the reading order, which might be weird for sighted screen reader users because the cursor would follow the DOM order.

I found mixed results on whether using CSS order is OK to preserve the appearance.

I've also seen people use landmarks with aria-labelledby to indicate the landmark heading while keeping the reading and visual order identical. But screenreaders show different behavior while navigating landmarks making the behavior even more "unpredictable"?

Do you know what is considered best practice for this particular scenario?

Answer 1

The accessibility guideline that applies in this case is 1.3.2 Meaningful Sequence

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

The guideline might not seem clear but essentially what it means is if the screen reader user navigates sequentially through the page, typically with the down arrow key, navigating the DOM in order (it's actually navigating the accessibility tree and not the document object model, but it's simpler to think of it as the DOM), then if the order of the DOM doesn't "make sense", then it's an issue.

That is, if the order of the DOM affects the meaning of the page, meaning if you were to read the DOM in a different order, the meaning of the page changes, then it's a problem.

I think your new flex layout is more meaningful because the heading (<h3>) is read before the event content. Style-wise, it might visually look ok for the date/time to be before the heading, provided there's some kind of visual grouping or clue for the sighted user that the heading goes with the date/time.

Regarding landmarks, I'm not sure what you mean by "unpredictable" or what the "different behavior" is when navigating by landmarks. Landmarks are well supported by browsers and screen readers.