标签自带隐式role="main"，显式添加属冗余且暴露理解偏差；浏览器强制注入该role，重复声明可能引发旧版读屏器解析歧义、协作误判及检测警告。
main 标签本身已自带 role="main"，显式再写 role="main" 不仅无益，反而暴露对语义机制的理解偏差。
为什么不需要也不该加role="main"
浏览器在解析 main 时，会自动在无障碍树（Accessibility Tree）中为其注入 role="main"。这个行为是 HTML5 规范强制要求的，不是可选项。手动重复添加既不改变任何行为，也不提升兼容性——旧版辅助技术（如 IE11 + JAWS）识别的是标签名本身，而非你写的 role 属性。
- W3C 验证器会对多个
main报错，但对role="main"完全不校验——这导致用div role="main"容易无意中塞进多个“主内容”，破坏 landmark 导航逻辑 - Chrome DevTools 的 Accessibility 面板里点开
main元素，Role 字段显示的就是main，不是generic；而div role="main"才需要你手动验证是否生效 - React/Vue 中若用
div动态渲染主内容区，才需兜底加role="main"；但一旦用了main标签，就该删掉所有冗余 role
main 和 role="main" 能否共存？
能共存，但属于错误实践。例如：<main role="main"></main> 是合法 HTML，浏览器不会报错，但语义上冗余且有害：
- 部分旧版屏幕阅读器（如 NVDA 2018 以前版本）可能因双重声明产生解析歧义，跳过该 landmark
- 团队协作时，看到
role="main"会下意识认为这是降级方案，进而怀疑main标签是否被误用或 SSR 失败 - 自动化检测工具（如 axe-core）虽不直接报错，但在“ARIA 属性冗余”类规则中会标记为 low-severity warning
什么情况下必须用 role="main"？
只有两种真实场景需要它，且都意味着你**无法使用 main 标签**：
立即学习“前端免费学习笔记（深入）”；
- 需要支持 IE11 或 Android 4.4 WebView 等完全不识别
main的环境，且项目不允许 polyfill 或条件渲染 - 服务端模板系统（如 PHP Smarty）输出结构固定，无法动态插入
main，只能靠div role="main"做语义补救
注意：这两种情况都要求严格保证全局唯一性——不能因为“多加一个更保险”就写两个 div role="main"，否则屏幕阅读器只会跳转到第一个，第二个彻底失效。
main 标签真正容易被忽略的约束
比起 role 是否冗余，更常踩坑的是 main 的结构合法性：
- 它不能是
header、footer、nav、aside的子元素——浏览器不报错，但 VoiceOver 可能直接跳过该main - Next.js 的
app/layout.tsx里放main是典型误用；真正的页面主体必须落在app/page.tsx或路由页组件内 - SSR hydration 不一致时（比如服务端渲染了
main，客户端 React 却把它删了或替换了），无障碍树会丢失该 landmark，且无控制台警告
