html - 屏幕阅读器的语义 HTML 最佳实践

Question

假设我的主页上有一个文章预览列表，设计如下:

左侧有一张图像，右侧有所有内容(区域、日期、标题、摘要和图像中未包含的“阅读更多”按钮)。您将如何以语义方式编写此内容并让屏幕阅读器可以访问？

通常我会做这样的事情:

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

---

但是，我觉得这对于屏幕阅读器来说可能更加语义化并且易于理解。我的一个想法是做这样的事情:

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

由于我有 .content 作为 flex 容器，我可以像这样更改子项的视觉顺序:

.content {
  display: flex;
}

.info {
  order: -1;
}

这样，屏幕阅读器将在阅读区域和日期之前阅读文章的标题。这有道理吗？我正在努力更加熟悉语义和可访问性最佳实践。

---

同样，更改图像和其余内容的 DOM 顺序是否有意义？就像这样:

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

然后更改视觉顺序:

article {
  display: flex;
}

.image {
  order: -1;
}

或者这会引起太多困惑吗？我的思考过程是，我想首先将文章中最重要的信息传递给屏幕阅读器。有什么理由不使用这种方法？也许用户习惯于图像第一，内容第二？

---

从语义上讲，这是您组织代码的方式吗？有什么可以改进的地方吗？也许将图像包装在 figure 标签中？

如有任何帮助，我们将不胜感激!

Answer 1

使标题出现在相关内容之后的最佳方式是什么？

您可以使用aria-labelledby属性来指示区域的标签

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

请注意，如 article tag is not announced by NVDA ，您可以将 article 标签替换为 div[role=region]