role="main"是aria地标角色，用于标识页面唯一主要内容容器，仅在无法使用原生标签的旧项目或cms模板受限场景下使用；它必须全页唯一、不嵌套于等非主体区域，且不可与共存或重复添加。
role="main" 是什么，什么时候该用
它不是必需的，但能帮屏幕阅读器快速定位页面主要内容。现代 HTML5 有 <main></main> 元素，语义更明确、浏览器支持更好，role="main" 主要用于旧项目兼容或无法改结构的场景。
常见错误是给多个元素加 role="main" —— WAI-ARIA 规范要求整个页面最多只能有一个 role="main"，否则辅助技术会困惑。
怎么写才合法且有效
必须确保：该元素是文档流中的主要内容容器，不嵌套在 <header></header>、<footer></footer>、<aside></aside> 等非主体区域里；不能和 <main></main> 元素共存于同一 DOM 节点（比如既写 <main role="main"></main> 又加 role="main"）。
- ✅ 正确：
<div role="main">...</div>（且全页唯一） - ❌ 错误：
<nav role="main"></nav>（导航不是主体内容） - ❌ 错误：
<main role="main"></main>（冗余，<main></main>自带隐含 role） - ❌ 错误：两个
div都设role="main"
和 标签比，差在哪
<main></main> 是原生语义标签，自带 role="main"，还自动禁用 hidden 属性传播、支持更好的焦点管理。而 role="main" 只是“告诉”辅助工具“这里算主体”，不改变 DOM 行为或样式。
性能上没区别，但维护性差：如果未来要加 autofocus 或配合 inert 控制可访问性，<main></main> 更可靠。
- IE 不支持
<main></main>（需 polyfill 或降级用role="main"） - Chrome/Firefox/Safari 对
<main></main>的 ARIA 处理更一致 - 某些 CMS 输出模板锁定 div 结构，只能靠
role="main"补救
检查是否生效的小技巧
打开 Chrome DevTools → 切到 “Accessibility” 面板 → 选中目标元素，看 “Computed Properties” 里有没有 role: main；或者用屏幕阅读器（如 NVDA + Firefox）按 D 键跳转到主体区，看是否停在预期位置。
容易被忽略的是：如果父元素有 aria-hidden="true" 或 CSS display: none，即使写了 role="main"，内容也不会被读取 —— role 不绕过隐藏逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
