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?