大厂级可访问性根基在于HTML结构根治：必须全局唯一且仅包裹核心内容，避免语义污染；section需自带标题并具独立分发价值；form和img须语义完备，链接文本须自明，图标按钮必设aria-label，标题层级、lang、charset等基础属性缺一不可。
大厂工程化项目里，系统级可访问性不是靠补丁式 ARIA 堆出来的，而是从 HTML 结构根上决定的——<main></main> 唯一性、<nav></nav> 的语义边界、<section></section> 是否真有标题，这些才是关键判断点。
为什么 <main></main> 必须全局唯一且只包核心内容
屏幕阅读器按 M 键跳转时，只认第一个合法 <main></main>；如果 Next.js 布局组件里套一个、页面组件里再 render 一个，读屏工具会跳过或定位错位。用户得手动听完整页才能找到正文。
- 错误做法：
<main></main>包含顶部 banner + 左侧菜单 + 内容区 - 正确做法：全 DOM 中仅一个
<main></main>，且只包裹用户真正要操作/阅读的部分（如商品列表、表单主体、文章正文） - 性能影响：冗余
<main></main>不增加字节大小，但会让辅助技术多做无效 DOM 遍历，拖慢语音响应
怎么避免 <section></section> 和 <article></article> 的语义污染
<section></section> 不是 <div> 的语义升级版，它是为「有标题的逻辑分段」准备的；<code><article></article> 则代表可独立分发的内容单元。滥用会导致屏幕阅读器生成大量无意义导航节点。
- 错误写法：
<section><p>欢迎关注我们</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></section>（无标题、不可分发、无结构意义） - 判断标准：这块内容是否自带
<h2></h2>–<h6></h6>？能否被 RSS 抓取或邮件推送？是否属于已有语义标签范畴（如页脚用<footer></footer>）？ - SEO 影响：Google 会参考文档大纲评估内容权重，标题层级断裂或节点泛滥会弱化主内容识别
表单和图片的语义缺失为何会引发后期 JS 补救成本
缺失 alt 的 <img> 或未绑定 <label></label> 的 <input>，表面看只是可访问性问题，实则常迫使开发者后期用 JS 补救——比如监听焦点事件手动播报提示、动态插入 ARIA 属性。
- 图片必须用
<figure></figure>包裹，alt不可为空（装饰图除外），<figcaption></figcaption>必须存在且与<img>同级 - 表单控件必须显式绑定：
<label for="id"></label>或嵌套写法：<label>邮箱<input type="email"></label> - 常见坑：用 CSS 视觉对齐代替语义绑定；把
title当aria-label用（title不被所有读屏支持）
链接文本和自定义按钮的可访问性陷阱
“点击这里”“更多”“查看详情”这类链接文本，在屏幕阅读器单独列出链接时完全失效；而用 <div> 或 <code><span></span> 模拟按钮，不加 tabindex 和 role="button"，键盘用户根本无法触发。
- 链接文本必须自明：把“点击查看”改成“查看 2025 年 Q3 用户增长报告 PDF”
- 图标按钮必须带
aria-label：<button aria-label="关闭弹窗">×</button> - 禁用 JS 场景下若必须用模拟按钮，至少设
href="https://www.php.cn/link/7c127e0c66f06e58c7c7310a7c6fa488"并补全aria-label
最容易被忽略的不是写了什么，而是没写什么：标题层级断裂（页面从 <h2></h2> 开始、<main></main> 外堆了三个 <h1></h1>）、lang 和 charset 缺失、<nav></nav> 没加 aria-label（尤其页面含多个导航时）——这些都不是“锦上添花”，而是系统级可访问性的基础校验点。
