时间戳

首页 > 解决方案 > WGAC - 顺序降序

html - WGAC - 顺序降序

问题描述

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

现在是一个 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>or<section>标记中还是可以h2如上所示？

标签： htmlweb-accessibility

解决方案

例子

<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>

请注意 a 下的所有内容如何<h2>与 that 相关<h2>。a 下的所有内容<h3>都与与<h3>相关的内容有关<h2>。这种情况继续下去。

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

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

屏幕阅读器的奖金

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

您可以在此处阅读有关 7 级标题的更多信息

推荐阅读