Semantic HTML best practice for a screen reader - html

Question

Suppose I have a list of article previews on my homepage with the following design:
where there's an image to the left with all of the content to the right (region, date, title, abstract, and a Read More button that isn't in the image). How would you go about writing this semantically and accessible to screen readers?
Typically I would do something like this:
<article>
<img class="image" src="path/to/image" alt="appropriate alt text">
<div class="content">
<div class=""info>
<span class="region">Europe</span>
<time class="date" pubdate>Date</time>
</div>
<h2 class="title">Article Title</h2>
<p class="abstract">Abstract of article...</p>
Read More
</div>
</article>
But, I feel like this could be more semantic and accessible for screen readers. One thought I had was doing something like this:
<article>
<img class="image" src="path/to/image" alt="appropriate alt text">
<div class="content">
<h2 class="title">Article Title</h2>
<div class=""info>
<span class="region">Europe</span>
<time class="date" pubdate>Date</time>
</div>
<p class="abstract">Abstract of article...</p>
Read More
</div>
</article>
and since I have .content as a flex container, I can change the visual order of the children like so:
.content {
display: flex;
}
.info {
order: -1;
}
This way a screen reader will read the title of the article before reading the region and date. Does this make sense? I'm trying to become more familiar with semantic and accessibility best practices.
Similarly, would it make sense to change the DOM order of the image and the rest of the content. Like so:
<article>
<div class="content">
<h2 class="title">Article Title</h2>
<div class=""info>
<span class="region">Europe</span>
<time class="date" pubdate>Date</time>
</div>
<p class="abstract">Abstract of article...</p>
Read More
</div>
<img class="image" src="path/to/image" alt="appropriate alt text">
</article>
And then change the visual order:
article {
display: flex;
}
.image {
order: -1;
}
Or would this cause too much confusion? My thought process is that I would like to deliver the most important information of the article to the screen reader first. Are there any reasons to not use this approach? Maybe users are accustomed to image first, content second?
Semantically speaking, is this how you would organize this code? Any improvements that could be made? Maybe wrapping the image in a figure tag?
Any help would be appreciated!

Answer 1

What's the best way to make an heading appear after a related content?
You can use the aria-labelledby attribute to indicate the label of the region
<article aria-labelledby="title1">
<img class="image" src="path/to/image" alt="appropriate alt text">
<div class="content">
<div class="info">
<span class="region">Europe</span>
<time class="date" pubdate>Date</time>
</div>
<h2 class="title" id="title1">Article Title</h2>
<p class="abstract">Abstract of article...</p>
Read More
</div>
</article>
Note that, as the article tag is not announced by NVDA, you may replace the article tag with div[role=region]

Answer 2

I would definitely go with your latest suggestion (the image is last in the DOM and you change the order with FlexBox). This approach is exactly what I do in those situations.
And I don't think you should wrap the image in a figure tag. It would be more confusing.

Answer 3

If you haven't come across it already it might be worth visiting the "Designing for Screen Reader Compatibility" page of the WebAIM website. From that page...
Audio interfaces present content linearly to users, one item at a time. This contrasts with the way in which most people use visual interfaces. Sighted users can scan an entire screen almost instantaneously, comprehending the overall layout, the artistic style, and other macro-level aspects of the content. Screen reader users cannot comprehend these macro-level aspects as quickly.
At the very least the WebAIM "Introduction to Web Accessibility" article should be an obligatory read for every self-respecting web-content creator.