关于 Section 元素

同一天发布的两篇文章

1. Bruce Lawson 在 Smashing Magazine 上： 为什么您应该选择 HTML5 <article> 而不是 <section>
2. Adam Laki 在 Pine 上： <section> 和 <div> 元素的区别

它们比较的内容略有不同，但都涉及到 <section> 元素。

当您需要使用 <div> 时，我发现它非常清楚：当您希望该元素基本上没有意义时。 您仅将其用于样式目的。

每当我想到 <article> 时，我都会想到 RSS：这些少量内容是否可以作为条目（不一定需要是文章的全部内容）？ 如果是，则使用 <article>；如果不是，则不要使用。

Bruce 有一个现成的答案

[...] 将 <article> 不仅视为报纸文章或博客文章，还视为一件衣服——可以在其他上下文中重复使用的独立实体。 因此，您的裤子是一篇文章，您可以将它们与不同的服装搭配穿着；您的衬衫是一篇文章，可以与不同的裤子搭配穿着；您的及膝漆皮细高跟靴是一篇文章。

更重要的是，它具有一些实际的功能。 Bruce 提到 Apple WatchOS 特别使用它来查找页面上的内容。

但是 <section> 则更加模糊。 曾经有一段时间，您应该将部分视为 <h1>–<h6> 标题将重置的地方，但这从未实现，因为它需要一个名为“HTML5 大纲”的东西，而零浏览器支持它。

那么我们是否应该完全使用 <section> 呢？ 根据 Bruce 的说法，有时可以！ Smashing Magazine 的文章设计在文章开头有一个摘要。 从视觉上看，这非常清楚，但对于屏幕阅读器用户来说就不那么清楚了。 解决方案是将摘要包装在一个带有 aria-label 属性的元素中，以使其清晰。 但您不应该使用 aria-label，除非该元素也具有 role 属性。 您可以将角色应用于 <div>，但 <section> 已经有一个良好的默认角色，因此

<section aria-label="quick summary">
  Summary text
</section>

Adam 的文章（对不起，Adam）在这些要点上非常含糊。

主要区别来自语义。 如果您的网站或应用程序中的一部分具有其逻辑，则需要使用 <section> 标签来声明它…

… 当在逻辑上需要使网站或应用程序的一部分对辅助技术可读时，使用 <section>。 如果您牢记屏幕阅读器，这是一个很好的方法。

因此，您会自动获得 role="region" 用于部分，但我不知道这是否对屏幕阅读器有任何帮助，除了标签之外。 在快速测试中（带有启用 VoiceOver 的桌面版 Chrome），没有 aria-label 的 <section> 在 Web Rotor 的“地标”部分中不存在，但一旦添加了 aria-label，它就会显示出来。

重点是：不要仅仅使用 <section> 并认为您正在为无障碍性做一些好事。 它的用途非常有限，仅用于建立地标。 即使那样，您也没有提供太多帮助。 评论中的 Leonie Watson

当在视觉隐藏的标题和带有可访问名称的 section 元素之间进行选择时，在决定哪种方法是正确的方法之前，需要考虑一些事项。

当 section 元素具有可访问名称时，它会成为一个可导航的地标元素，因此屏幕阅读器用户可以使用其屏幕阅读器的快捷键从一个地标导航到另一个地标——就像他们使用标题一样。

但是，根据最近的 WebAIM 屏幕阅读器用户调查，68% 的屏幕阅读器用户更喜欢通过标题导航，而 2.9% 的用户更喜欢地标。

因此，从严格的无障碍性角度来看，您可能可以删除标题，但从可用性的角度来看，您确实希望保留标题——至少在更多屏幕阅读器用户表达对使用地标导航内容的偏好之前。