应直接使用语义化HTML5标签如<header>、<nav>、<main>，因其默认隐式ARIA角色已满足可访问性要求；冗余添加role属性反而可能破坏辅助技术识别，仅在无对应标签时才显式声明role。
role="banner" 不需要手动加 —— 只要 header 是 body 的首个直接子元素，它就自动拥有 role="banner"。
为什么 header 放在 body 下第一层才被识别为全局页眉
浏览器和屏幕阅读器只在特定 DOM 位置触发隐式 role="banner"：必须是 body 的直接子节点，且不能被 div、section 或其他容器包裹。一旦嵌套，比如 <div class="wrapper"><header>...</header></div>，这个 header 就降级为普通结构容器，不再算全局页眉。
- 辅助技术（如 NVDA、VoiceOver）通过 landmark 列表跳转时，只把最外层那个
header当作banner入口 - SEO 工具（如 Lighthouse、Search Console）也按此规则提取“页面入口”语义
- 多个
header是允许的，但只有第一个能触发role="banner"；其余属于article或section内部的，语义上是局部头部，不该也不需加role="banner"
常见错误：手动加 role="banner" 反而破坏可访问性
显式写 <header role="banner"> 属于冗余操作，甚至可能干扰旧版辅助技术对原生语义的识别。HTML5 规范已明确定义 header 在顶层位置的隐式角色，不需要覆盖。
- 所有现代浏览器（Chrome/Firefox/Safari/Edge）和主流读屏器都默认支持该隐式映射
- 手动加
role容易误用于嵌套header，比如<section><header role="banner">...</header></section>，这会让辅助技术误判为第二个全局页眉，触发 axe 等工具报错landmark-no-duplicate-banner - 若用的是 HTML4 或更老文档类型，才考虑补
role；现在绝大多数项目用 HTML5，无需干预
header 里该放什么才能真正发挥 banner 作用
光有标签结构不够，内容也得匹配“全局页眉”的语义预期：它得是用户一进站就看到的身份标识和导航入口，不是装饰性容器。
立即学习“前端免费学习笔记（深入）”；
- 必须含至少一个引导性元素：
h1～h6（站点名或主标题）、nav（主导航）、form（全站搜索）或img（带alt的 logo） - 禁止塞入与全局身份无关的内容：比如文章发布时间、侧边栏广告、面包屑、页脚链接 —— 这些应归入
main、aside或footer - 避免把
nav塞进main里，否则main会同时承载“主体内容”和“导航”双重语义，导致读屏器跳转错位
最容易被忽略的一点：header 的语义有效性完全取决于它在 DOM 中的位置和内容实质，而不是有没有写 role。哪怕你删掉所有 CSS，只要结构合规，无障碍工具就能正确识别并播报它为“banner”。
