前端之家收集整理的这篇文章主要介绍了
html-如何为可访问性和SEO正确注释文章/博客文章预览的内容？ ，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
想要预览文章和博客文章是很常见的,您会在多个地方看到它,包括新闻网站,个人博客网站等等.您可能需要在预览中显示多种内容：
>文章标题
>发布日期
>阅读可能需要多长时间
>各种分类标签
>文章摘要
>文章开头的简短预览片段
前四个在如何注释它们方面非常明显：
>文章和博客文章标题应使用< h1>–< h6>如果可能/可行的话,如果不能,则应将其标记为ARIA role =“ heading”.屏幕阅读器和搜索引擎都了解如何解释这两种变体.
>发布日期应使用< time>在可能的情况下,为帮助屏幕阅读器(如JAWS)和搜索引擎抓取工具标记有设置为日期的datetime.
>阅读时间估计也应使用< time> ;,但将datetime设置为纯持续时间.这使搜索引擎更容易阅读它.
>标记列表应仅使用无序链接列表来帮助屏幕阅读器正确导航.搜索引擎通常会通过其他方式识别它们,因此该格式主要用于辅助功能.
但是最后两个并不是那么明显.我知道可能应该对它们进行类似的对待,但是我似乎在任何地方都找不到任何建议.我的第一个反应是将它们括在< p>中,但这让人感到非常错误,因为它们具有相当普遍的语义含义,而不仅仅是一个文本块.
专门针对可访问性和SEO注释文章和博客文章的摘要和预览的正确方法是什么？ (我不特别包括Microdata和JSON-LD之类的东西,只是基本的HTML ARIA之类的东西.)
@H_
301_26@最佳答案
您似乎对语义HTML以及如何帮助屏幕阅读器
用户有很好的了解.
文章标题是一个不错的开始.使用语义< article>.
标签也很好,尽管
支持直接导航到< 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不会),但我不建议在< time>中“隐藏”信息.元件.例如,
<p>We open presents on <time datetime="2019-12-25 06:00">Christmas</time> early in the morning.</p>
VoiceOver会说“我们在2019年12月25日圣诞节,清晨打开礼物”,但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分钟.
