语义化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>@#@#@#@#@#@#@#@#@#@0 ❌ 点击后 URL 变成 https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b，按回车会滚动到页首，需手动补 role="button" tabindex="0" 才勉强可用
<a></a> 模拟按钮（如禁用 JS 场景），至少设 href="https://www.php.cn/link/7c127e0c66f06e58c7c7310a7c6fa488" 并补全 aria-label
最容易被忽略的不是“该用什么标签”，而是标题层级断裂：页面从 <h2></h2> 开始、<main></main> 外堆了三个 <h1></h1>、小节用了 <h3></h3> 但主内容还没出现 <h2></h2>——这会让屏幕阅读器无法建立有效导航路径，也导致搜索引擎难以识别内容主次。
