语义化HTML标签不能根本解决可访问性问题，但能降低70%以上修复成本；必须全页仅一个且只包核心内容，正确使用、section、article及导航结构，并确保标题层级连续。
语义化 HTML 标签本身不能“根本解决”可访问性问题，但它能砍掉 70% 以上的修复成本和后期补救逻辑——前提是标签用对、结构不破、层级不乱。
为什么必须唯一且只包核心内容
屏幕阅读器按 M 键跳转时，只认第一个合法的 <main></main>；如果页面里有多个，或它包裹了顶部 banner、左侧菜单、广告位，读屏工具要么跳过、要么定位到错误区域。用户得手动听完整页才能找到正文。
- Next.js 布局组件里写一个
<main></main>，子页面又渲染一个 → 实际 DOM 中出现两个，辅助技术失效 -
<main></main>里塞了 header + nav + aside + article → 非主内容污染导航锚点，语音响应变慢 - 正确做法：全页面仅一个
<main></main>，且只包含用户真正要操作/阅读的部分（如商品列表、表单主体、文章正文）
section 和 article 的误用会污染文档大纲
<section></section> 不是 <div> 的语义升级版，它是为「有标题的逻辑分段」准备的；<code><article></article> 则代表可独立分发的内容单元（比如一篇博客、一条新闻、一个评论）。滥用会导致屏幕阅读器生成大量无意义导航节点。
- 错误写法：
<section><p>欢迎关注我们</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill7761" title="Article To Html"><img src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill7761" title="Article To Html">Article To Html</a> <p>文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p> </div> <a href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></section>—— 无标题、不可分发、无结构意义 - 判断标准：这块内容是否自带
<h2></h2>–<h6></h6>？能否被 RSS 抓取或邮件推送？是否属于已有语义标签范畴（如页脚用<footer></footer>）？ - SEO 影响：Google 参考文档大纲（outline）评估内容权重，标题层级断裂或节点泛滥会弱化主内容识别
导航菜单必须用
只用 <nav></nav> 包裹链接，但不加 <ul></ul> 和 <li>，或者加了 aria-label 却没验证读屏是否真能跳转——这两种做法都会让语义化失效。
-
<nav></nav>只适用于用户会主动用来跳转的链接集合（主导航、页脚站点地图、目录锚点），不是所有带链接的<div> 都能套 <li>必须配合 <code><ul> <li>首页</li> <li>关于</li> </ul>结构，否则 NVDA/VoiceOver 会把所有链接连读成一串无结构文本 - 多个
<nav></nav>共存时，必须用aria-label="主导航"和aria-label="页脚快速链接"明确区分用途 - 当前页状态不能只靠
class="active"，必须同步设置aria-current="page"；aria-current="true"是非法值，部分读屏直接忽略 -
<button onclick="submitForm()">提交</button>✅ 可聚焦、可回车触发、自动有role="button" -
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onclick="submitForm()">提交</a>❌ 点击后 URL 变成https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b，按回车会滚动到页首，需手动补role="button" tabindex="0"才勉强可用 - 若必须用
<a></a>模拟按钮（如禁用 JS 场景），至少设href="https://www.php.cn/link/7c127e0c66f06e58c7c7310a7c6fa488"并补全aria-label
按钮和链接混用会让键盘与读屏同时崩溃
点击触发 JS 行为？用 <button></button>。跳转到新 URL？用 <a></a>。混用会导致键盘焦点、屏幕阅读器播报、默认行为全部错乱。
最容易被忽略的不是“该用什么标签”，而是标题层级断裂：页面从 <h2></h2> 开始、<main></main> 外堆了三个 <h1></h1>、小节用了 <h3></h3> 但主内容还没出现 <h2></h2>——这会让屏幕阅读器无法建立有效导航路径，也导致搜索引擎难以识别内容主次。
