WordPress h1直接跳转h3导致ADA合规校验不通过如何解决

你当前页面模板固定使用站点名称作为全局唯一<h1>，文章内容区直接输出WordPress编辑器原始内容，一旦用户插入的起始标题不是h2，就会出现h1直接跳h3/h4的层级断层，触发Skipped Header报错。

最优方案：输出端自动偏移标题层级（零感知兼容现有编辑流程） #

这个方案不需要调整编辑器功能、不需要给运营人员做额外操作培训，用户在编辑器里可以正常选择任意级别的标题，最终前端输出的代码会自动适配合法层级，完全符合ADA要求。

实现逻辑 #

• 明确内容区合法起始标题级别：由于页面已存在h1，内容区最高级别的标题只能从h2开始，顺序向下递进，最多到h6
• 输出文章内容前先做解析处理，不要直接输出原始内容：
  • 扫描当前文章内容里所有h1-h6标签，找到内容中用到的最高标题级别（即h标签数字最小的值）
  • 计算层级偏移量：偏移量 = 2 - 内容内最高标题级别
  • 将内容里所有h标签的级别统一加上偏移量，同时做边界处理，确保最终输出的标题级别在2-6区间内，不会出现跳级

WordPress端实现代码 #

直接在主题的functions.php中添加如下过滤器，不需要修改现有模板代码：

// 自动修正指定页面模板的内容区标题层级，满足ADA合规要求
add_filter('the_content', function($content) {
    // 仅在前台、对应collection页面模板生效，不影响后台和其他页面
    if (is_admin() || !is_page_template('templates/collection.php')) {
        return $content;
    }

    // 匹配内容中所有h1-h6标签
    preg_match_all('/<h([1-6])[^>]*>/i', $content, $matches);
    if (empty($matches[1])) {
        return $content;
    }

    // 计算偏移值
    $min_content_level = min(array_map('intval', $matches[1]));
    $allowed_base_level = 2;
    $level_offset = $allowed_base_level - $min_content_level;

    // 替换所有h开标签
    $content = preg_replace_callback('/<h([1-6])([^>]*)>/i', function($tag_matches) use ($level_offset) {
        $original_level = intval($tag_matches[1]);
        $new_level = $original_level + $level_offset;
        // 边界兜底，标题级别不低于h2、不高于h6
        $new_level = max(2, min(6, $new_level));
        return "<h{$new_level}{$tag_matches[2]}>";
    }, $content);

    // 替换所有h闭合标签
    $content = preg_replace_callback('/<\/h([1-6])>/i', function($tag_matches) use ($level_offset) {
        $original_level = intval($tag_matches[1]);
        $new_level = $original_level + $level_offset;
        $new_level = max(2, min(6, $new_level));
        return "</h{$new_level}>";
    }, $content);

    return $content;
}, 5);

配套样式调整 #

把原有h1-h6的样式对应映射到新的输出层级即可，比如编辑器里默认的「标题2」对应输出h2样式、「标题3」对应输出h3样式，保持和编辑器预览的视觉效果完全一致，用户不会感知到任何变化。

备选方案（改造成本较高，不推荐） #

• 调整模板h1逻辑：把当前模板中输出站点名的h1改成普通div加样式，将h1位置留给文章内容的第一个标题，这个方案需要全站统一调整h1规则，涉及SEO、多页面适配的改造成本很高
• 限制编辑器标题选项：移除WordPress编辑器里的h1、h3-h6选项，仅保留h2开始的标题级别，强制用户按规范选择，这个方案会降低编辑灵活性，且无法自动修正历史存量内容的违规问题

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