从无障碍视角，语义次要的眉栏用h3/h4、下方主标题用h2是否合规？

结论：不能这么做，会破坏语义层级逻辑，影响无障碍访问体验 #

标题标签（h1-h6）的核心作用是构建页面的语义结构，和视觉位置、字号大小完全无关。屏幕阅读器依赖标题的层级顺序帮用户梳理内容脉络，用户也会通过标题导航快速定位关键信息。

你给出的示例里，眉栏（仅为补充信息）用h3，主标题（组件核心主题）用h2，且h3放在h2前面，这会导致标题层级出现倒序错误：屏幕阅读器会认为内容从一个子层级（h3）突然跳到了更高的父层级（h2），完全不符合内容的语义权重逻辑，会让依赖辅助技术的用户产生困惑。

正确的处理方式 #

• 优先方案：眉栏不用标题标签，用普通文本标签（如<p>或<span>）配合样式实现视觉效果。如果需要让屏幕阅读器明确它是主标题的补充信息，可以通过aria-describedby关联两者：

<section>
  <p id="eyebrow" style="font-size:12px;">Eyebrow</p>
  <h2 style="font-size:32px;" aria-describedby="eyebrow">Heading Element</h2>
</section>

• 备选方案：把眉栏作为主标题的一部分，嵌套在h2标签内，通过样式控制排版：

<section>
  <h2 style="font-size:32px;">
    <span style="font-size:12px; display:block;">Eyebrow</span>
    Heading Element
  </h2>
</section>

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