HTML无障碍不是事后补救而是设计契约，语义错位、landmark滥用、动态内容无声明会阻断键盘和屏幕阅读器；原生标签语义不可覆盖，动态节点需在创建时即具备完整语义身份。
复杂交互场景下，HTML代码质量与无障碍不是“加几个属性就能补救”的事后工程，而是结构设计阶段就必须锁定的契约——语义错位、landmark滥用、动态内容无声明，会让键盘用户卡在第一个按钮，屏幕阅读器跳过整个主区域。
为什么嵌套在里会导致AT完全跳过主体内容
浏览器和NVDA/VoiceOver等辅助技术（AT）依赖原生标签的隐式role定位关键区域。<main></main>只有作为<div>或<code><section></section>里，它就退化为普通容器，AT的“跳转到主内容”快捷键（如NVDA+Insert+O）将失效。
- 常见错误：
<div class="wrapper"><main>...</main></div>——看似只是布局包裹，实则切断语义链
- React/Vue中容易踩坑：用
<div id="root"></div>挂载整个应用，导致<main></main>永远无法成为
- 修复方案：服务端渲染（SSR）或静态生成时确保
<main></main>在HTML初始结构中直接位于document.body.replaceChild()或insertAdjacentElement('afterbegin')手动提升节点
动态表单控件如何保证label绑定不丢失
JS动态插入输入框时，仅写<input type="text">而不关联<label></label>，等于对屏幕阅读器说“这里有个空白字段，你猜它要填什么”。label缺失不是样式问题，是信息通道断裂。
- 必须显式绑定：
<label for="email">邮箱</label><input id="email" type="email">，且for与id值严格一致
- 避免包裹式label失效：若用
<label>邮箱<input></label>，需确保<input>在<label></label>内部且无其他文本节点干扰（空格、换行都会破坏绑定）
- 动态创建时易漏点：用
document.createElement('input')后，必须同步设置id并创建对应label，不能只靠CSS类名模拟视觉关联
- 错误提示需可感知：用
aria-describedby="email-error"关联实时错误消息，而非仅靠颜色或图标
多层弹窗（Modal）的焦点锁定与语义降级风险
模态框打开后，焦点没锁住或关闭后没回溯，键盘用户会迷失在DOM碎片里；更隐蔽的问题是，把<dialog></dialog>当普通<div>用，反而破坏其原生语义。<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/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill3458" title="html-ppt-to-pdf">html-ppt-to-pdf</a>
<p>将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>
<code><dialog></dialog>自带role="dialog"、inert支持和 showModal()方法，但必须配合aria-labelledby指向标题，否则AT读不出上下文
手写弹窗时，禁用tabindex="-1"在非焦点元素上——它会让键盘Tab跳过该元素，但无法阻止Shift+Tab反向进入
焦点锁定逻辑必须覆盖所有可聚焦元素（包括<a href></a>、<button></button>、带tabindex="0"的<div>），推荐用<code>document.querySelectorAll('[href], button, input, select, textarea, [tabindex]')过滤
关闭弹窗后，焦点必须回到触发它的元素（如点击的按钮），而非默认回到document.body——可用triggerEl.focus()保存引用
ARIA属性什么时候不该用
给<button></button>加role="link"、给<nav></nav>加aria-label="navigation"，这类操作不是增强，是制造语义冲突——浏览器和AT会收到互相矛盾的信号。
- 原生标签已具备完整语义时，禁止覆盖：
<button></button>已有role="button"、可聚焦、可激活；加role="link"会让NVDA报出“button link”，用户困惑
-
<nav></nav>本身隐含role="navigation"，重复加aria-label纯属冗余；只有多个<nav></nav>时才需用aria-label="主导航"或aria-label="页内目录"区分
-
aria-hidden="true"不能和display: none混用：前者仍参与焦点管理，后者才真正移出可访问树；隐藏导航菜单应优先用display: none，而非仅靠aria-hidden
- 最危险的误用：
role="application"——它会关闭AT的大部分导航模式，仅适用于高度定制化的富交互应用（如在线IDE），普通网页严禁使用
复杂交互的无障碍本质，是让每个动态节点在DOM插入瞬间就携带完整的语义身份和交互契约——不是等JS跑完再打补丁，而是在createElement那一刻就决定它该怎么被听见、被看见、被操作。
浏览器和NVDA/VoiceOver等辅助技术（AT）依赖原生标签的隐式role定位关键区域。<main></main>只有作为直接子元素时，才被识别为role="main"；一旦包在<div>或<code><section></section>里，它就退化为普通容器，AT的“跳转到主内容”快捷键（如NVDA+Insert+O）将失效。
- 常见错误：
<div class="wrapper"><main>...</main></div>——看似只是布局包裹，实则切断语义链 - React/Vue中容易踩坑：用
<div id="root"></div>挂载整个应用，导致<main></main>永远无法成为直系子元素 - 修复方案：服务端渲染（SSR）或静态生成时确保
<main></main>在HTML初始结构中直接位于下；客户端渲染需用document.body.replaceChild()或insertAdjacentElement('afterbegin')手动提升节点
动态表单控件如何保证label绑定不丢失
JS动态插入输入框时，仅写<input type="text">而不关联<label></label>，等于对屏幕阅读器说“这里有个空白字段，你猜它要填什么”。label缺失不是样式问题，是信息通道断裂。
- 必须显式绑定：
<label for="email">邮箱</label><input id="email" type="email">，且for与id值严格一致 - 避免包裹式label失效：若用
<label>邮箱<input></label>，需确保<input>在<label></label>内部且无其他文本节点干扰（空格、换行都会破坏绑定） - 动态创建时易漏点：用
document.createElement('input')后，必须同步设置id并创建对应label，不能只靠CSS类名模拟视觉关联 - 错误提示需可感知：用
aria-describedby="email-error"关联实时错误消息，而非仅靠颜色或图标
多层弹窗（Modal）的焦点锁定与语义降级风险
模态框打开后，焦点没锁住或关闭后没回溯，键盘用户会迷失在DOM碎片里；更隐蔽的问题是，把<dialog></dialog>当普通<div>用，反而破坏其原生语义。<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/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill3458" title="html-ppt-to-pdf">html-ppt-to-pdf</a>
<p>将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>
<code><dialog></dialog>自带role="dialog"、inert支持和 showModal()方法，但必须配合aria-labelledby指向标题，否则AT读不出上下文
tabindex="-1"在非焦点元素上——它会让键盘Tab跳过该元素，但无法阻止Shift+Tab反向进入<a href></a>、<button></button>、带tabindex="0"的<div>），推荐用<code>document.querySelectorAll('[href], button, input, select, textarea, [tabindex]')过滤
document.body——可用triggerEl.focus()保存引用ARIA属性什么时候不该用
给<button></button>加role="link"、给<nav></nav>加aria-label="navigation"，这类操作不是增强，是制造语义冲突——浏览器和AT会收到互相矛盾的信号。
- 原生标签已具备完整语义时，禁止覆盖：
<button></button>已有role="button"、可聚焦、可激活；加role="link"会让NVDA报出“button link”，用户困惑 -
<nav></nav>本身隐含role="navigation"，重复加aria-label纯属冗余；只有多个<nav></nav>时才需用aria-label="主导航"或aria-label="页内目录"区分 -
aria-hidden="true"不能和display: none混用：前者仍参与焦点管理，后者才真正移出可访问树；隐藏导航菜单应优先用display: none，而非仅靠aria-hidden - 最危险的误用：
role="application"——它会关闭AT的大部分导航模式，仅适用于高度定制化的富交互应用（如在线IDE），普通网页严禁使用
复杂交互的无障碍本质，是让每个动态节点在DOM插入瞬间就携带完整的语义身份和交互契约——不是等JS跑完再打补丁，而是在createElement那一刻就决定它该怎么被听见、被看见、被操作。
