【发布时间】：2017-05-09 14:59:39
【问题描述】：
假设我的主页上有一个文章预览列表，其设计如下：
左边有一张图片，右边有所有内容（地区、日期、标题、摘要和图片中没有的“阅读更多”按钮）。您将如何在语义上编写此内容并让屏幕阅读器可以访问？
通常我会这样做：
<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 标签中？
任何帮助将不胜感激！
【问题讨论】：
-
你可能想看看ARIA。
-
用
<h2>打开<article>是正确的（前提是您没有跳过页面上的<h1>）。我建议您关注链接文本，因为充满这些内容的页面会在屏幕阅读器中一遍又一遍地显示为“阅读更多”。您可以使用 ARIA 来解决这个问题，或者使用屏幕外文本来包含更多文本，或者您可以只调整副本。 -
@aardrian，在您的其他评论中，您提到不依赖 Flexbox 的
order属性——但在这种情况下有意义吗？ -
这不是关于它是否有意义，而是关于在这种情况下是否为某些用户重新排序页面的某些部分而不是其他用户是一个问题。在这种情况下，可能问题不大。但是，您仍然应该对其进行测试。
标签： html css accessibility semantic-markup screen-readers