CODEWITHSUNDEEP
htmlcssaccessibilitysemantic-markupscreen-readers
user2909019
user2909019

Reputation: 843

Semantic HTML best practice for a screen reader

Suppose I have a list of article previews on my homepage with the following design:

Article 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!

Upvotes: 2

Views: 734

Answers (3)

Adam
Adam

Reputation: 18807

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]

Upvotes: 2

Brian Peacock
Brian Peacock

Reputation: 1849

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.

Upvotes: 0

Chere
Chere

Reputation: 77

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.

Upvotes: 1

Related Questions