不能当按钮用，因其无语义、不可聚焦、不响应键盘操作、屏幕阅读器识别为静态容器而非控件；必须用才能保障原生可访问性。
HTML无障碍可访问性不是“加点ARIA就完事”，而是让屏幕阅读器、键盘用户、放大镜使用者等能像视力正常且用鼠标的人一样理解结构、找到内容、完成操作。它依赖原生语义，不是靠补丁堆出来的。
为什么<div>不能随便当按钮或标题用
<p>屏幕阅读器不读<code><div>的视觉样式，只读它的语义角色和属性。一个<code><div onclick="submit()">在AT（辅助技术）眼里就是个“无名无姓的容器”，既不能被Tab聚焦，也不能被Enter触发，更不会被朗读为“按钮”。
<ul>
<li>正确做法是直接用<code><button></button>：自带焦点、键盘响应、语义明确
<div>（如复杂渲染场景），得手动加<code>tabindex="0" + role="button" + keydown监听Enter/Space
preventDefault()，按空格会滚动页面
<main></main>、<nav></nav>这些语义标签到底起什么作用
它们是辅助技术构建“可访问性树”的原材料。没有<main></main>，NVDA或VoiceOver就不知道哪块是正文；没有<nav aria-label="主导航"></nav>，用户按快捷键N就跳不到导航区。
-
<main></main>必须且只能出现一次，且是的直接子元素 -
<nav></nav>建议加aria-label，否则多个<nav></nav>时无法区分（比如页头导航 vs 页脚链接） -
<section></section>不是“多套个div”，它需要有明确的标题（<h2></h2>~<h6></h6>），否则AT会忽略其结构意义
表单为什么总出问题？关键在<label></label>和for属性
没<label></label>的输入框，屏幕阅读器只会说“编辑框”，不说“邮箱地址”；键盘用户点不到它，触摸设备点击热区也小。
- 推荐嵌套写法：
<label>邮箱<input type="email" name="email"></label>，无需for/id配对 - 若结构不允许嵌套（如用CSS Grid布局），必须用
for="xxx"+id="xxx"严格对应 - 错误示例：
<input id="email"><label for="email2">邮箱</label>——ID不匹配，AT完全失效
alt属性和lang为什么不是可选项
alt缺失，图片对盲人就是“一片空白”；lang="zh-CN"缺失，VoiceOver可能用英文发音读中文，NVDA甚至跳过整段文字。
-
<img src="logo.png" alt="公司名称">：描述内容本质，不是“logo.png” -
<img src="chart.png" alt="">：纯装饰图才用空alt，但前提是它不影响信息传达 -
必须写全，lang="zh"不够，部分AT识别不准 - 动态插入的图片也要同步补
alt，JS生成的DOM漏掉这点，自动化检测工具根本抓不到
最容易被忽略的是：语义结构一旦由JS动态替换（比如SPA路由切换），<main></main>、<h1></h1>这些关键节点必须重新校验是否仍在正确位置、是否仍唯一。DevTools的Accessibility面板只看静态快照，真问题往往藏在交互之后。
