如何用部分语义标记导航，其中部分标题不可单击

Question

• 想象一个导航元素，它不是网站上的主要导航，而是将您导航到网站上某个区域的多个页面。这些页面按类别分组。

• 每个页面的内容本身也有标题，H1、H2 等。

• 在内容之前有一个结构如下的导航部分。此处显示的两个部分不可折叠，也不可单击。该小部件将突出显示您当前所在的任何页面。

---

准备开车

• 检查你的镜子
• 设置导航
• 设置音乐

驾驶

• 点火
• 档位选择器
• 踏板

---

重要提示：“准备驾驶”和“驾驶”不是链接。它们不是页面，只是页面类别。有6页，其中一页是任何时候的“当前页”。当您单击其中一个时，您将转到该页面并看到相同的导航。

我的直觉是做类似的事情：

<nav>
  <h3>Preparing to Drive</h3>
  <ul> (list of links) </ul>

  <h3>Driving</h3>
  <ul> (list of links) </ul>
</nav>

但是！

• 我在上面随机选择了 h3，因为向页面添加可能大量的“h1”标签似乎很愚蠢，因为 WCAG（等）规则也很挑剔想要恰好有一个

  <h1>

  ...但是那些同样的规则也不需要任何东西，除了页面上包含 H 标签的一个层次结构的“适当的轮廓”，* 对吗？由于这种类型的导航不在实际文档本身的流程内（我什至在 H1 之前），我根本不想在此处使用任何“编号”标题。无论我尝试使用什么号码，我都会错。

• 我考虑在这里使用 role=treeview ，但我找不到任何指导说明是否可以将不可点击的标题作为某些树节点，并且我看到的每个示例都是一个非常纯粹的树，如文件资源管理器，其中每个“包含”项都是可扩展和可选择的——就像纯文件浏览器一样。

将其标记为可供所有辅助技术使用和访问的最佳方式是什么？

Answer 1

这就是

<section>

标签的用途：

<nav>
  <section>
    <h3>Preparing to Drive</h3>
    <ul> (list of links) </ul>
  </section>

  <section>
    <h3>Driving</h3>
    <ul> (list of links) </ul>
  </section>
</nav>