<main> 标签已自带 role="main"，手动添加会导致重复播报、语义污染及可访问性检测失败；IE11 应改用 <div role="main"> 并配合 html5shiv；<main> 必须直属于 <body> 且仅出现一次，嵌套或多次使用均违反语义规范。

main 标签本身已自带 role="main"，不需要、也不应该手动添加 role="main" 属性。

为什么不能写 <main role="main">

浏览器在解析 <main> 时会自动注入 role="main"，这是 HTML5 规范强制行为。手动加上不仅没用，反而可能触发辅助技术重复播报（比如旧版 JAWS 会读两遍“主内容开始”），干扰用户。axe 等可访问性检测工具也会标记为“隐式角色被覆盖”，属于语义污染。

• 错误写法：<main role="main">...
• 正确写法：<main>...
• 验证方式：Chrome DevTools → Accessibility 面板 → 选中 <main> 元素，Computed Role 应显示 main，而非 generic

IE11 等老环境怎么办？别给 <main> 加 role

IE11 完全不识别 <main> 标签，但它的兼容方案不是“给 <main> 加 role="main"”，而是彻底换掉标签——用 <div role="main">，并配合 html5shiv 等 polyfill 脚本启用 HTML5 元素。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 兜底写法（仅限必须支持 IE）：<div role="main">...
• 禁止写法：<main role="main">（语义冲突 + IE 仍不认 <main>）
• 现代项目（Chrome/Firefox/Safari/Edge）直接用 <main> 即可，无需降级

多个 <main> 或嵌套在 <header> 里，role 不会救你

role="main" 是 ARIA 补充机制，它不能绕过 HTML 结构规范。即使你在 <div role="main"> 上硬加角色，如果它被包在 <header> 或 <nav> 里，屏幕阅读器仍大概率忽略——因为语义层级冲突，辅助技术优先信任结构而非角色声明。

立即学习“前端免费学习笔记（深入）”；

• 错误结构：<header><main>...</main></header>（<main> 被视为导航上下文中的内容）
• 正确结构：<body><header></header><main></main><footer></footer></body>
• SPA 中常见问题：每个路由组件都渲染 <main>，导致 DOM 中残留多个——role 无法修复这种结构性错误

真正难的不是配对 role，而是判断哪块内容才配得上 <main>：它必须是当前 URL 下独有、不可复用的主体，且只能出现一次、直属于 <body>。其他所有“补救式加 role”的操作，本质都是在掩盖语义误用。