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