部分嵌套深度为 7 时 HTML 标题的最佳实践答案

【问题标题】：Best practice for HTML headings when section nesting is 7 deep部分嵌套深度为 7 时 HTML 标题的最佳实践
【发布时间】：2020-12-14 22:14:22
【问题描述】：

我的应用程序创建了 HTML，它真正导致了语义上正确的 section 和 article 元素的嵌套，这些元素可能有 7 层或更深。例如，排除杂乱，嵌套如下：

html
  body
    section
      section
        section
          article
            article
              article

每个分节内容（节、文章）和分节根（正文）都有一个标题。为了满足可访问性指南以获得良好的屏幕阅读器体验，hN 是根据深度编号的，尽管 HMTL5 建议它们都可以是 h1。比如：

html
  body
    h1
    section
      h2
      section
        h3
        section
          h4
          article
            h5
            article
              h6
              article
                h?

一旦我这么深，不管它有多深，都可以使用h6吗？另外，我应该使用 aria 属性 role="heading" aria-level="7" 等等吗？在这种情况下，目前的最佳做法是什么？

【问题讨论】：

标签： html accessibility html-heading

【解决方案1】：

您的建议似乎是最佳实践，因为它在示例中用于满足ARIA12 Using role=heading to identify headings 下的 WCAG 2.1 成功标准。

页面中的第二个示例说明如下：

此示例演示如何使用 7 级标题 role="heading" 和 aria-level 属性。由于 HTML 仅支持通过第 6 级的标题，没有提供这些的本地元素语义。

...
<h5>Fruit Trees</h5>
...
<h6>Apples</h6>
<p>Apples grow on trees in areas known as orchards...</p>
...
<div role="heading" aria-level="7">Jonagold</div>
<p>Jonagold is a cross between the Golden Delicious and Jonathan varieties...</p>

只要不覆盖元素的隐含语义，您就可以将角色和级别应用于任何元素。例如，您可以将它们放在 div 元素上，但不能将 role 放在按钮元素上，因为它具有按钮的隐含角色，并且您不能 aria- h1...h6 上的级别，因为这些级别上已经存在隐含级别。请参阅Document conformance requirements for use of ARIA attributes in HTML 了解更多信息。

【讨论】：

第 7 级标题必须是 div，还是可以是具有这些属性的 h6？
@DavidFarmer W3C 表示，由于hN 实现了role="heading"，因此不建议将该角色明确分配给hN。目前尚不清楚该位置是什么关于放弃role，但将aria-level 设置为7。
@DavidFarmer。我更新了我的答案，以解决在 h6 元素上设置级别的问题。
@DavidFarmer 似乎有两种选择。 (1) 一旦达到那个深度，我们就可以使用 h6，即使我们真的更深。结果是“真正的 h7、h8、...”的东西将被视为 h6。例如，在 TOC 树中展平。或者 (2) 使用类似于此处示例中的 div 的东西。一个后果是一些基于标题的工具将看不到/尊重 aria 属性并将该内容排除在外。例如，TOC 树可能会遗漏深度 7+ 的内容。我想我更喜欢（1）。

【解决方案2】：

HTML 和 ARIA 通过扩展定义了 6 个标题级别。尽管<div role="heading" level="7"> 在技术上是正确的，但它并没有被所有屏幕阅读器和其他辅助工具普遍认为是第 7 级的标题。例如，Jaws 认为任何具有 aria-level 属性且值在 1-6 之外的元素都是级别 2 的标题。Jaws 的解释并不违反 ARIA 规范。

因此，我建议不要将 aria-level 用于 7 级或更高级别的标题。如果您真的、真的、真的需要 7 级及以上的标题，只需使用 <p> 或 <div> 而无需任何指示，以免打扰不支持 6 级以上标题的屏幕阅读器和其他辅助工具。

但是，在将这个简单的解决方案视为理所当然之前，请先问问自己：
您真的需要深入了解吗？

你应该问自己这个问题，因为事实上，你可能不需要。许多人难以理解冗长的文本和复杂的结构。具有合理长度的普通结构良好的文本不需要使用超过 3 个级别。鉴于其复杂性、深度和长度，技术规范、用户手册或研究论文可能需要 4 个或 5 个。因此，原则上，6 级应该足以构建一个正确、有意义和可理解的结构。

如果您需要更多关卡，可能是您无缘无故跳过关卡，或者您的文字没有经过深思熟虑。你不能以不同的方式组织它吗？也许把它分成不同的部分？

您说的是<section> 和<article>，但它们真的都是分隔部分或文章吗？否则，从语义上讲，它们是否真的在整个文档中都具有分段作用？我对此表示怀疑。我很确定其中一些仅具有视觉分离作用，在这种情况下，您应该将它们替换为<div>。

看看下面的问题，如果我给出了类似的答案： Is h6 aria-level="7" a reliable way to create a h7 element?

【讨论】：

谢谢你，特别是关于 JAWS 的细节。我认为我们的结构是正确的，但我很想听听你的分析。这适用于发布 HTML 数学教科书的应用程序。一页可能是教科书的“部分”（h2）[在书名的横幅中带有 h1]。然后可能有小节（h3）和小节（h4）。在极少数极端情况下，一个小节可能有一个“练习”细分 (h5)。在那里，您可能会找到一个练习（文章 h6），其中包含解决方案等组件（文章 h7）。我们正在努力解决这些罕见的极端情况。
也许你可以采用一个结构，其中“练习 1”、“解决方案 1”、“练习 2”、“解决方案 2”……都具有相同的级别；或者你可以挤出H5“练习”直接有H5“练习1”，H5“练习2”，......如果大多数小节经常连续3个或更少的练习，它不会对导航造成太大伤害。请记住，许多级别也可能意味着要在导航树中展开更多项目。在给定级别中拥有更多项目可能比在更短的级别中更简单，尤其是在级别 4 或以下。简而言之：不要过度分割

【解决方案3】：

我个人认为<h3>以下的任何东西都太小了。 <h4> 是 <p> 的大小。如果你真的想要更小的东西，你可以为它设置font-size 样式属性。下面是px 大小从<h1> 到<h6> 的表格：

H1	H2	H3	H4	H5	H6
32px	24px	18.72px	16px	13.28px	10.72px

所以您建议的“<h7>”将在8px 附近。对于您需要创建<h7> 的<div>，您应该给它class="h7" 并在您的CSS 中输入：

.h7{font-size:8px}

当然，你可以放任何你想要的尺寸。这样，您可以制作更小的类型，尽管这可能不是一个好主意（对于文本可读性）。

【讨论】：

hN 标题有助于描述文档的结构。虽然 hN 有默认大小，但任何好的网站设计都使用 CSS 来设置每个元素的样式。因此，默认字体大小、默认边距或元素的其他默认布局都无关紧要。正确的做法是正确组织元素来描述结构，一旦完成，然后设计布局看起来不错。
@DavidFarmer：对不起。我认为通过添加一个类来将其表示为特定大小，可以通过每次使文本变小来描述结构。如果没有，谢谢你告诉我。
@LakshyaRaj 这是hN 具有更多意义的一个例子。客户端应用程序可能会为页面制作一个“目录”。它将根据这些hN 组织TOC，将h2 放在相同的深度，然后缩进h3，依此类推。如果您在hN 上设置样式以改变视觉外观，这与 TOC 的构建方式无关。这只是一个例子； hN 用于更多的事情，并且改变它们的视觉样式不会影响这些其他事情。