React可复用代码场景下，无障碍优化的标题层级选择问询

核心问题出在h1的位置和层级逻辑违反了无障碍标题规范，具体问题和修正建议如下：

1. 标题层级的核心错误 #

无障碍规范要求每个页面必须有且仅有一个<h1>，作为页面的最高层级主标题，且必须出现在所有其他层级标题（h2/h3等）之前。你当前的代码把<h1>放在了<h2 class='sr-only'>Home route</h2>之后，这会导致屏幕阅读器的标题导航逻辑混乱——阅读器会先识别到h2，再识别到h1，打破了从高到低的层级递进规则。

2. 修正后的层级规则建议 #

结合你的网站结构，合理的标题层级应该是：

• 每个路由页面对应一个h1：作为页面的主标题（比如首页的“Pick your courses/articles for learning”），是整个页面的语义核心，必须是层级最高的标题。
• 路由内的子区块（section）用h2：比如“Cards”这类路由内的主要模块，应该用h2而非h3。
• section内的子模块用h3：如果section下还有细分区块，用h3。
• article内的标题用h4：对应你原有的规则，保持层级递进即可。

3. 代码修正示例 #

调整后的首页代码应该是这样的：

<div className='page'>
  <div className='page__wrapper'>
    <main>
      {/* 页面主标题，层级最高的h1 */}
      <h1 className='hero__title'>Pick your courses/articles for learning</h1>
      
      {/* 路由内的子区块，用h2作为层级标题 */}
      <section className='cards-section'>
        <div className='cards-section__wrapper'>
          {/* 区块标题，给屏幕阅读器用的sr-only保持，但层级改为h2 */}
          <h2 className='sr-only'>Cards</h2>
          <div className='cards-section__content'>
            {
              cards.map((card) => (
                // 避免用index作为key，优先使用card的唯一标识
                <Card key={card.id} item={card}></Card>
              ))
            }
          </div>
        </div>
      </section>
    </main>
  </div>
</div>

4. 额外无障碍注意事项 #

• <section>标签最好配合aria-label或可见标题使用：语义化区块需要明确的内容说明，帮助屏幕阅读器用户理解区块用途。
• 不要滥用sr-only：只有当视觉上不需要显示标题，但语义上必须补充说明时才使用，避免冗余的隐藏标题干扰阅读器导航。
• 标题层级不能跳级：比如不能从h1直接跳到h3，必须按h1→h2→h3→h4的顺序递进。

内容的提问来源于stack exchange，提问作者SRBDeveloper