div 到语义标签重构经验

结论：div 到语义标签重构，关键不是「把页面里所有 div 都换掉」，而是按「这块内容在页面里承担什么职责」选标签——地标区域用 header/nav/main/aside/footer，能脱离上下文独立分发的内容用 article，需要标题绑定的一组内容用 section（必须带标题），所有交互行为一律换成 button 或 a，剩下的纯样式容器继续用 div。一次完整的重构，通常能同时改善屏幕阅读器地标数、Tab 键停靠点数量和 Lighthouse 可访问性得分三项指标。

语义标签重构应该先做什么？

结论：先画结构骨架、记录基线数字，再动代码，比打开文件逐个替换 div 快得多。

具体三步：第一，临时关掉 CSS（DevTools 里勾掉样式表，或截图后手动画线框），标出页面的顶层区域清单，例如「页头 / 主导航 / 正文 / 相关推荐 / 页脚」；第二，打开 Chrome DevTools 的 Accessibility 面板或跑一次 Lighthouse，记下改造前的可访问性得分、地标数量、可聚焦元素数量，作为对比基线；第三，按「先骨架（header/main/footer）→ 后组件（列表、卡片）→ 最后表单与按钮」的顺序改，一次只改一类，便于回滚。

顺序反过来做，也就是先改按钮再改结构，会导致焦点顺序和地标结构互相打架，返工率明显上升。

header、nav、main、aside、footer 怎么分工？

结论：这五个标签自带地标（landmark）语义，屏幕阅读器可以直接按键跳转，其中 main 在一个页面里只能出现一次，且必须可见。

header 用于页头，也可以用在 article 或 section 内部作为该区块的头部——注意 header 嵌在 article 里时，它不再是页面的 banner 地标。nav 是主要导航链接组，一个页面可以出现多个 nav（顶部、侧边、页脚），建议加 aria-label="主导航" 加以区分。main 承载页面唯一的核心内容，只能有一个，且不能用 display:none 或 hidden 藏起来。aside 放与主内容弱相关的补充，例如侧边广告、相关文章。footer 用于页脚或区块尾部。

另外，不要手写 role="banner"、role="main" 这类冗余属性，原生标签已经隐含了对应角色。

article 和 section 到底什么时候用？

结论：判断标准只有一句话——「这块内容单独拿出来、脱离上下文还能不能讲通」，能讲通用 article，不能讲通但需要标题把内容绑在一起用 section，两者都不满足就用 div。

article 的典型场景：博客正文、论坛帖子、商品卡片、单条用户评论。section 一般要有一个 h2–h6 标题作为它的可访问名；没有标题的 section 在无障碍树里就是一个无名地标，对用户反而是噪音。嵌套规则上，文章列表常用 section 包多个 article，评论区把每条评论做成 article，评论内部再用 header 放作者名和时间。

div 上的 onclick 怎么改成 button？

结论：所有靠鼠标点击触发行为的 div 都要换成原生 button，做跳转的换成 a。

具体替换：触发行为用 <button type="button">，同时删掉手写的 role="button"、tabindex="0" 和 keydown 监听——原生 button 自带 Enter / Space 触发和键盘焦点。页面跳转或锚点用 <a href="...">，并保证 href 有真实值。禁用状态用 disabled 属性，不要只用 CSS 的 pointer-events: none，后者拦不住键盘触发。如果一个 div 只是 flex/grid 布局的包裹层，没有任何交互和语义，保留 div 是正确的选择。

样式和验证怎么保证不翻车？

结论：语义标签不排斥 class，但可以用标签选择器替代一部分布局 class；改完必须跑三项验证。

样式层面，可以省略 div.header 这类命名，直接用 header 选样式；按钮的视觉样式建议保留 class，因为 button 的默认样式需要重置。验证三项：一是用 axe DevTools 或 Lighthouse 做可访问性审计，目标分数 100；二是只用 Tab 键走一遍页面，焦点顺序应与视觉顺序一致；三是用 VoiceOver（macOS 按 Cmd+F5）或 NVDA 的地标快速导航键（NVDA 是 D）逐个跳地标，确认名字读得出来。

工程侧两点：React 项目里 class 要写成 className；在 CI 里接上 eslint-plugin-jsx-a11y，把「div 上带 onClick 却没 role」这类写法直接拦在提交前。兼容性方面，IE9 及以下不识别 HTML5 标签，需要 document.createElement 兜底，只面向现代浏览器时无需处理。

收束一下：重构的核心判断链是「职责 → 标签」，地标用五个语义标签、可独立分发用 article、带标题分组用 section、交互用 button/a、纯布局留 div；先记录基线、再按骨架到组件的顺序改，最后用 axe、Tab 键和屏幕阅读器三关验证，改动才算真正完成。