时间戳

首页 > 解决方案 > 如何为可访问性和 SEO 正确注释文章/博客文章预览的内容？

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

问题描述

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

前四个非常明显地说明了您应该如何注释它们：

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

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

标签： htmlsemantic-markupwai-aria

解决方案

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

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

<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 不会），但我不建议在 <time> 元素中“隐藏”信息。例如，

<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> 元素不会真正为您购买任何东西。

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

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

读一篇文章的时间正是你所说的，只是文字。A<p>没问题。但是请注意，对某些用户来说，进行阅读估计可能会带来压力。对于导致阅读时间变慢的认知障碍，这些用户可能会感到“压力”要在这段时间内阅读文章。该估计是对文章长度的一个很好的猜测，但对平均阅读时间是主观的。一种首选的方法可能是仅说明文章的长度，可能是段落数，或者粗略估计如果使用默认设置打印将会有多少“页”。因此，一篇“半页”的文章对于语速设置非常高的屏幕阅读器用户可能意味着 15 秒，对于普通读者来说可能意味着 3 分钟，对于阅读障碍可能意味着 15 分钟。

推荐阅读