html语义化是无障碍访问的必要前提，错误使用标签如用div替代nav或嵌套main于table中会导致屏幕阅读器无法识别；main必须唯一，article强调独立性，section仅作主题分组；label和fieldset需原生结构绑定，否则影响兼容性。
HTML语义化本身不自动实现无障碍，但它是辅助技术（如屏幕阅读器）正确解析页面的必要前提——用错标签，再好的ARIA也救不回来。
为什么 screen reader 会读错或跳过你的导航栏
常见错误现象：用户反馈“听不到导航菜单”“main区域没被识别为主要内容”，往往不是JS或CSS问题，而是<nav></nav>被写成了<div class="nav">，或者<code><main></main>被意外嵌套在<table>里。
<p>使用场景：当用户用快捷键（如NVDA的Insert+Tab）切换到“导航区域”时，只有原生<code><nav></nav>会被识别；<div role="navigation">虽能模拟，但缺失隐式语义（如键盘焦点管理、默认aria-expanded逻辑），且易被遗漏。
<ul>
<li>必须确保每个<code><nav></nav>直接包裹可聚焦的链接（<a></a>或带tabindex的元素），不能只放文字或<span></span>
<nav></nav>不应嵌套在<table>、<code><ul></ul>等有严格子元素限制的标签内——这会导致HTML无效，浏览器可能丢弃整个节点
aria-label区分，例如<nav aria-label="主导航"></nav>和<nav aria-label="页脚导航"></nav>
main、article、section 混用时的可访问性陷阱
错误现象：屏幕阅读器把<section></section>当成独立内容块朗读，但用户实际想快速跳转到真正唯一的主体内容——这时<main></main>被漏掉或误用是主因。
参数差异：三者语义不可互换：<main></main>必须全局唯一，代表页面核心内容；<article></article>强调可独立分发（如博客、新闻）；<section></section>只是主题分组，无独立语义权重。
- 一个页面只能有一个
<main></main>，重复或缺失都会破坏可访问性树结构 -
<article></article>内部可嵌套<header></header>/<footer></footer>，但<section></section>内部不应滥用<h1></h1>——标题层级应连续，避免从<h2></h2>跳到<h1></h1> - 如果
<main></main>里只包了一个<section></section>，不如直接用<main></main>+<h1></h1>，减少冗余包装
label、fieldset 和 div 嵌套表单时的兼容性影响
错误现象：“输入框没关联说明文字”“表单分组无法被跳过”，常因<label></label>未用for/id绑定，或<fieldset></fieldset>被<div>包裹后丢失语义。
<p>性能 / 兼容性影响：辅助技术对<code><label></label>和<fieldset></fieldset>的识别高度依赖原生结构。用<div>替代<code><fieldset></fieldset>并加role="group"，虽能勉强工作，但部分旧版JAWS或VoiceOver可能忽略aria-labelledby，导致分组标题不可达。
-
<label></label>必须显式绑定<input>（for+id，或包裹方式），仅靠视觉位置或aria-label不够稳定 -
<fieldset></fieldset>不能被<div>包裹后再设<code>role="group"——它必须是直接父容器，否则<legend></legend>无法正确关联 - 动态表单中，若用JS插入新
<input>，需同步生成<label></label>并调用focus()，否则屏幕阅读器可能不播报新增项
最易被忽略的一点：语义标签是否“名副其实”，比是否用了它更重要。比如用<aside></aside>包广告横幅没问题，但若把它当布局容器塞进整页侧边栏，就破坏了其“与主内容相关但可分离”的本意——辅助技术不会报错，但用户心智模型会被悄悄误导。
