如何正确注释文章/博客帖子预览的可访问性和SEO的内容？

Question

想要有文章和博客帖子预览很常见，你可以在几个地方看到它，包括新闻网站，个人博客网站等。您可能希望在该预览中显示各种内容：

• 文章标题
• 发布日期
• 阅读需要多长时间
• 各种分类标签
• 文章的简短摘要
• 帖子开头的简短预览片段

关于如何注释它们，前四个非常明显：

• 文章和博客文章标题应尽可能/实际使用<h1>-<h6>，如果不能，则应标记为ARIA role="heading"。屏幕阅读器和搜索引擎都了解如何解释这两种变体。
• 它的发布日期应尽可能使用<time>，标记为datetime设置为日期，以帮助屏幕阅读器（如JAWS）和搜索引擎爬虫。
• 阅读时间估计也应使用<time>，但datetime设置为纯粹的持续时间。这使搜索引擎可以更轻松地阅读它。
• 标签列表应该只使用无序的链接列表来帮助屏幕阅读器正确导航它。搜索引擎通常通过其他方式识别它们，因此格式主要用于可访问性。

但最后两个并不那么明显。我知道他们应该被对待彼此相似，但我似乎无法在任何地方找到任何建议。我的第一反应是将它们包含在<p>s中，但这感觉非常错误，因为它们具有相当普遍的语义含义，而不仅仅是一个文本块。

什么是专门为可访问性和SEO注释文章和博客文章的摘要和预览的正确方法？ （我特别不包括Microdata和JSON-LD之类的东西，只是基本的HTML + ARIA内容。）

Answer 1

您似乎很好地处理了语义HTML以及它如何帮助屏幕阅读器用户。文章的标题是一个很好的开始。使用语义<article>标签也很好，虽然支持直接导航到 某些屏幕阅读器（JAWS和VoiceOver但不支持NVDA）仅支持tag。

如果您有文章的片段并以省略号和“阅读更多”类型链接结束，请确保“阅读更多”具有其他上下文信息，例如：

<article>
  <h2 id="articleHeading1">Are flying cars a reality?</h2>
  <p>Flying cars are common in science fiction movies, but do we have the technology to build them today. In an
    interview with Dr Foobar...<a href="#" id="readMore1" aria-labelledby="readMore1 articleHeading1">read more</a>
  </p>
  <ul aria-label="tags">
    <li>science fiction</li>
    <li>cars</li>
  </ul>
</article>

<time>元素可以帮助一些屏幕阅读器（VoiceOver会宣布它，但NVDA不会），但我不建议在元素中“隐藏”信息。例如，

<p>We open presents on <time datetime="2019-12-25 06:00">Christmas</time> early in the morning.</p>

VoiceOver会说“我们在圣诞节，2019年12月25日，早上6点，清晨打开礼物”，但NVDA只会说“我们在圣诞节早上打开礼物”。

因此，一些屏幕阅读器用户将听到额外的日期/时间信息（“早上6点”），但其他人则不会。有视觉的用户也不会知道早上6点的时间。如果您使用<time>元素中指定的内容直观地显示所显示的内容，那么您就可以了，但是<time>元素不会真正为您买任何东西。

将标签列表放在<ul>中就可以了。这是足够的语义信息才有意义。屏幕阅读器用户可以使用L快捷键导航到列表元素。您不需要特殊的“这些是标签”描述，但您当然可以这样做。

<ul aria-label="these are the tags">
  <li>alpha</li>
  <li>beta</li>
  <li>gamma</li>
</ul>

阅读文章的时间正是你所说的，只是文字。一个<p>很好。但请注意，对某些用户来说，阅读估算可能会给您带来压力。对于导致阅读时间较慢的认知障碍，这些用户可能会感觉到在这段时间内阅读文章的“压力”。估计是对文章长度的一个很好的猜测，但对平均阅读时间是主观的。一种优选的方法可能只是陈述文章的长度，可能是段落的数量，或粗略估计如果使用默认设置打印多少“页面”。因此，对于屏幕阅读器用户而言，“半页”的文章可能意味着15秒，语音速率设置得非常高，或者对于普通读者来说是3分钟，或者对于阅读障碍来说是15分钟。