屏幕阅读器的语义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作为弹性容器，所以我可以像这样更改孩子的视觉顺序：

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

Answer 2

我肯定会考虑你的最新建议（图像在DOM中是最后一个，你用FlexBox更改顺序）。这种方法正是我在这些情况下所做的。

而且我认为你不应该将图像包装在图形标签中。这会更令人困惑。

Answer 3

如果您还没有遇到它，可能需要访问Designing for Screen Reader Compatibility网站的“WebAIM”页面。从该页面......

  

音频界面向用户呈现线性内容，一次一个项目。这与大多数人使用可视界面的方式形成对比。有视觉的用户几乎可以即时扫描整个屏幕，理解整体布局，艺术风格和内容的其他宏观层面。屏幕阅读器用户无法快速理解这些宏观层面。

至少WebAIM“Introduction to Web Accessibility”文章应该是每个自我尊重的网络内容创建者的必读书。