更正标题级别以实现可访问性

Question

我一直在努力为某些元素选择正确的标题，因为我主要使用 React 并且希望专注于可重用的代码。

因为我总是按照以下层次结构组织我的代码：

• 路线（h2）
• 路线内路段（h3）
• 文章内部分（h4）
• 英雄部分（h1）

我认为这种方法是合适的。不然的话，我不知道如何在尊重他们的顺序的同时区分他们。

这是我的例子

    <div className='page'>
      <div className='page__wrapper'>
        <main>
          <section className='home-route'>
            <div class='home-route__wrapper'>
              <h2 className='sr-only'>Home route</h2>
              <div className='home-route__content'>
                <section className='hero sr-only'>
                  <h1 className='hero__title'>Pick your courses/articles for learning</h1>
                </section>
                <section className='cards-section'>
                  <div className='cards-section__wrapper'>
                    <h3 className='sr-only'>Cards</h3>
                    <div className='cards-section__content'>
                      {
                        cards.map((card, index) => (
                          <Card key={index} item={card}></Card>
                        ))
                      }
                    </div>
                  </div>
                </section>
              </div>
            </div>
          </section>
        </main>
      </div>
    </div>

我如何构建网站：

• div [页面]（包裹整个内容 - '/'路线）
• div [布局]（对于某些路线+例如导航 - '/users'）
• [路线]部分（家庭、联系人、用户...例如/users/userId）
• 部分（该路线内的某些部分）
• 文章（该部分内的一些文章）

Answer 1

标题用于给出当前文档的大纲，而不是用于告知用户他们在网站目录结构（或 SPA 的路线）中的当前位置。

如果您想向用户提供他们在网站或 SPA 结构中所处位置的上下文，请改用 breadcrumbs。

使用您在评论中链接到的存储库中的修改示例，以下是“添加新玩家”页面的标记：

<header>
  <nav aria-label="Main">[...]</nav>
</header>
<nav aria-label="Breadcrumbs">
  <ol>
    <li><a href="/">home</a></li>
    <li><a href="/players">players</a></li>
    <li><a href="/players/new" aria-current="page">add new player</a></li>
  </ol>
</nav>
<main>
  <h1>Add new player</h1>
  <form>[...]</form>
</main>

“主页”和“玩家”不应成为“添加新玩家”页面的标题。此页面上没有内容的“主页”部分，也没有内容的“玩家”部分，因此它们不应该是标题。