单页多H1标签实现合理性咨询：是否需调整为H2？

先来看发现的代码实现：

<h1 tabindex=0 style="invisible">The website name</h1>
<h1 tabindex=-1>form 1</h1>

1. 该实现是错误写法还是变通方案？ #

这属于不符合无障碍规范的错误写法。<h1>作为页面的最高层级标题，核心作用是定义页面的核心主题，规范明确要求单页仅保留一个<h1>。这种通过隐藏元素、修改tabindex的方式，本质是对语义化标签的误用，并没有解决多<h1>破坏页面结构层级的问题，不能算作合理的变通方案。

2. 焦点与屏幕阅读器的表现是否合理？ #

这种表现完全不合理：

• 普通键盘用户：不可见的<h1>获得焦点后，用户无法看到焦点位置，会产生操作困惑；同时tabindex=-1的form1无法通过Tab键正常访问，打破了常规的键盘导航逻辑。
• 屏幕阅读器用户：先播报不可见的网站名称，会让用户混淆页面核心内容——当前页面实际是表单页，核心主题应为form1，但语义层级被错误抢占，导致内容认知混乱；且tabindex=-1需要额外操作才能聚焦该元素，增加了使用负担。

3. 是否需要将“form1”的H1改为H2？ #

是的，必须将form1的<h1>改为<h2>，同时优化页面语义结构：

• 确保网站名称的<h1>可见且处于合理位置（比如页面头部），作为整个页面的唯一最高层级标题；
• 将form1设为<h2>，作为页面的次级核心主题，符合“单H1统领，下级标题层级递进”的语义规范；
• 移除不必要的tabindex属性，让元素焦点行为遵循默认语义规则，保障键盘导航和屏幕阅读器的正常使用。

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