当部分嵌套深度为 7 时 HTML 标题的最佳做法

Question

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

html
  body
    section
      section
        section
          article
            article
              article

每个分节内容（节、文章）和分节根 (body) 都有一个标题。为了满足良好屏幕 reader 体验的可访问性指南，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" 等等吗？在这种情况下当前的最佳做法是什么？

Answer 1

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

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

This example demonstrates how to implement a level 7 heading using role="heading" and the aria-level attribute. Since HTML only supports headings through level 6, there is no native element to provide these semantics.

...
<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 放在按钮元素上，因为它具有按钮的隐含角色，并且您可以' t 一个 aria-level 在 h1...h6 上因为已经有一个隐含的水平。有关详细信息，请参阅 Document conformance requirements for use of ARIA attributes in HTML。

Answer 2

个人认为<h3>以下的都太小了。 <h4> 是 <p> 的大小。如果你真的想要更小的东西，你可以为它设置 font-size 样式属性。以下是 px 尺寸 <h1> 到 <h6> 的 table:

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}

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

Answer 3

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?

当部分嵌套深度为 7 时 HTML 标题的最佳做法

Best practice for HTML headings when section nesting is 7 deep

html

accessibility

html-heading