企业官网无障碍可访问性需规避三类致命错误：多个导致屏幕阅读器跳过主体内容；缺失aria-label使导航不可区分；标题层级断裂（如多或跳跃层级）破坏大纲结构。
企业官网的无障碍可访问性不会因用了语义标签就自动达标，但
为什么多个 <main></main> 比不用 <main></main> 更危险
Next.js 或 Vue 布局组件里提前写了 <main></main>，子页面又渲染一个——DOM 中实际出现两个 <main></main>。屏幕阅读器（NVDA/VoiceOver）按 M 键跳转时只识别第一个，后续所有正文内容被跳过。
- 真实现象：用户听完整个顶部 banner、左侧菜单、广告位后，才开始读“联系我们”表单，而商品列表或服务介绍根本没被播报
- SEO 影响：Google 文档大纲解析器把第一个
<main></main>内容当作全页核心，其余内容权重归零 - 修复建议：全局搜索
<main>，确保仅在最终渲染的页面主体中存在一次；布局组件改用 <code><div role="main"> 临时替代（不触发导航键） <h3> <code><nav></nav>必须配aria-label，且不能只靠<ul><li></ul>套壳只写
<nav><ul><li><a>首页</a></li></ul></nav>，屏幕阅读器无法区分这是主导航、面包屑还是页脚链接——它只看到一堆无上下文的链接。- 必须显式声明用途：
<nav aria-label="主导航"></nav>或<nav aria-label="面包屑导航"></nav> - 验证方式：打开 NVDA + Chrome，按 D 键进入“文档结构视图”，确认能直接跳转到标注名称的导航区
- 常见坑：用中文空格或全角标点写
aria-label="主导航 "，导致部分读屏工具截断识别
标题层级断裂比缺失标签更难后期修复
页面从
<h2></h2>开始，或<main></main>外堆了三个<h1></h1>，会导致屏幕阅读器大纲视图完全错乱——用户无法用快捷键（如 H 键）遍历有效标题，只能逐行听读。- 硬性规则：全页仅一个
<h1></h1>（代表官网核心定位，如“XX科技——智能工业解决方案提供商”），其余严格递进 - 检查方法：Chrome DevTools → Elements → 右键任意标题 → “Inspect Accessibility Properties”，看 computed outline 是否连续
- 典型误用：
<section><h3>客户案例</h3> <p>...</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></section>，但该 section 所属的父级模块还没出现<h2></h2>
<section></section>和<article></article>不是<div> 的升级版 <p>滥用 <code><section></section>会污染辅助技术导航节点。每个无标题的<section></section>在大纲中生成空锚点，用户按 S 键跳转时卡在一堆“未命名区域”里。- 判断标准：这块内容是否自带
<h2></h2>–<h6></h6>？能否被 RSS 抓取或邮件推送？是否属于已有语义范畴（如页脚必须用<footer></footer>）？ - 错误示例：
<section><p>欢迎关注我们</p></section>—— 无标题、不可分发、无结构意义 - 正确替代：
<div><p>欢迎关注我们</p></div>（纯视觉容器）或<aside><p>欢迎关注我们</p></aside>（补充信息）
最容易被忽略的是内容与标签含义的持续匹配——上线后加的 A/B 测试弹窗、运营 banner、第三方埋点脚本，常常被随手塞进已有的
<main></main>或<section></section>里，导致语义瞬间失效。这不是代码问题，是协作流程里缺少一道“语义校验”环节。 - 必须显式声明用途：
