WGAC - sequentially-descending 顺序

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) headers。那么我可以在这里做些什么作为最佳实践？

是否应该将每个 header 包含在 <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> - 这一点可能会让使用屏幕 reader 的人感到困惑可能会使用屏幕上的快捷方式按标题导航 reader。

屏幕奖励 readers

如果您有一份非常复杂的文档并且您确定自己不是 over-nesting 项目，那么屏幕上实际上有 7 个标题级别 reader很关心。

你可以read more about level 7 headings here

WGAC - sequentially-descending 顺序

WGAC - sequentially-descending order

html

wcag

wai-aria

例子

屏幕奖励 readers