WGAC - 顺序降序

Question

在我的网页上，我有一篇很长的文章。

现在是一个 html 可能看起来像这样的示例（只是想象它更长）：

<h1>Page title</h1>
<article>
 <h2>Some title></h2>
 <p>Content for that title</p>
 <h2>Some other title </h2>
 <p> some content for that other title </p>
</article>

这种模式还在继续。

根据 WGAC，所有标题都应按降序排列，这是一个问题，因为我的文章可能有超过 5 个 (h1 - h5) 标题。那么作为最佳实践，我可以做些什么呢？

每个标头应该包含在<article> 或<section> 标记中还是可以是h2，如上所示？

Answer 1

示例

<main>
  <h1>Different Front End Technologies</h1>
  <p>Introduction...</p>
  <section aria-labelledby="h2-html">
    <h2 id="h2-html">HTML</h2>
      <p>html...</p>
        <h3>Sectioning Elements</h3>
          <p>fjdfk</p>
          <h4>The Header element</h4>
          <h4>The Main element</h4>
        <h3>Inline Elements</h3>
          <p>fdsfa</p>
          <h4>The time element</h4>
          <h4>The address element</h4>    
  </section>
  <section aria-labelledby="h2-css">  
    <h2 id="h2-css">CSS</h2>
    <p>fdsafdas</p>
      <h3>The Cascade</h3>
      <h3>CSS Vars</h3>
        <h4>The :root selector</h4>
        <h4>Using a var in a property</h4> 
          <h5>Using calc() with a var</h5>
            <h6>Example using calc()</h6>
            <h6>Gotchyas using var in older browsers</h6>
          <h5>var as inline style</h5>
  </section>
  <section aria-labelledby="h2-JS">
    <h2 id="h2-JS">JavaScript</h2>
  </section>
</main>

注意<h2> 下的所有内容如何与<h2> 相关。 <h3> 下的所有内容都与 <h3> 相关，而 <h3> 又与 <h2> 相关。这继续下去。

当有彼此不相关的主题再次出现时，您可以返回到合适的标题级别。

“跳过标题级别”是指您从 <h2> 跳转到 <h4> - 这可能会让使用屏幕阅读器的人感到困惑，因为他们可能会使用屏幕上的快捷方式通过标题进行导航阅读器。

屏幕阅读器奖励

如果您有一个非常复杂的文档，并且您确定您没有过度嵌套项目，那么就屏幕阅读器而言实际上有 7 个标题级别。

你可以read more about level 7 headings here