当页面布局隐式传达标题级别时，如何正确“跳过”标题级别

Question

有时，语义包含在设计中。我的问题是，当标题层次结构的某些级别因为隐式而被跳过时，如何将此语义转换为 HTML。

例如，一个页面可以有多个部分，几乎所有部分都包含 H2 标题，并且很明显它们处于同一层次结构级别。但有些没有H2，而是直接包含H3标题的列或卡片。我不会把这些标题设置为 H2，因为它的隐式结构是不正确的，但我也不能跳过 H2，因为这会用 H2 将本节的内容与上一节内容联系起来。

另一个例子是

aside

中的固定列

article

，其中包含各种子部分：目录、号召性用语、作者信息、出版日期。其中一些（例如号召性用语）有标题，但另一些（例如作者信息）则没有。我不希望屏幕阅读器将第二个视为第一个的一部分（如果它跟随第一个）。从视觉上看，分界线很清楚，但他们看不到。

在这种情况下，我认为正确的做法是放置一个不可见的标题，该标题仍会被屏幕阅读器阅读，像这样。但这只是我的猜测，我从未将其视为建议。

Answer 1

如果您直接开始一个没有任何标题的部分，则屏幕阅读器用户按标题导航可能会错过该部分第一个标题之前的部分。

屏幕阅读器用户还可以按地标导航，并且地标中包含部分，但根据几项 WebAim 调查，按地标/部分导航的频率低于按标题导航的频率。 请注意，为了按部分/地标进行导航，如果有多个具有相同类型的地标（通常是部分的情况），则它们最好具有 aria-label/aria-labelledby。

因此，在每个部分的开头放置一个标题可能非常重要，以确保无论使用哪种导航模式，都不会错过任何内容。 如果标题太明显，如您所说，视觉上隐含，您可以使用 .sr_only/.visually-hidden 将其从屏幕上隐藏。

无论如何，规则是明确的：你永远不应该跳过一个级别，尤其是三重不应该仅仅因为视觉设计而这样做。