Semantic HTML best practice for a screen reader

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>
    <a href="#">Read More</a>
  </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>
    <a href="#">Read More</a>
  </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>
    <a href="#">Read More</a>
  </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!

Opening the <article> with an <h2> is spot-on (provided you have not skipped the <h1> on the page). I suggest you focus on the link text, since a page full of these will speak as "Read more" over and over in a screen reader. You can use ARIA to get around that, or off-screen text to include more text, or you can just adjust the copy. — aardrian
@aardrian, in your other comment you mentioned not relying on Flexbox's order property--does it make sense in this case though? — user2909019
It's not about whether it makes sense, it's about whether in this context re-ordering parts of the page for some users but not others is an issue. In this case, probably not much of an issue. However, you should still test it. — aardrian

Adam Adam · Accepted Answer · 2017-05-10T14:37:26

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>
    <a href="#">Read More</a>
  </div>
</article>

Note that, as the article tag is not announced by NVDA, you may replace the article tag with div[role=region]

Semantic HTML best practice for a screen reader

3 Answers

What's the best way to make an heading appear after a related content?