辅助技术适配漏洞源于HTML语义结构破坏：main必须全局唯一且为直接子元素，nav需aria-label，section须有可见标题，img的alt须准确描述内容，焦点顺序须与DOM一致。
直接结论：辅助技术适配漏洞不是“测试阶段才发现的问题”，而是HTML结构重构时语义契约被破坏的必然结果——main嵌套、nav无aria-label、section缺标题、img的alt写成“图片”等，都会让屏幕阅读器读错、跳过或报错，且无法靠CSS或JS事后补救。
main元素重复或嵌套导致“跳转到主要内容”失效
这是最常被忽略却影响最深的结构性错误。当用户按Ctrl+Alt+O（NVDA）或Cmd+Option+J（VoiceOver）想直抵正文时，如果页面存在多个<main></main>，或<main></main>被包在<article></article>或<section></section>里，辅助技术会静默失败或随机选一个。
-
<main></main>必须是的直接子元素，且全局唯一；仪表盘多卡片场景应改用<section aria-labelledby="card1-title"></section>+ 可见标题 - 检查方式：运行
document.querySelectorAll('main').length，结果大于1即违规；用Lighthouse的Accessibility审计项“document-multiple-main-elements”可自动捕获 - 历史代码中常见误写：
<article><main>...</main></article>——这会让屏幕阅读器认为该main只是文章内部区域，而非整页核心
nav、section、article标签不带标识就失去导航意义
仅用<nav></nav>包裹链接，对键盘用户和屏幕阅读器毫无价值。辅助技术依赖的是“地标角色（landmark roles）+ 可识别名称”的组合，而不是标签名本身。
-
<nav></nav>必须配aria-label，尤其当页面含多个导航区（顶部主导航、页脚链接、面包屑、移动端菜单），否则全读作“navigation” -
<section></section>必须有可见标题（<h2>–<h6>），否则语义退化为<div>——它不是“分块容器”，而是“有主题的独立内容段” -
<article></article>需满足可独立分发条件（如博客正文、新闻稿），若用于侧边推荐位或广告，则应换用<aside></aside>或普通<div>加<code>role="region"alt属性写法错误让图片信息完全丢失
留空
alt、填“图片”、用title代替alt，这三类写法在自动化工具里可能“不报错”，但对真实用户就是信息黑洞。立即学习“前端免费学习笔记（深入）”；
- 信息性图片（商品图、图表）：
alt必须描述内容实质，不含“图”字，长度控制在125字符内；超长图表用aria-describedby指向下方详细说明段落 - 功能性图片（按钮图标）：
alt写动作，不是外观，例如alt="提交表单"，不是alt="蓝色箭头图标" - 装饰性图片：
alt=""（严格空字符串），不可省略属性，也不可用alt=" "（含空格）——后者会被读作“空白” - 检查盲点：
<img src="logo.png">没写alt，浏览器渲染正常，但VoiceOver会读“logo dot png”，完全丢失品牌信息
Tab焦点顺序与DOM结构不一致的隐蔽陷阱
焦点跳转乱序，90%源于HTML结构扁平化——用一堆
<div>堆出视觉布局，再靠CSS定位和tabindex硬调顺序，结果是DOM树和视觉流彻底脱钩。- 验证方法：关掉CSS（DevTools → Elements → 右键禁用样式），纯HTML下用Tab键遍历，看是否按预期从上到下、从左到右自然流动
- 禁止滥用
tabindex="1"或更高值；只允许tabindex="0"（纳入自然流）或tabindex="-1"（仅程序聚焦） - 关键修复点：把
<div class="header">换成<header>，<div class="footer">换成<footer>，它们天然具备语义层级和默认焦点行为 - 嵌套过深（>5层）也会干扰焦点流，尤其在移动端；优先用
<section>替代多层<div>包裹
真正难的不是写对某个标签，而是让每个语义标签都承担起它本该履行的契约责任——
main不是“看起来像主体”，而是“逻辑上唯一承载核心内容的容器”；alt不是“填个字段”，而是“替代视觉通道的信息交付”。重构时盯住这点，比堆砌ARIA属性更有效。 - 信息性图片（商品图、图表）：
