Question

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

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

在注释方式上，前四个很明显：

文章和博客文章标题应尽可能使用<h1>-<h6>，如果不能，则应使用ARIA role="heading"进行标记。屏幕阅读器和搜索引擎都了解如何解释这两种变体。
发布日期应尽可能使用<time>，并用datetime标记为帮助屏幕阅读器（例如JAWS）和搜索引擎抓取工具的日期。
阅读时间估算值也应使用<time>，但应将datetime设置为纯持续时间。这使搜索引擎可以更轻松地阅读它。
标签列表应仅使用无序列表的链接列表，以帮助屏幕阅读器正确导航。搜索引擎通常会通过其他方式识别它们，因此该格式主要用于辅助功能。

但是最后两个不是很明显。我知道可能应该对它们进行类似的对待，但是我似乎在任何地方都找不到任何建议。我的第一个反应是将它们用<p>括起来，但这让人感到非常错误，因为它们具有相当普遍的语义含义，而不仅仅是一个文本块。

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

Answer 1 · 元素中“隐藏”信息。例如，

您似乎对语义html以及如何帮助屏幕阅读器用户有很好的了解。文章标题是一个不错的开始。使用语义<article>标签也很好，尽管仅在某些屏幕阅读器（JAWS和VoiceOver而不是NVDA）中支持直接导航到

标签。

如果您有文章的摘要，并以省略号和“更多内容”类型的链接结尾，请确保“更多内容”具有其他上下文信息，例如：

<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点的时间。如果您将显示的内容与元素中指定的内容进行镜像映射，那么您会没事的，但是元素并不会真正给您带来任何好处。

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

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

阅读文章的时间正是您所说的，只是文字。 <p>很好。但是请注意，拥有阅读估计值可能会对某些用户造成压力。对于导致阅读时间变慢的认知障碍，那些用户可能会感到在这段时间内阅读文章的“压力”。该估计值可以很好地估计文章的长度，但要以平均阅读时间为准。一种首选的方法可能是只说明文章的长度，也许是段落数，或者是使用默认设置进行打印时大概估计多少“页面”。因此，一篇“半页”文章对于具有较高语音速率的屏幕阅读器用户可能意味着15秒，对于普通阅读器来说可能意味着3分钟，对于阅读障碍者来说可能意味着15分钟。

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

1 个答案: