role="main"是ARIA地标角色，用于标识页面唯一主要内容容器，仅在无法使用原生<main>标签的旧项目或CMS模板受限场景下使用；它必须全页唯一、不嵌套于<header>等非主体区域，且不可与<main>共存或重复添加。
role="main" 是什么，什么时候该用
它不是必需的，但能帮屏幕阅读器快速定位页面主要内容。现代 HTML5 有 <main> 元素，语义更明确、浏览器支持更好，role="main" 主要用于旧项目兼容或无法改结构的场景。
常见错误是给多个元素加 role="main" —— WAI-ARIA 规范要求整个页面最多只能有一个 role="main"，否则辅助技术会困惑。
怎么写才合法且有效
必须确保：该元素是文档流中的主要内容容器，不嵌套在 <header>、<footer>、<aside> 等非主体区域里；不能和 <main> 元素共存于同一 DOM 节点（比如既写 <main role="main"> 又加 role="main"）。
- ✅ 正确：
<div role="main">...</div>（且全页唯一） - ❌ 错误：
<nav role="main">（导航不是主体内容） - ❌ 错误：
<main role="main">（冗余，<main>自带隐含 role） - ❌ 错误：两个
div都设role="main"
和 <main> 标签比，差在哪
<main> 是原生语义标签，自带 role="main"，还自动禁用 hidden 属性传播、支持更好的焦点管理。而 role="main" 只是“告诉”辅助工具“这里算主体”，不改变 DOM 行为或样式。
立即学习“前端免费学习笔记（深入）”；
性能上没区别，但维护性差：如果未来要加 autofocus 或配合 inert 控制可访问性，<main> 更可靠。
- IE 不支持
<main>（需 polyfill 或降级用role="main"） - Chrome/Firefox/Safari 对
<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 不绕过隐藏逻辑。
