HTML 标题在嵌套层次达到 7 层时的最佳实践

Question

HTML 标题在嵌套层次达到 7 层时的最佳实践

4

我的应用程序创建HTML，它确实导致语义正确的

和

元素的嵌套可能会深达7层或更多。例如，不考虑杂乱的情况下，嵌套如下：

html
  body
    section
      section
        section
          article
            article
              article

每个部分内容（section，article）和部分根（body）都有一个标题。为了满足良好的屏幕阅读器体验的无障碍指南，hN 按深度编号，即使 HTML5 建议它们都可以是 h1。因此，就像这样：

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

当我深入到这个程度后，只使用 h6 标签是否可以，无论深度有多深？此外，在这种情况下，应该使用 aria 属性 role="heading" aria-level="7" 等吗？目前最佳实践是什么？

- alex.jordan

3个回答

2

HTML和ARIA扩展定义了6个标题级别。虽然<div role="heading" level="7">在技术上是正确的，但并不是所有屏幕阅读器和其他辅助工具都普遍认可它作为第7级标题。例如Jaws认为任何带有值在1-6之外的aria-level属性的元素都是第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?

- QuentinC

1

谢谢您，特别是关于JAWS的具体信息。我认为我们的结构是正确的，但我很想听听您的分析。这是为一个发布HTML数学教科书的应用程序而设计的。一个页面可能是教科书的“章节”（h2）[带有书名的横幅中的h1]。然后可能会有子部分（h3）和子子部分（h4）。在极少数的极端情况下，子子部分可能会有一个“练习”子部分（h5）。在那里，您可能会找到一个练习（文章h6），其中包括解决方案（文章h7）等组件。我们正在尝试考虑这些罕见的极端情况。 - alex.jordan

也许您可以采用一种结构，其中“练习1”，“解决方案1”，“练习2”，“解决方案2”等都具有相同的级别；或者您可以将H5 “练习”挤出来，直接使用H5 “练习1”， H5“练习2”等。如果大多数子部分通常只有3个或更少的练习，那么对导航的影响不会太大。请记住，许多级别也可能意味着导航树中要展开更多的项目。在第4级或以下，拥有更多的项目数量而不是更多的较短级别可能更简单。简而言之：不要过度划分。 - QuentinC

-1

我个人认为，小于<h3>的任何内容都太小了。<h4>的大小与<p>相同。如果您确实想要更小的字体，可以设置其font-size样式属性。下面是<h1>到<h6>的px大小表：

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}

当然，你可以放任何你想要的大小。这样，你甚至可以制作更小的类型，尽管这可能不是一个好主意（为了文本可读性）。

- Lakshya Raj

1

hN标题有助于描述文档的结构。虽然hN有默认大小，但任何好的网站设计都使用CSS来为每个元素设置样式。因此，默认字体大小、默认边距或其他默认元素布局并不重要。正确的做法是正确组织元素以描述结构，一旦完成这一步骤，再设计布局使其看起来好看。 - David Farmer

@DavidFarmer：很抱歉，我以为通过添加一个类来表示它的特定大小会使文本每次变小来描述结构。如果不是这样的话，那么谢谢你让我知道。 - Lakshya Raj

@LakshyaRaj 这里有一个hN更有意义的例子。客户端应用程序可能会为页面制作“目录”。它将根据这些hN组织目录，将h2放置在相同的深度，然后缩进h3等等。如果您对hN添加样式以改变其视觉外观，则不会影响如何构建目录。这只是一个例子；hN用于更多其他事情，更改它们的视觉样式不会影响这些其他事情。 - alex.jordan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel Gimenez · Accepted Answer

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

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

此示例演示如何使用role="heading"和aria-level属性实现第7级标题。由于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 元素上，但是不能在 button 元素上放置 role，因为它具有 button 的隐含角色，也不能在 h1...h6 上放置 aria-level，因为这些元素已经具有隐含级别。详见ARIA属性在HTML中使用的文件符合性要求。